{"id":316,"date":"2022-04-22T18:22:31","date_gmt":"2022-04-22T18:22:31","guid":{"rendered":"https:\/\/melfaeforest.xhere.eu.org\/?p=316"},"modified":"2022-04-29T17:17:08","modified_gmt":"2022-04-29T17:17:08","slug":"javascript-quick-notebook-summary-part-2","status":"publish","type":"post","link":"https:\/\/melfaeforest.xhere.eu.org\/?p=316","title":{"rendered":"JavaScript Quick Notebook Summary &#8211; Part 2"},"content":{"rendered":"\n<p><strong>Strict Mode<\/strong><\/p>\n\n\n\n<p>In JavaScript, there is two modes you can initiate for the file: Default\/Non-Strict Mode and Strict Mode. Default\/Non-Strict Mode is unofficially referred to as &#8220;Sloppy Mode&#8221;, because Strict Mode intentionally opts in restrictions and have different semantics compared to the Non-Strict Mode.<\/p>\n\n\n\n<p>Strict mode makes several changes to normal JavaScript semantics:<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>Eliminates some JavaScript silent errors by changing them to throw errors.<\/li><li>Fixes mistakes that make it difficult for JavaScript engines to perform optimizations: strict mode code can sometimes be made to run faster than identical code that&#8217;s not strict mode.<\/li><li>Prohibits some syntax likely to be defined in future versions of ECMAScript.<\/li><\/ol>\n\n\n\n<p>To invoke strict mode, just add the following line of text <strong><em>to the very top of the JavaScript file before anything else:<\/em><\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">'use strict';<\/pre>\n\n\n\n<p>For a more in-depth explaination and examples of Strict Mode, use the <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Strict_mode\">MDN Web Documents.<\/a><\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p><strong>Functions<\/strong><\/p>\n\n\n\n<p>Functions are one of the fundamental building blocks in JavaScript. A function in JavaScript is similar to a procedure\u2014a set of statements that performs a task or calculates a value, but for a procedure to qualify as a function, it should take some input and return an output where there is some obvious relationship between the input and the output.<\/p>\n\n\n\n<p>A <strong>function definition<\/strong> (also called a <strong>function declaration<\/strong>, or <strong>function statement<\/strong>) consists of the <code>function<\/code> keyword, followed by:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>The name of the function.<\/li><li>A list of parameters to the function, enclosed in parentheses and separated by commas.<\/li><li>The JavaScript statements that define the function, enclosed in curly brackets, <code>{...}<\/code>.<\/li><\/ul>\n\n\n\n<p>(The above details on functions is taken from <strong><em>The MDN Web Documents<\/em><\/strong>)<\/p>\n\n\n\n<p>Here&#8217;s an example of a basic function:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">\/\/ Basic function\nfunction say_hello() {\n  console.log('Hello World!');\n}<\/pre>\n\n\n\n<p>Whenever you execute the above &#8220;say_hello()&#8221; function, &#8220;Hello World!&#8221; will be printed to the console.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">\/\/ A slightly more advanced, but still basic function\nfunction add(a, b) {\n  console.log(a + b);\n}<\/pre>\n\n\n\n<p>The above function now has parameters, which requires them to be filled out for the function to execute, or else an error will be thrown.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">\/\/ A function that has been assigned to a variable\nconst myFunc = function(a) {\n  console.log(\"Hello\", a);\n}<\/pre>\n\n\n\n<p>You can even assign functions to var, let, and const variables. This is handy for when you want to store individual outputs a function may produce.<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p><strong>Function Declaration &amp; Function Expression<\/strong><\/p>\n\n\n\n<p>You can declare functions in one of two ways in JavaScript; these are known as Function Declaration &amp; Function Expression.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">\/\/ Function Declaration\nfunction add(num1, num2) {\n  console.log(num1 + num2);\n}<\/pre>\n\n\n\n<p>The above is a Function Declaration, it is easily told by the &#8220;function add&#8221;, aka the &#8220;function&#8221; keyword comes before the function name (&#8220;add&#8221;).<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">\/\/ Function Expression\nconst add = function (num1, num2) {\n  console.log(num1 + num2);\n}<\/pre>\n\n\n\n<p>This function is a Function Expression. This time the function is saved inside a const variable, and the function name (&#8220;add&#8221;) comes before the &#8220;function&#8221; keyword. (Even is on the left side of the equal side!)<\/p>\n\n\n\n<p>So what&#8217;s the difference between these two? Function Declaration can be used before they are actually initialized, or created for simplicity; where as Function Expression CAN NOT be used before they are initialized. It is better to use Function Expression in JavaScript because they force you to use them after initialization, and therefore prevent bugs that will come with Function Declaration.<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p><strong>Arrow Functions<\/strong><\/p>\n\n\n\n<p>An <strong>arrow function expression<\/strong> is a compact alternative to a traditional function expression, but is limited and can&#8217;t be used in all situations.<\/p>\n\n\n\n<p>There are differences between <em>arrow functions<\/em> and <em>traditional functions<\/em>, as well as some limitations:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Arrow functions don&#8217;t have their own bindings to <code>this<\/code> or <code>super<\/code>, and should not be used as <code>methods<\/code>.<\/li><li>Arrow functions don&#8217;t have access to the <code>new.target<\/code> keyword.<\/li><li>Arrow functions aren&#8217;t suitable for <code>call<\/code>, <code>apply<\/code> and <code>bind<\/code> methods, which generally rely on establishing a scope.<\/li><li>Arrow functions cannot be used as constructors.<\/li><li>Arrow functions cannot use <code>yield<\/code>, within its body.<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/\/\/\/\/ NOTE: Each step along the way is a valid \"arrow function\".\n\/\/ Traditional Anonymous Function\nfunction (a){\n  return a + 100;\n}\n\n\/\/ Arrow Function Break Down\n\n\/\/ 1. Remove the word \"function\" and place arrow between the argument and opening body bracket\n(a) =&gt; {\n  return a + 100;\n}\n\n\/\/ 2. Remove the body braces and word \"return\" -- the return is implied.\n(a) =&gt; a + 100;\n\n\/\/ 3. Remove the argument parentheses\na =&gt; a + 100;\n<\/code><\/pre>\n\n\n\n<p>The { braces } and ( parentheses ) and &#8220;return&#8221; are required in some cases.<\/p>\n\n\n\n<p>For example, if you have <strong>multiple arguments<\/strong> or <strong>no arguments<\/strong>, you&#8217;ll need to re-introduce parentheses around the arguments:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ Traditional Anonymous Function\nfunction (a, b){\n  return a + b + 100;\n}\n\n\/\/ Arrow Function\n(a, b) =&gt; a + b + 100;\n\n\/\/ Traditional Anonymous Function (no arguments)\nlet a = 4;\nlet b = 2;\nfunction (){\n  return a + b + 100;\n}\n\n\/\/ Arrow Function (no arguments)\nlet a = 4;\nlet b = 2;\n() =&gt; a + b + 100;\n<\/code><\/pre>\n\n\n\n<p>Likewise, if the body requires <strong>additional lines<\/strong> of processing, you&#8217;ll need to re-introduce braces <strong>PLUS the &#8220;return&#8221;<\/strong> (arrow functions do not magically guess what or when you want to &#8220;return&#8221;):<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ Traditional Anonymous Function\nfunction (a, b){\n  let chuck = 42;\n  return a + b + chuck;\n}\n\n\/\/ Arrow Function\n(a, b) =&gt; {\n  let chuck = 42;\n  return a + b + chuck;\n}\n<\/code><\/pre>\n\n\n\n<p>And finally, for <strong>named functions<\/strong> we treat arrow expressions like variables:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ Traditional Function\nfunction bob (a){\n  return a + 100;\n}\n\n\/\/ Arrow Function\nlet bob = a =&gt; a + 100;\n<\/code><\/pre>\n\n\n\n<p>(The above details on arrow functions is taken from <strong><em>The MDN Web Documents<\/em><\/strong>)<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p><strong>Functions Calling Other Functions<\/strong><\/p>\n\n\n\n<p>It is possible to call a function within a function.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">\/\/ Function calling another function\nconst funcB = function() {\n  console.log(\"I'm being called from a different function! :D\");\n}\n\nconst funcA = function() {\n  console.log(\"I'm the main function that gets called!\");\n  funcB();\n}\nfuncA();\n\n\/\/ Result of the code execution above:\n\"I'm the main function that gets called!\"\n\"I'm being called from a different function! :D\"<\/pre>\n\n\n\n<p>As you can see, <code>funcB()<\/code> was executed inside <code>funcA()<\/code> after it finished logging &#8220;I&#8217;m the main function that gets called!&#8221;, and therefore it logged &#8220;I&#8217;m being called from a different function! :D&#8221; directly afterwards.<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p class=\"has-medium-font-size\"><strong><em>FUNCTIONS REVIEW<\/em><\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"553\" src=\"https:\/\/melfaeforest.xhere.eu.org\/wp-content\/uploads\/2022\/04\/Functions-Review-1-1024x553.png\" alt=\"\" class=\"wp-image-337\" srcset=\"https:\/\/melfaeforest.xhere.eu.org\/wp-content\/uploads\/2022\/04\/Functions-Review-1-1024x553.png 1024w, https:\/\/melfaeforest.xhere.eu.org\/wp-content\/uploads\/2022\/04\/Functions-Review-1-300x162.png 300w, https:\/\/melfaeforest.xhere.eu.org\/wp-content\/uploads\/2022\/04\/Functions-Review-1-768x415.png 768w, https:\/\/melfaeforest.xhere.eu.org\/wp-content\/uploads\/2022\/04\/Functions-Review-1-1536x830.png 1536w, https:\/\/melfaeforest.xhere.eu.org\/wp-content\/uploads\/2022\/04\/Functions-Review-1.png 1651w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"554\" src=\"https:\/\/melfaeforest.xhere.eu.org\/wp-content\/uploads\/2022\/04\/Functions-Review-2-1024x554.png\" alt=\"\" class=\"wp-image-338\" srcset=\"https:\/\/melfaeforest.xhere.eu.org\/wp-content\/uploads\/2022\/04\/Functions-Review-2-1024x554.png 1024w, https:\/\/melfaeforest.xhere.eu.org\/wp-content\/uploads\/2022\/04\/Functions-Review-2-300x162.png 300w, https:\/\/melfaeforest.xhere.eu.org\/wp-content\/uploads\/2022\/04\/Functions-Review-2-768x416.png 768w, https:\/\/melfaeforest.xhere.eu.org\/wp-content\/uploads\/2022\/04\/Functions-Review-2-1536x831.png 1536w, https:\/\/melfaeforest.xhere.eu.org\/wp-content\/uploads\/2022\/04\/Functions-Review-2.png 1645w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p><strong>Arrays<\/strong><\/p>\n\n\n\n<p>The <strong><code>Array<\/code><\/strong> object, as with arrays in other programming languages, enables storing a collection of multiple items under a single variable name, and has members for performing common array operations.<\/p>\n\n\n\n<p>In JavaScript, arrays aren&#8217;t <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Glossary\/Primitive\">primitives<\/a> but are instead <code>Array<\/code> objects with the following core characteristics:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>JavaScript arrays are resizable<\/strong> and <strong>can contain a mix of different <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Data_structures\">data types<\/a><\/strong>. (When those characteristics are undesirable, use <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Typed_arrays\">typed arrays<\/a> instead.)<\/li><li><strong>JavaScript arrays are not associative arrays<\/strong> and so, array elements cannot be accessed using strings as indexes, but must be accessed using integers as indexes.<\/li><li><strong>JavaScript arrays are <a href=\"https:\/\/en.wikipedia.org\/wiki\/Zero-based_numbering\">zero-indexed<\/a><\/strong>: the first element of an array is at index <code>0<\/code>, the second is at index <code>1<\/code>, and so on \u2014 and the last element is at the value of the array&#8217;s <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Array\/length\"><code>length<\/code><\/a> property minus <code>1<\/code>.<\/li><li><strong>JavaScript <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Array#copy_an_array\">array-copy operations<\/a> create <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Glossary\/Shallow_copy\">shallow copies<\/a><\/strong>. (All standard built-in copy operations with <em>any<\/em> JavaScript objects create shallow copies, rather than <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Glossary\/Deep_copy\">deep copies<\/a>).<\/li><\/ul>\n\n\n\n<p>(The above details on arrays is taken from <strong><em>The MDN Web Documents<\/em><\/strong>)<\/p>\n\n\n\n<p><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">\/\/\/\/ Array examples\n\/\/ You can put practically anything into them!\nconst basicArray = [1, 2, 'String', true, false, ['a nested array']];\n\n\/\/ And then take them back out!\nlet arrExample = basicArray[2]; \/\/ Will extract out \"String\" from basicArray\nconsole.log(arrExample); \/\/ Will log \"String\" to the console\n\n\/\/ REMINDER: Arrays are zero-indexed! They start counting from 0 and not 1!\n\n\n<\/pre>\n\n\n\n<p><\/p>\n\n\n\n<p>And now for some Array functions to learn!<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">\/\/\/\/ Array constructor - creates a new Array object\nArray()\n\n\/\/\/\/ Creates a new Array instance from an array-like object or iterable object\nArray.from()\n\n\/\/\/\/ Returns true if the argument is an Array. Otherwise, it returns false\nArray.isArray()\n\n\/\/\/\/ Creates a new Array instance with a variable number of arguments, regardless of number or type of the arguments\nArray.of()\n\n\/\/\/\/ Reflects the number of elements in an array\nArray.length\n\n\/\/\/\/ Returns a new array iterator object that contains the key\/value pairs for each index in an array\nArray.prototype.entries()\n\n\/\/\/\/ Returns true if every element in the calling array satisfies the testing function\nArray.prototype.every()\n\n\/\/\/\/ Returns a new array containing all elements of the calling array for which the provided filtering function returns true\nArray.prototype.filter()\n\n\/\/\/\/ Returns the found element in the calling array, if some element in the array satisfies the testing function, or undefined if not found\nArray.prototype.find()\n\n\/\/\/\/ Returns a new array with all sub-array elements concatenated into it recursively up to the specified depth\nArray.prototype.flat()\n\n\/\/\/\/ Returns a new array formed by applying a given callback function to each element of the calling array, and then flattening the result by one level.\nArray.prototype.flatMap()\n\n\/\/\/\/ Calls a function for each element in the calling array\nArray.prototype.forEach()\n\n\/\/\/\/ Determines whether the calling array contains a value, returning true or false as appropriate.\nArray.prototype.includes()\n\n\/\/\/\/ Joins all elements of an array into a string\nArray.prototype.join()\n\n\/\/\/\/ Returns the first (least) index at which a given element can be found in the calling array\nArray.prototype.indexOf()\n\n\/\/\/\/ Returns a new array iterator that contains the keys for each index in the calling array\nArray.prototype.keys()\n\n\/\/\/\/ Returns a new array iterator object that contains the values for each index in the array.\nArray.prototype.values()\n\n\/\/\/\/ Returns the last (greatest) index at which a given element can be found in the calling array, or -1 if none is found\nArray.prototype.lastIndexOf()\n\n\/\/\/\/ Returns a new array containing the results of invoking a function on every element in the calling array\nArray.prototype.map()\n\n\/\/\/\/ Executes a user-supplied \"reducer\" callback function on each element of the array (from left to right), to reduce it to a single value\nArray.prototype.reduce()\n\n\/\/\/\/ Reverses the order of the elements of an array in place. (First becomes the last, last becomes first)\nArray.prototype.reverse()\n\n\/\/\/\/ Returns true if at least one element in the calling array satisfies the provided testing function\nArray.prototype.some()\n\n\/\/\/\/ Sorts the elements of an array in place and returns the array\nArray.prototype.sort()\n\n\/\/\/\/ Extracts a section of the calling array and returns a new array\nArray.prototype.slice()\n\n\/\/\/\/ Adds and\/or removes elements from an array\nArray.prototype.splice()\n\n\/\/\/\/ Removes the last element from an array and returns that element.\nArray.prototype.pop()\n\n\/\/\/\/ Removes the first element from an array and returns that element\nArray.prototype.shift()\n\n\/\/\/\/ Adds one or more elements to the end of an array, and returns the new length of the array\nArray.prototype.push()\n\n\/\/\/\/ Adds one or more elements to the front of an array, and returns the new length of the array\nArray.prototype.unshift()<\/pre>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p><strong>Objects<\/strong><\/p>\n\n\n\n<p>In JavaScript, an object is an unordered collection of key-value pairs. Each key-value pair is called a property. The key of a property can be a string. And the value of a property can be any value, e.g., a string, a number, an array, and even a function. JavaScript provides you with many ways to create an object. The most commonly used one is to use the object literal notation.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">\/\/ An empty object gets created. Note how it uses { curly-brackets } to identify that what was created was an object\nconst emptyObj = {};<\/pre>\n\n\n\n<p>To create an object with properties, you use the <code>key:value<\/code> within the curly-brackets. Like so:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">\/\/ An example of an object with a simple key:value set of properties\nconst newObj = {\n  initials: 'LJ',\n  favcolor: 'Blue',\n  favNum: 42,\n  experience: ['Python', 'HTML', 'CSS', 'JavaScript']\n};<\/pre>\n\n\n\n<p>When an object has multiple properties, you separate them using a comma (<code>,<\/code>) like in the above example. Now to access the data in an object, you can do one of two ways: Bracket Notation, and Dot Notation.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">\/\/ Bracket Notation VS Dot Notation (Part 1)\nconsole.log(newObj[initials]);\nconsole.log(newObj.initials);<\/pre>\n\n\n\n<p>Both of the notations in the above example will yield the same result in logging &#8220;LJ&#8221; to the console. So what&#8217;s the difference between them? Besides visually, of course. This is one of the reasons:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">\/\/ Bracket Notation VS Dot Notation (Part 2)\nconst bvdExamp = {\n  'building no': 2319\n};\n\nconsole.log(newObj['building no']); \/\/ Will work\nconsole.log(newObj.'building no'); \/\/ Will NOT work<\/pre>\n\n\n\n<p>To access the key &#8220;building no&#8221;, you have to use the Bracket Notation, because otherwise you&#8217;ll get the following error:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">SyntaxError: Unexpected string<\/pre>\n\n\n\n<p>Since &#8220;building no&#8221; is two words with a space, you&#8217;re forced to make it a string, which is something the Dot Notation really doesn&#8217;t like. Not only that, but its bad practice to put spacing in multi-word property key names (or variables in general).<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">\/\/ Bracket Notation VS Dot Notation (Part 3)\nconst bvdExamp2 = {\n  buildingNo: 2319\n};<\/pre>\n\n\n\n<p>Now if the key name was <code>buildingNo<\/code> (a conjoined camelCase word), then using the Dot Notation will work with accessing the value of the property.<\/p>\n\n\n\n<p>So which do you use when it comes to accessing property values of JavaScript Objects? It all comes down to personal preference, there&#8217;s zero difference between the two besides how you type them and SyntaxError that will be thrown if you tried passing a string for the Dot Notation. It is generally accepted that Dot Notation is used more frequently, due to it being quicker to type and is easier to read compared to Bracket Notation.<\/p>\n\n\n\n<hr class=\"wp-block-separator is-style-default\"\/>\n\n\n\n<p><strong>Object Methods &amp; the &#8216;this&#8217; keyword<\/strong><\/p>\n\n\n\n<p>Continuing on from JS objects, it is possible for an object to have a property that is a function. This is referred to as an Object Method. <\/p>\n\n\n\n<p>Object methods function nearly identical to regular functions, except for a couple details, most notably the access to the <code>this<\/code> keyword. In short, the <code>this<\/code> keyword refers to an object, which is often the one that called\/invoked it. The <code>this<\/code> keyword refers to different objects depending on how it is used:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td>In an object method, <code>this<\/code> refers to the <strong>object<\/strong>.<\/td><\/tr><tr><td>Alone, <code>this<\/code> refers to the <strong>global object<\/strong>.<\/td><\/tr><tr><td>In a function, <code>this<\/code> refers to the <strong>global object<\/strong>.<\/td><\/tr><tr><td>In a function, in strict mode, <code>this<\/code> is <code>undefined<\/code>.<\/td><\/tr><tr><td>In an event, <code>this<\/code> refers to the <strong>element<\/strong> that received the event.<\/td><\/tr><tr><td>Methods like <code>call()<\/code>, <code>apply()<\/code>, and <code>bind()<\/code> can refer <code>this<\/code> to <strong>any object<\/strong>.<\/td><\/tr><\/tbody><\/table><figcaption>A table explaining what the &#8220;this&#8221; keyword refers to depending on how it is used. (Source: W3Schools)<\/figcaption><\/figure>\n\n\n\n<p>Getting back onto the topic of object methods, to make one, you just use the following:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">\/\/ A basic JS object with an object method\nconst methodExamp = {\n  birthYear: 2003,\n  calcAge: function () {\n    return 2037 - this.age;\n }\n};\n\n\/\/ The same function as the object method, only outside an object\ncalcAge: function () {\n  return 2037 - 2003;\n};<\/pre>\n\n\n\n<p>This is a basic example, but it shows how similar an object method works to a regular function, as well as showing the most basic usage of the <code>this<\/code> keyword. To call\/invoke an object method, you just simply do the dot notation.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">\/\/ Will log \"34\" (as a number) to the console\nconsole.log(methodExamp.calcAge());<\/pre>\n\n\n\n<p>See? Its simple.<\/p>\n\n\n\n<p>In 2015, one of the many changes that came in the second major revision to JavaScript was <strong>Enhanced Object Literals<\/strong>. What Enhanced Object Literals did was provide many handy shortcuts to certain operations, including one for object method declaration. Before this revision, you had to declare object methods like shown above with the examples, but now, you can simply do this instead:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">const methodExamp = {\n  birthYear: 2003,\n  calcAge () {\n    return 2037 - this.age;\n }\n};<\/pre>\n\n\n\n<p>This example is the exact same function as before (and works the same too), only now it cuts out the colon (<code>:<\/code>) and &#8220;function&#8221;, allowing for easier readability. <\/p>\n\n\n\n<p>At the end of it all, it&#8217;s all down to personal preference with how one wants to add object methods in JavaScript, via the original way by doing it like a key:value pair, or by using Enhanced Object Literals.<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p><strong>Learning Loops: The For-Loop<\/strong><\/p>\n\n\n\n<p>Loops are one of the most important inclusions in JavaScript, they have great versatility in their applications, and helps keep code compact should they be needed. loops do what their name suggests: They loop over and over under a condition, executing code inside its block while the condition remains true.<\/p>\n\n\n\n<p>The most basic loop is the For-Loop, a loop that takes three arguments: The variable declaration, the condition, and the counter\/iteration count.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">\/\/ A basic for-loop, which will print out \"Iteration #X\", from numbers 1 to 9 to the console\nfor (let i = 1; i &lt; 10; i++) {\n  console.log(`Iteration #${i}`);\n};<\/pre>\n\n\n\n<p>The first part of a for-loop is the <code>let i = 1<\/code> on the left. Here is one of the few cases where we want to use <code>let<\/code> rather than <code>const<\/code>, because this value will be changing in the loop. This temporary variable <code>i<\/code> can be accessed in the loop (as evidenced by the <code>console.log<\/code> line of code), but it cannot be accessed outside the loop before or after the for-loop has ran (which is why its called a <em>temporary<\/em> variable).<\/p>\n\n\n\n<p>The next part of the for loop is the condition <code>i &lt; 10<\/code>. This condition gets checked to see if its true or not in the loop. If it is true, then the loop executes; if not, then the loop ends.<\/p>\n\n\n\n<p>The final part of the for-loop is the <code>i++<\/code>, which means that the temporary variable i that was created for the loop should be incremented by 1 after every loop performed. <code>i++<\/code> is actually a postfix operand, which adds 1 to the counter <em>after<\/em> loop execution. The prefix of the <code>x++<\/code> operand is, of course, the <code>++x<\/code> operand, which does the same thing as x++, only it adds 1 to the counter <em>before<\/em> the loop is executed.<\/p>\n\n\n\n<p>Continuing on from the x++ explaination, there is also <code>x--<\/code> and <code>--x<\/code> operands for JS loops, which does exactly the same as their x++ \/ ++x counterparts, only it predictably subtracts from the counter after and before loop execution respectively, rather than adding. This is used for when you want to loop in reverse order.<\/p>\n\n\n\n<p>Moving back up to the code example above, to make it easier to understand why the loop stops printing at 9 and not 10, here&#8217;s the general order of how the for-loop works with its declaration.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">[ let i = 1 ]\n1. The temporary variable 'i' is made and assigned to the number 1.\n\n[ i &lt; 10 ]\n2. The condition that i is less than 10 is made.\n\n[ code block loops ]\n3. The code block is executed because the condition defined is true with 'i' being less than 10.\n\n[ i++ ]\n4. The variable 'i' is incremented by 1.\n\n[ check if true ]\n5. If the condition is still true, then repeat steps 3 to 5. Otherwise, exit the loop.<\/pre>\n\n\n\n<p>As you can see, the iteration happens before the variable <code>i<\/code> is increased by 1, meaning that after the console logs &#8220;Iteration #9&#8221;, <code>i<\/code> becomes 10 in the background, and thus makes the condition of <code>i &lt; 10<\/code> no longer true, therefore the loop gets exited then and there.<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p><strong>The Break &amp; Continue statements<\/strong><\/p>\n\n\n\n<p>There are two ways you can control if \/ when a JavaScript code block breaks or continues. They are, coincidentally enough, referred to as the <code>break<\/code> and <code>continue<\/code> statements. Both of these statements are the only JavaScript statements that can &#8220;jump out of&#8221; a code block.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">\/\/ Syntax\ncontinue <em>labelname<\/em>;\n\nbreak <em>labelname<\/em>;<\/pre>\n\n\n\n<p>The continue statement (with or without a label reference) can only be used to <strong>completely skip 1 iteration of a loop<\/strong>.<\/p>\n\n\n\n<p>The break statement (without a label reference) is used to <strong>completely exit a loop or a switch<\/strong>.<\/p>\n\n\n\n<p>With a label reference, the break statement can be used to <strong>jump out of any code block<\/strong>. (Not just a loop or a switch.)<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">\/\/\/\/ continue &amp; break examples\n\/\/ break - The code will only log \"1\" and \"2\" (as numbers) before exiting the loop completely because i === 3, which will trigger the code to break the loop\nfor (i = 1; i &lt;= 5; i++) {\n  if (i === 3) {\n    break\n  };\n  console.log(`Iteration #${i}`)\n};\n\n\/\/ continue - The code will simply skip over that 3rd iteration, allowing the rest of the iterations to go uninterrupted\nfor (i = 1; i &lt;= 5; i++) {\n  if (i === 3) {\n    continue\n  };\n  console.log(`Iteration #${i}`)\n};<\/pre>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p><strong>Backward Looping &amp; Nested Loops<\/strong><\/p>\n\n\n\n<p>As mentioned previously, the <code>x--<\/code> \/ <code>--x<\/code> operands are mainly used to loop backwards.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">\/\/\/\/ Looping backwards\n\/\/ A basic example\nconsole.log('Countdown of DOOM!');\nfor (let i = 10; i &gt;= 0; i--) {\n  console.log(`10 second(s) remaining!`);\n};\nconsole.log('DOOM!');\n\n\/\/\/\/\/\/ Yes this example is just to humor how countdowns are typically used in movies.<\/pre>\n\n\n\n<p>There&#8217;s not much else to explain about looping backwards. They just loop in reverse order compared to looping normally, and as such, they have roughly the same usage.<\/p>\n\n\n\n<p>Nested loops means a loop inside another loop; as crazy as that sounds, its actually really helpful in certain cases. <\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">\/\/\/\/ Nested Loops\n\/\/ Reminder that the temporary counter variable can be named basically anything\nfor (let exercise = 1; exercise &lt;= 3; exercise++) {\n  console.log(<code>------ BEGIN EXERCISE #${exercise});\n\n  for (let rep = 1; exercise &lt;= 5; rep++) {\n    console.log(<\/code>`Lifting Weights: Rep #${rep}`);\n  };\n};<\/pre>\n\n\n\n<p>The above example will print out &#8220;BEGIN EXERCISE #X&#8221; (with X being the counter), followed by &#8220;Lifting Weights: Rep #Y&#8221; (with Y being the nested loop&#8217;s own counter), and this code will loop over 3 times, totaling printing the second for-loop&#8217;s contents 15 times!<\/p>\n\n\n\n<p>Its not hard to envision how the looping works: The primary loop starts a new iteration -&gt; It gets to the loop inside of it -&gt; The secondary loop does its iterations under its condition -&gt; Secondary Loop exits -&gt; Primary loop continues iterating -&gt; Repeat until the primary loop&#8217;s condition is no longer true.<\/p>\n\n\n\n<p>Keep in mind that due to being in a loop block, any nested loop\/function\/whatever can use any and all saved datatypes (such as variables) that was initialized before them. This is known as the scope chain, but that won&#8217;t be covered in this short section summary.<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p><strong>Learning Loops: The While Loop<\/strong><\/p>\n\n\n\n<p>While loops are another way to loop over objects, and has a slightly different looping role compared to a for-loop.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">\/\/ A basic while-loop\nlet counter = 1;\nwhile (counter &lt; 11) {\n  console.log(`Iteration #${counter}`);\n  counter++;\n};<\/pre>\n\n\n\n<p>The above example is the same as the basic for-loop in a previous section, just to demonstrate a while-loop and the similarities between it and the for-loop. As one can see, the while-loop only takes one parameter, the condition, and like the for-loop, it will keep looping under that condition as long as it stays true. This is a bit of a double-edged sword since its way more likely for someone to accidentally create an infinite loop with a while-loop than it is with a for-loop.<\/p>\n\n\n\n<p>While you could use a while-loop to do the same things as a for-loop, the true power of the while-loop is that its condition is not tethered to using a counter, and can be just about anything as long as the condition equates to either true or false. For example:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">\/\/ A more applicable usage of a while-loop\nlet die = Math.trunc(Math.random() * 6) + 1;\n\nwhile (die !== 6) {\n  console.log(<code>The die result is ${die}!)\n  die = Math.trunc(Math.random() * 6) + 1;\n};\nconsole.log(<\/code>`The search for rolling a ${die} has concluded!`);<\/pre>\n\n\n\n<p>You aren&#8217;t expected to understand the <code>Math.trunc<\/code> and <code>Math.random()<\/code> functions quite yet, but basically they&#8217;re being used here to randomly create a whole number from 1 to 6 (AKA a standard 6-sided die) each time the JavaScript file is ran. <\/p>\n\n\n\n<p>The code above is using the random number generation in order to keep looping until the number 6 is rolled, and if the number isn&#8217;t a 6, then it prints the die result, and &#8220;re-roll&#8221; the number generation. Since the &#8220;re-rolling&#8221; code is at the end of the code block, if the die re-roll becomes 6, the loop will end right there since the condition is now false by the time comparison is made again.<\/p>\n\n\n\n<p>As you can see with the demonstration code and the explanation above, the while-loop has a couple more broad applications of use with the condition being able to take anything that results in either true or false, and not just keeping tabs on a temporary counter variable to compare with.<\/p>\n\n\n\n<p>To make it easy to understand what form of loop you should go with in certain cases, here&#8217;s a tip: For-loops are best when you know exactly how many iterations you need to use, and while-loops are best when you don&#8217;t know how many looping iterations are needed to get the result you want.<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Strict Mode In JavaScript, there is two modes you can initiate for the file: Default\/Non-Strict Mode and Strict Mode. Default\/Non-Strict Mode is unofficially referred to as &#8220;Sloppy Mode&#8221;, because Strict Mode intentionally opts in restrictions and have different semantics compared to the Non-Strict Mode. Strict mode makes several changes to normal JavaScript semantics: Eliminates some [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-316","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/melfaeforest.xhere.eu.org\/index.php?rest_route=\/wp\/v2\/posts\/316","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/melfaeforest.xhere.eu.org\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/melfaeforest.xhere.eu.org\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/melfaeforest.xhere.eu.org\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/melfaeforest.xhere.eu.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=316"}],"version-history":[{"count":53,"href":"https:\/\/melfaeforest.xhere.eu.org\/index.php?rest_route=\/wp\/v2\/posts\/316\/revisions"}],"predecessor-version":[{"id":450,"href":"https:\/\/melfaeforest.xhere.eu.org\/index.php?rest_route=\/wp\/v2\/posts\/316\/revisions\/450"}],"wp:attachment":[{"href":"https:\/\/melfaeforest.xhere.eu.org\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=316"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/melfaeforest.xhere.eu.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=316"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/melfaeforest.xhere.eu.org\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=316"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}