{"id":1603,"date":"2023-09-26T10:09:43","date_gmt":"2023-09-26T14:09:43","guid":{"rendered":"https:\/\/bobtimetech.net\/?page_id=1603"},"modified":"2025-05-15T10:55:43","modified_gmt":"2025-05-15T14:55:43","slug":"javascript-js","status":"publish","type":"page","link":"https:\/\/bobtimetech.net\/index.php\/my-account\/javascript-js\/","title":{"rendered":"JavaScript (JS)"},"content":{"rendered":"\n<div class=\"wp-block-group has-black-background-color has-background\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-group has-background-color has-white-color has-black-background-color has-text-color has-background has-link-color wp-elements-fea288ae859a707d65724bf09c6bd530\" style=\"padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--30)\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-container-core-group-is-layout-23b1a4dc wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-columns alignfull are-vertically-aligned-center is-not-stacked-on-mobile has-background is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\" style=\"background:linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 64%,rgb(107,0,62) 94%)\">\n<div class=\"wp-block-column is-vertically-aligned-center has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"background-color:#f90202\"><div class=\"aligncenter wp-block-site-logo wp-duotone-unset-1\"><a aria-label=\"(Home link, opens in a new tab)\" target=\"_blank\" href=\"https:\/\/bobtimetech.net\/\" class=\"custom-logo-link\" rel=\"home\"><img decoding=\"async\" width=\"311\" height=\"311\" src=\"https:\/\/bobtimetech.net\/wp-content\/uploads\/2024\/10\/cropped-One_Angel.png\" class=\"custom-logo\" alt=\"image of the Angel of Death standing victorious, symbolizing triumph and peace.\" srcset=\"https:\/\/bobtimetech.net\/wp-content\/uploads\/2024\/10\/cropped-One_Angel.png 312w, https:\/\/bobtimetech.net\/wp-content\/uploads\/2024\/10\/cropped-One_Angel-300x300.png 300w, https:\/\/bobtimetech.net\/wp-content\/uploads\/2024\/10\/cropped-One_Angel-150x150.png 150w\" sizes=\"(max-width: 311px) 100vw, 311px\" data-attachment-id=\"4027\" data-permalink=\"https:\/\/bobtimetech.net\/one_angel\/cropped-one_angel-png\/\" data-orig-file=\"https:\/\/bobtimetech.net\/wp-content\/uploads\/2024\/10\/cropped-One_Angel.png\" data-orig-size=\"312,313\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"cropped-One_Angel.png\" data-image-description=\"&lt;p&gt;BobTimeTech.net Logo. image of the Angel of Death standing victorious, symbolizing triumph and peace.&lt;\/p&gt;\n\" data-image-caption=\"\" data-large-file=\"https:\/\/bobtimetech.net\/wp-content\/uploads\/2024\/10\/cropped-One_Angel.png\" \/><\/a><\/div>\n\n\n<h2 class=\"wp-block-heading has-text-align-center has-white-color has-text-color has-large-font-size\" id=\"aioseo-the-devil-is-in-the-details\" style=\"font-style:italic;font-weight:800;text-transform:uppercase\"><em>The Devil is in the details.<\/em><\/h2>\n<\/div>\n<\/div>\n<\/div><\/div>\n<\/div><\/div>\n<\/div><\/div>\n\n\n<div class=\"aioseo-breadcrumbs\"><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/bobtimetech.net\" title=\"Home\">Home<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">\u00bb<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\tJavaScript (JS)\n\t\t<\/span><\/div>\n\n\n<h2 class=\"wp-block-heading has-black-color has-text-color\" id=\"aioseo-javascript\"><span style=\"text-decoration: underline;\">JavaScript<\/span> (JS)<\/h2>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:100%\">\t<div class=\"wp-block-jetpack-gif alignleft\">\n\t\t<figure>\n\t\t\t\t\t\t\t<div class=\"wp-block-jetpack-gif-wrapper\" style=\"padding-top:100%\">\n\t\t\t\t\t<iframe src=\"https:\/\/giphy.com\/embed\/SvFocn0wNMx0iv2rYz\" title=\"Javascript\"><\/iframe>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t<figcaption class=\"wp-block-jetpack-gif-caption gallery-caption\">JavaScript<\/figcaption>\n\t\t\t\t\t<\/figure>\n\t<\/div>\n\t\n\n\n<p>The JavaScript programming language was first developed in 1995 by <a href=\"https:\/\/en.wikipedia.org\/wiki\/Brendan_Eich\" target=\"_blank\" rel=\"noopener\" title=\"\">Brendan Eich<\/a> during his tenure as an engineer at Netscape. Originally intended to be called LiveScript, it underwent a name change before its release. Unlike many other programming languages, JavaScript (JS) does not inherently incorporate input and output functionalities. It is primarily designed to function as a scripting language within a host environment, with the responsibility of facilitating communication with the external world falling upon said environment. The most prevalent host environment for JavaScript is the web browser. JS, it is the most popular language used in web browsers worldwide. Although its name may suggest otherwise, <span class=\"highlight\"><em><strong>JavaScript is not related to Java.<\/strong><\/em><\/span> It is an entirely separate language.<\/p>\n<\/div>\n<\/div>\n\n\n\n<p>When it comes to running your JavaScript code, every web browser provides a built-in JavaScript Engine. One of the most popular ones is NodeJS, which allows you to execute JavaScript code outside the web browser environment.<\/p>\n\n\n\n<p>JavaScript is considered an interpreted language, meaning that it is executed line by line without the need for compilation. This makes development and testing more efficient as you can instantly see the results of your code changes.<\/p>\n\n\n\n<p>Additionally, JavaScript is dynamically typed, which means you don&#8217;t have to declare variable types explicitly. This flexibility allows for faster development and easier maintenance as you can modify variable types on the fly.<\/p>\n\n\n\n<p>To ensure consistent behavior across different implementations of JavaScript, the language is standardized by the EcmaScript specifications. These specifications define the syntax, features, and behavior of JavaScript, ensuring compatibility and interoperability.<\/p>\n\n\n\n<div style=\"height:39px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading has-black-color has-text-color\" id=\"aioseo-ecmascript\"><span style=\"text-decoration: underline;\">ECMAScript<\/span><\/h2>\n\n\n\n<h2 class=\"wp-block-heading has-text-align-left has-black-color has-text-color\" id=\"aioseo-european\">        <strong><span class=\"highlight\"><span style=\"text-decoration: underline;\">E<\/span><\/span>uropean <\/strong><\/h2>\n\n\n\n<h2 class=\"wp-block-heading has-text-align-left has-black-color has-text-color\" id=\"aioseo-computer\">        <strong><span class=\"highlight\"><span style=\"text-decoration: underline;\">C<\/span><\/span>omputer <\/strong><\/h2>\n\n\n\n<h2 class=\"wp-block-heading has-black-color has-text-color\" id=\"aioseo-manufacturers\">        <strong><span class=\"highlight\"><span style=\"text-decoration: underline;\">M<\/span><\/span>anufacturers <\/strong><\/h2>\n\n\n\n<h2 class=\"wp-block-heading has-black-color has-text-color\" id=\"aioseo-association\">        <strong><span class=\"highlight\"><span style=\"text-decoration: underline;\">A<\/span><\/span>ssociation <\/strong><\/h2>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading has-text-align-center\" id=\"aioseo-standardized-by-ecma-international-ecma-262\">(<a href=\"https:\/\/www.ecma-international.org\/publications-and-standards\/standards\/ecma-262\/\" target=\"_blank\" rel=\"noopener\" title=\"\">Standardized by ECMA International ECMA-262<\/a>)<\/h2>\n\n\n\n<p><strong>ECMAScript<\/strong> is a widely used scripting language that is primarily used for client-side web development. It was standardized by the European Computer Manufacturers Association (ECMA) and is now known as the ECMAScript specification.<\/p>\n\n\n\n<p>ECMAScript, often abbreviated as ES, is the foundation for many popular programming languages, including JavaScript. It provides the fundamental syntax, types, and features necessary for building dynamic and interactive websites.<\/p>\n\n\n\n<p>One of the key features of ECMAScript is its ability to manipulate the Document Object Model (DOM), which is a representation of the HTML structure of a web page. With ECMAScript, developers can dynamically modify the content, styles, and behavior of a web page in response to user interactions.<\/p>\n\n\n\n<p>ECMAScript also includes various built-in objects and functions that extend the capabilities of the language. These include objects for manipulating arrays, dates, regular expressions, and more. Additionally, ECMAScript supports modern features such as arrow functions, template literals, async\/await, and destructuring assignments.<\/p>\n\n\n\n<p>With the continuous evolution of ECMAScript, new versions are released periodically, introducing additional features and improvements. It is essential for web developers to stay up to date with the latest specifications to take advantage of the newest capabilities and ensure compatibility with modern browsers.<\/p>\n\n\n\n<p>In conclusion, ECMAScript is a powerful scripting language that forms the basis of JavaScript and enables developers to create dynamic and interactive web applications. Its versatility and constant evolution make it a crucial tool for building modern web experiences.<\/p>\n\n\n\n<div style=\"height:15px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading has-black-color has-text-color\" id=\"aioseo-how-to-insert-a-javascript-file-into-an-html-document\"><strong>How to Insert a JavaScript File into an HTML Document?<\/strong><\/h2>\n\n\n\n<p>JavaScript can be incorporated into an HTML file in two different ways:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong><span class=\"highlight\">Internal JS:<\/span><\/strong> The JavaScript code can be directly added to the HTML file by encapsulating it within the <code>&lt;script&gt;<\/code> tags. Depending on the specific requirement, the <code>&lt;script&gt;<\/code> tag can be placed either within the <code>&lt;head&gt;<\/code> or the <code>&lt;body&gt;<\/code> section of the HTML document.<\/li>\n\n\n\n<li><strong><span class=\"highlight\">External JS:<\/span><\/strong> Alternatively, JavaScript code can be written in a separate file with a <code>.js<\/code> extension. This external JavaScript file can then be linked to the HTML document by placing a <code>&lt;script&gt;<\/code> tag within the <code>&lt;head&gt;<\/code> section of the HTML file. Consequently, the JavaScript code contained in the external file will be inserted into the HTML page.<\/li>\n<\/ol>\n\n\n\n<p>Linking an external JavaScript file offers advantages such as improved code organization and reusability.<\/p>\n\n\n\n<!--nextpage-->\n\n\n\n<h2 id=\"wp-block-themeisle-blocks-advanced-heading-227f40e2\" class=\"wp-block-themeisle-blocks-advanced-heading wp-block-themeisle-blocks-advanced-heading-227f40e2\">Advanced JavaScript Concepts<\/h2>\n\n\n\n<p><br><strong>Node.js<\/strong><br><strong>Overview:<\/strong> Node.js is a JavaScript runtime environment that allows you to run JS outside of a browser (commonly for server-side development)\u200b. Popular web frameworks (e.g., React, Vue, Angular) rely on Node for their build tools and servers\u200b.<br><\/p>\n\n\n\n<p><strong>Running JS Files:<\/strong> You can execute a JavaScript file using Node by navigating to its directory in a terminal and running node file-name.js\u200b. For example, node hello-world.js will run that script and print its output to the console\u200b.<br><\/p>\n\n\n\n<p><strong>Node Shell (REPL):<\/strong> Node provides an interactive shell. Type node with no arguments at the command prompt to enter the Node REPL, where you can enter JavaScript commands and see results immediately\u200b. For instance, you can define variables or loops, and console.log will print to the shell. To exit the Node shell, type .exit or press <strong>Ctrl + D<\/strong>\u200b.<br><\/p>\n\n\n\n<p><strong>Version Management (NVM):<\/strong> It\u2019s possible to have multiple Node versions on the same machine. Tools like <strong>nvm<\/strong> (Node Version Manager) for macOS\/Linux or <strong>nvm-windows<\/strong> for Windows let you install and switch between Node.js versions easily\u200b. This is useful for testing projects in different Node environments.<br><\/p>\n\n\n\n<p><strong>Scope &amp; Variable Declarations<\/strong><br><\/p>\n\n\n\n<p><strong>Scope Types:<\/strong> JavaScript has three main scopes for variables: <strong>global scope<\/strong>, <strong>function scope<\/strong>, and <strong>block scope<\/strong>. Global variables are visible everywhere in the program. Function-scoped variables (declared with var inside a function) are only accessible within that function\u200b. Block-scoped variables (declared with let or const inside a block like { &#8230; }) are only accessible within that block and its sub-blocks\u200b.<br><\/p>\n\n\n\n<p><strong>var vs let vs const:<\/strong> The var keyword is function-scoped (or global if declared outside any function) and can be redeclared, which can lead to bugs. In modern JavaScript, <strong>avoid using<\/strong> var in favor of block-scoped let or const\u200b. A variable declared with let is block-scoped and can be updated (its value can change), but cannot be redeclared in the same scope. A constant declared with const is also block-scoped and <strong>must<\/strong> be initialized at declaration; it cannot be reassigned thereafter\u200b.<br><\/p>\n\n\n\n<p><strong>Constant Behavior:<\/strong> Note that const prevents reassigning a variable <em>itself<\/em>, but if the constant holds an object or array, you <strong>can still modify the contents<\/strong> of that object\/array. In other words, the reference is constant, but the object\u2019s properties can change\u200b. Attempting to reassign a const will throw an error. Use const for values that should not be rebinding, and let for those that will change.<br><\/p>\n\n\n\n<p><strong>Arrow Functions<\/strong><br><\/p>\n\n\n\n<p><strong>Syntax:<\/strong> Arrow functions (fat-arrow functions) use the => syntax as a shorthand for defining functions\u200b. For example, a traditional function function square(x) { return x*x; } can be written as an arrow function: const square = (x) => { return x * x; };\u200b.<br><\/p>\n\n\n\n<p><strong>Shorthand Variations:<\/strong> If the function body is a single expression, you can <strong>omit<\/strong> the curly braces and the return statement \u2013 the expression\u2019s value will be returned implicitly\u200b. For instance, const square = (x) => x * x; is an arrow function that returns x * x\u200b. Also, if there is exactly one parameter, the parentheses around it are optional (x => x * x is valid)\u200b. These shorthand forms make arrow functions very concise.<br><\/p>\n\n\n\n<p><strong>Benefits:<\/strong> Arrow functions are more concise than traditional function expressions, especially for callbacks or one-liners. Importantly, they do <strong>not<\/strong> create their own this context; instead, an arrow function inherits the this value from its surrounding scope\u200b. This lexical binding of this means you don\u2019t need to use .bind(this) or store references to this when using arrows inside methods or callbacks \u2013 this remains what it was in the outer context. (Arrow functions also don\u2019t have their own arguments object, but you can use rest parameters instead.)<br><\/p>\n\n\n\n<p><strong>Rest Parameters<\/strong><br><\/p>\n\n\n\n<p><strong>Purpose &amp; Syntax:<\/strong> A rest parameter allows a function to accept an indefinite number of arguments as an array. In a function definition, prefix the last parameter name with three dots (&#8230;) to gather the \u201crest\u201d of the arguments into an array\u200b. For example: function myFunc(a, &#8230;others) { } captures all arguments after the first into the array others. A function can only have one rest parameter, and it <strong>must be the last parameter<\/strong> in the list\u200b.<br><\/p>\n\n\n\n<p><strong>Usage Examples:<\/strong> Rest parameters make it easy to work with variable-length arguments. For instance, function addAll(&#8230;nums) { \/* sum nums array *\/ } will take any number of numeric arguments and have them available in the nums array inside the function\u200b. You can then loop through nums to compute a sum, log values, etc. You can also combine fixed and rest parameters: e.g., function countMarbles(owner, &#8230;colors) { console.log(owner + &#8216; has &#8216; + colors.length + &#8216; marbles.&#8217;); } would take a name and any number of color strings\u200b, allowing calls like countMarbles(&#8216;Joe&#8217;, &#8216;blue&#8217;, &#8216;green&#8217;, &#8216;yellow&#8217;) and using the colors array of length 3 inside the function. Rest parameters replace the older arguments object approach and are preferable because they are true arrays (enabling array methods and clearer intent).<br><\/p>\n\n\n\n<p><strong>Spread Operator<\/strong><br><\/p>\n\n\n\n<p><strong>Concept:<\/strong> The spread operator (&#8230;) looks like the rest syntax but is used in other contexts to \u201cspread\u201d an array or object into individual elements. It is essentially the opposite of rest parameters\u200b. For example, if you have an array fruits = [&#8216;banana&#8217;, &#8216;apple&#8217;, &#8216;peach&#8217;], using console.log(&#8230;fruits) will log each array element separately (as if they were separate arguments) instead of logging the whole array as one item\u200b. In general, &#8230;array expands an array into a comma-separated list of its elements.<br><\/p>\n\n\n\n<p><strong>Arrays \u2013 Merging\/Copying:<\/strong> Spread is often used to easily combine arrays or clone them. For instance, const arr3 = [&#8230;arr1, &#8230;arr2]; will create a new array by concatenating arr1 and arr2 (without nesting)\u200b. If you push an array without spread (e.g., foods.push(fruits)), you\u2019d get an array <strong>of<\/strong> arrays; using foods.push(&#8230;fruits) adds each fruit individually to the container array\u200b. You can also make a shallow copy of an array with const clone = [&#8230;originalArray].<br><\/p>\n\n\n\n<p><strong>Objects \u2013 Merging\/Copying:<\/strong> Similarly, the spread operator works for objects (ES2018+). You can spread an object\u2019s properties into a new object: const cloneObj = {&#8230;originalObj} makes a shallow copy of originalObj. You can merge objects by spreading multiple objects into one: e.g., const combined = {&#8230;objA, &#8230;objB}, where properties from objB will overwrite those in objA if they share keys. This is much cleaner than using Object.assign.<br><\/p>\n\n\n\n<p><strong>Function Calls:<\/strong> Another common use of spread is to pass array elements as arguments to a function. For example, if Math.max expects separate number arguments but you have an array nums, you can call Math.max(&#8230;nums) to spread the array into individual arguments. This will effectively call Math.max with each element of nums as an argument.<br><\/p>\n\n\n\n<p><strong>Array Destructuring<\/strong><br><\/p>\n\n\n\n<p><strong>Assigning Elements to Variables:<\/strong> Array destructuring lets you unpack values from arrays into distinct variables in a single statement. The syntax uses square brackets on the left side of an assignment. For example: const fruit = [&#8216;apple&#8217;, &#8216;banana&#8217;, &#8216;cherry&#8217;]; const [a, b, c] = fruit; will assign a = &#8216;apple&#8217;, b = &#8216;banana&#8217;, and c = &#8216;cherry&#8217;\u200b. This provides a convenient way to extract array elements without needing to access them by index individually.<br><\/p>\n\n\n\n<p><strong>Practical Examples:<\/strong> Destructuring is especially useful when a function returns an array. It allows you to immediately assign meaningful names to those return values. For instance, if randPresident() returns an array like [&#8216;Thomas&#8217;, &#8216;Jefferson&#8217;] (first name and last name), you can capture its results with: const [firstName, lastName] = randPresident();\u200b. Then firstName and lastName are directly available. You can also skip over unwanted elements by leaving gaps (e.g., const [first,,third] = [1,2,3]; ignores the second element) or use rest in destructuring (e.g., const [head, &#8230;tail] = [1,2,3,4]; assigns head=1 and tail=[2,3,4]). Destructuring makes code involving array data more readable and succinct.<br><strong><br><\/strong> <strong>\u00a0<\/strong><br><strong>Template Literals<\/strong><br><strong>String Interpolation:<\/strong> Template literals are string literals enclosed in back-tick ` characters, which allow embedded expressions. They provide a cleaner syntax for string interpolation and concatenation. Instead of using + to concatenate values into a string, you can write placeholders ${&#8230;} inside a template literal\u200b. For example: const name = &#8216;Sam&#8217;; const msg = `Hello, ${name}!`; will produce &#8220;Hello, Sam!&#8221; without needing any + operators\u200b. This makes the code easier to read and write, especially when inserting multiple variables or expressions into a string.<br><\/p>\n\n\n\n<p><strong>Multi-line Strings:<\/strong> Template literals also support multi-line strings natively. Any line breaks or whitespace within the back-tick quotes are preserved in the resulting string\u200b.<br>For instance:<br>const haiku = `${name} is ${trait}<br>I ${verb} with ${name} often<br>How ${adj} I am`;<br>creates a string that spans three lines, as written in the code, without needing \\n characters\u200b. This is useful for formatting text or writing HTML templates directly in your JS. If you want to break a long template literal across multiple lines in your source code <em>without<\/em> inserting a new line into the actual string, you can end the line with a backslash \\ to escape the newline\u200b.<br><strong><br><\/strong> <strong>\u00a0<\/strong><br><strong>Objects, Context, and the this Keyword<\/strong><br><\/p>\n\n\n\n<p><strong>Objects in JavaScript:<\/strong> In JS, an <strong>object<\/strong> is a collection of properties (key-value pairs) and methods (functions associated with the object). Almost everything in JavaScript that\u2019s not a primitive (string, number, boolean, etc.) is an object or can behave like one\u200b. Arrays are objects, functions are objects, DOM elements are objects, and so on. For example, an Array has a length property and methods like push() or find()\u200b, and a Date object has methods like getFullYear()\u200b.<br><\/p>\n\n\n\n<p><strong>Creating Objects:<\/strong> You can create your own objects in two primary ways:<br><\/p>\n\n\n\n<p><strong>Constructor functions<\/strong> \u2013 Define a function and use new to instantiate objects from it.<br>For example:<br>function Building(name, location) {<br>\u00a0 this.name = name;<br>\u00a0 this.location = location;<br>\u00a0 this.logLocation = function() {<br>\u00a0\u00a0\u00a0 console.log(&#8220;Location: &#8221; + this.location);<br>\u00a0 }<br>}<br>const whiteHouse = new Building(&#8216;White House&#8217;, &#8216;1600 Pennsylvania Ave.&#8217;);<br>Here Building is a constructor, and whiteHouse is an object with properties name, location, and method logLocation\u200b. By convention, constructor function names start with a capital letter.<br><\/p>\n\n\n\n<p><strong>Object literal<\/strong> \u2013 Define the object in-place with { &#8230; } syntax. For example:<br>const whiteHouse = {<br>\u00a0 name: &#8216;White House&#8217;,<br>\u00a0 location: &#8216;1600 Pennsylvania Ave.&#8217;,<br>\u00a0 logLocation: function() {<br>\u00a0\u00a0\u00a0 console.log(&#8220;Location: &#8221; + this.location);<br>\u00a0 }<br>};<br>This creates the same object without a separate constructor\u200b. Use constructors when you need to create many similar objects; use literals for one-off or configuration objects.<br><\/p>\n\n\n\n<p><strong>Context and this:<\/strong> In JavaScript, this is a special keyword that refers to the \u201cowner\u201d of the currently executing code, i.e. the object context. Inside an object\u2019s method, this refers to that object instance\u200b. For example, in whiteHouse.logLocation(), inside the function logLocation, this will point to whiteHouse, so this.location is &#8220;1600 Pennsylvania Ave.&#8221;. In the <strong>global context<\/strong> (outside of any object or function), this refers to the global object (e.g., window in browsers)\u200b. The value of this is determined by how a function is called: calling obj.method() sets this = obj inside the method, whereas a regular function call (not attached to an object) has this as global (or undefined in strict mode). Keep in mind that arrow functions don\u2019t have their own this \u2013 they inherit this from the surrounding scope, which can be helpful to avoid losing context in callbacks. Understanding the this context is key when working with object-oriented patterns in JS.<br><\/p>\n\n\n\n<p><strong>Array Methods<\/strong><br><\/p>\n\n\n\n<p><strong>map()<\/strong> \u2013 The <strong>map<\/strong> method creates a new array by transforming each element of an original array via a callback function\u200b. You provide a function that defines the transformation, and map applies it to each element in order. For example, [1, 2, 3].map(x => x * 2) returns a new array [2, 4, 6] (doubling each element). The original array is not modified\u200b. Use map() when you want to derive a new array from an existing one by applying a uniform operation to every element (such as converting types, computing derived values, etc.).<br><\/p>\n\n\n\n<p><strong>filter()<\/strong> \u2013 The <strong>filter<\/strong> method produces a new array containing only those elements of the source array that pass a given test (the callback returns a truthy value for them)\u200b. You supply a testing function, and filter iterates through the array, keeping elements that make the function return true\u200b. For example, const evens = [1,2,3,4].filter(n => n % 2 === 0) will result in evens = [2, 4]. The original array is unchanged. Use filter() to extract a subset of elements that meet certain criteria (such as all items with a price below X, or all even numbers, etc.).<br><\/p>\n\n\n\n<p><strong>find()<\/strong> \u2013 The <strong>find<\/strong> method searches an array for an element that satisfies a given condition and returns the <strong>first<\/strong> matching element\u200b. You provide a callback that tests each element; find goes through the array until it finds one for which the callback returns true, and immediately returns that element. If no element matches, it returns undefined\u200b. For example, given an array of objects people, you might use let adult = people.find(person => person.age >= 18) to get the first person in the list who is 18 or older. Unlike filter, which returns <em>all<\/em> matching elements, find gives you only the first match and stops searching. This is useful when you just need one element (e.g., find an item by ID). The original array is not altered.<br><\/p>\n\n\n\n<p><strong>JavaScript Modules<\/strong><br><\/p>\n\n\n\n<p><strong>Overview:<\/strong> Modules are a way to split JavaScript code into separate files, each with its own scope, and load them as needed. In modern JS (ES6 Modules), each file can <strong>export<\/strong> certain variables or functions, and other files can <strong>import<\/strong> them. This helps organize code into logical components. JavaScript frameworks like React and Vue use modules to break applications into reusable pieces (components)\u200b. To use modules in the browser, include your main script with &lt;script type=&#8221;module&#8221; src=&#8221;main.js&#8221;>&lt;\/script> in HTML, which enables the module system\u200b.<br><\/p>\n\n\n\n<p><strong>Import\/Export Syntax:<\/strong> In a module file, you mark values to be shared using export. There are two kinds of exports:<br><\/p>\n\n\n\n<p><strong>Named exports:<\/strong> You can export multiple values by name. For example, in math.js you might write export function add(x,y){return x+y} or export constants like export const PI = 3.14. Another way is to define functions\/variables and then export them at the bottom: export { add, PI };\u200b. To import named exports, you use curly braces to specify the names: e.g., import { add, PI } from &#8216;.\/math.js&#8217;; (the names must match those exported)\u200b.<br><\/p>\n\n\n\n<p><strong>Default export:<\/strong> A module can designate one default export (using the syntax export default). This is typically the main thing the module provides (for example, a default function or class)\u200b. You might see export default function create(){&#8230;} in a file. When importing a default export, you <strong>do not<\/strong> use braces and can name it whatever you like: e.g., import create from &#8216;.\/modules\/list.js&#8217;;\u200b. Each module can have at most one default export. (You can also mix default and named exports in the same module if needed.)<br><\/p>\n\n\n\n<p><strong>Using Modules in Development:<\/strong> The module system is now the standard for structuring larger applications. In web pages, remember to use type=&#8221;module&#8221; in your script tag so that imports\/exports work\u200b. Modules are loaded relative to the file, so you often use import paths like import { foo } from &#8216;.\/utils\/helper.js&#8217;; (note the .\/). In Node.js, you can use ES6 modules by enabling it (e.g., using .mjs extension or package.json settings) or you might encounter the older CommonJS module system (require\/module.exports). Most build tools and bundlers (Webpack, etc.) also understand ES modules, allowing you to split code into files during development and bundle it for production. Overall, modules help in <strong>encapsulation<\/strong> and reusability of code in modern JavaScript development.<br><\/p>\n\n\n\n<p><strong>npm (Node Package Manager)<\/strong><br><strong>What is npm:<\/strong> <strong>npm<\/strong> is the default package manager for Node.js. It is installed automatically with Node.js\u200b. npm\u2019s role is to simplify the installation, updating, and removal of external libraries (packages) so developers can easily reuse code shared by others. The npm ecosystem is huge \u2013 thousands of packages are available on the npm registry (the public repository at <strong>npmjs.com<\/strong>) for everything from web frameworks to utility libraries\u200b.<br><\/p>\n\n\n\n<p><strong>Installing Packages:<\/strong> To add a library to your project, use the command line. Run npm install &lt;package-name> in your project folder, and npm will download that package (and its dependencies) into a local <strong>node_modules<\/strong> directory\u200b. It will also update your <strong>package.json<\/strong> (a manifest file for your project\u2019s dependencies) to include the package. For example, running npm install randomstring will fetch the \u201crandomstring\u201d package. After installing, you can use require(&#8216;randomstring&#8217;) (CommonJS) or import randomstring from &#8216;randomstring&#8217;; to include it in your code\u200b.<br><\/p>\n\n\n\n<p><strong>Managing Dependencies:<\/strong> The <strong>package.json<\/strong> file in your project keeps track of all installed dependencies and their allowed versions. This makes it easy to share your project \u2013 others can run npm install to install all the required packages at once. npm provides commands to manage packages: you can remove a dependency with npm uninstall &lt;package>, upgrade them with npm update, or install specific versions. npm also has a tool called <strong>npx<\/strong> (shipped with npm) which can execute binaries from your local packages or from the registry without installing them globally. In short, npm streamlines working with third-party code, so you don\u2019t have to reinvent the wheel for common functionalities\u200b.<br>\u00a0<br>\u00a0<br><strong>Node.js and npm Resources<\/strong><br><\/p>\n\n\n\n<p><strong>Node.js Overview<\/strong>: <a href=\"https:\/\/www.webucator.com\/article\/nodejs-and-node-package-manager-npm\/\">https:\/\/www.webucator.com\/article\/nodejs-and-node-package-manager-npm\/<\/a><br>Instructions on checking Node.js installation and installing npm.<br><\/p>\n\n\n\n<p><strong>npm Registry<\/strong>: <a href=\"https:\/\/www.npmjs.com\">https:\/\/www.npmjs.com<\/a><br>Search and browse available Node.js packages.<br><\/p>\n\n\n\n<p><strong>nvm for macOS\/Linux<\/strong>: <a href=\"https:\/\/github.com\/nvm-sh\/nvm\">https:\/\/github.com\/nvm-sh\/nvm<\/a><br>\u00a0Node Version Manager (nvm) for managing multiple Node.js versions.<br><\/p>\n\n\n\n<p><strong>nvm-windows<\/strong>: <a href=\"https:\/\/github.com\/coreybutler\/nvm-windows\">https:\/\/github.com\/coreybutler\/nvm-windows<\/a><br>Windows version of Node Version Manager.<br><\/p>\n\n\n\n<p><strong>randomstring npm package<\/strong>: <a href=\"https:\/\/www.npmjs.com\/package\/randomstring\">https:\/\/www.npmjs.com\/package\/randomstring<\/a><br>\u00a0Documentation for generating random strings using npm.<br><\/p>\n\n\n\n<p><strong>JavaScript Modules<\/strong><br><strong>ES6 Modules Guide<\/strong>: <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Guide\/Modules\">https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Guide\/Modules<\/a><br>Explanation of JavaScript module syntax, named exports, and default exports.<br><\/p>\n\n\n\n<p><strong>Visual Studio Code Settings for Local Server<\/strong>:<br>Open VS Code and go to File > Preferences > Settings (Windows) or Code > Settings > Settings (Mac).<br>Search for &#8220;Open in Default Browser&#8221; and enable &#8220;Open with local http server&#8221;.<br><\/p>\n\n\n\n<p><strong>JavaScript Functions and Methods<\/strong><br><strong>Arrow Functions in JavaScript<\/strong>: <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Functions\/Arrow_functions\">https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Functions\/Arrow_functions<\/a><br>\u00a0<br>Explanation of arrow function syntax and differences from traditional functions.<br><strong>JavaScript Rest Parameters<\/strong>: <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Functions\/rest_parameters\">https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Functions\/rest_parameters<\/a><br>\u00a0<br>How to use rest parameters to accept multiple arguments in functions.<br><strong>JavaScript Spread Operator<\/strong>: <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Operators\/Spread_syntax\">https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Operators\/Spread_syntax<\/a><br>\u00a0<br>Usage of the spread operator (<code>...<\/code>) for arrays and objects.<br><strong>JavaScript Objects and Arrays<\/strong><br><strong>JavaScript Object Basics<\/strong>: <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Learn\/JavaScript\/Objects\/Basics\">https:\/\/developer.mozilla.org\/en-US\/docs\/Learn\/JavaScript\/Objects\/Basics<\/a><br>\u00a0<br>Understanding JavaScript objects, properties, and methods.<br><strong>Understanding this in JavaScript<\/strong>: <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Operators\/this\">https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Operators\/this<\/a><br>\u00a0<br>Explanation of the <code>this<\/code> keyword and its different contexts.<br><strong>JavaScript Array Methods<\/strong>:<br><strong>map() Method<\/strong>: <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Array\/map\">https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Array\/map<\/a><br>\u00a0<br><strong>filter() Method<\/strong>: https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Array\/filter<br>\u00a0<br><strong>find() Method<\/strong>: <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Array\/find\">https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Array\/find<\/a><br>Guides on using <code>map()<\/code>, <code>filter()<\/code>, and <code>find()<\/code> to manipulate arrays.<br>\u00a0<br><strong>JavaScript Strings and Template Literals<\/strong><br><strong>Template Literals<\/strong>: <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Template_literals\">https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Template_literals<\/a><br>\u00a0Explanation of backtick (<code>) strings with embedded expressions (<\/code>${}`) and multi-line strings.<br>\u00a0<\/p>\n\n\n\n<div style=\"height:98px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-group has-white-color has-black-background-color has-text-color has-background has-small-font-size\" style=\"min-height:40vh;margin-top:0;margin-bottom:0;padding-top:var(--wp--preset--spacing--60);padding-right:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--60);padding-left:var(--wp--preset--spacing--50)\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-container-core-group-is-layout-ec5833f3 wp-block-group-is-layout-constrained\"><div style=\"margin-bottom:6px;\" class=\"aligncenter wp-block-site-logo\"><a href=\"https:\/\/bobtimetech.net\/\" class=\"custom-logo-link\" rel=\"home\"><img decoding=\"async\" width=\"490\" height=\"491\" src=\"https:\/\/bobtimetech.net\/wp-content\/uploads\/2024\/10\/cropped-One_Angel.png\" class=\"custom-logo\" alt=\"image of the Angel of Death standing victorious, symbolizing triumph and peace.\" srcset=\"https:\/\/bobtimetech.net\/wp-content\/uploads\/2024\/10\/cropped-One_Angel.png 312w, https:\/\/bobtimetech.net\/wp-content\/uploads\/2024\/10\/cropped-One_Angel-300x300.png 300w, https:\/\/bobtimetech.net\/wp-content\/uploads\/2024\/10\/cropped-One_Angel-150x150.png 150w\" sizes=\"(max-width: 490px) 100vw, 490px\" data-attachment-id=\"4027\" data-permalink=\"https:\/\/bobtimetech.net\/one_angel\/cropped-one_angel-png\/\" data-orig-file=\"https:\/\/bobtimetech.net\/wp-content\/uploads\/2024\/10\/cropped-One_Angel.png\" data-orig-size=\"312,313\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"cropped-One_Angel.png\" data-image-description=\"&lt;p&gt;BobTimeTech.net Logo. image of the Angel of Death standing victorious, symbolizing triumph and peace.&lt;\/p&gt;\n\" data-image-caption=\"\" data-large-file=\"https:\/\/bobtimetech.net\/wp-content\/uploads\/2024\/10\/cropped-One_Angel.png\" \/><\/a><\/div>\n\n\n<div class=\"wp-block-group has-background\" style=\"background-color:#fd0101\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<p class=\"has-text-align-center has-white-color has-text-color has-link-color has-medium-font-size wp-elements-414061d41995b64af1b226e1d9236355\">Proudly powered by <a href=\"https:\/\/wordpress.org\" target=\"_blank\" rel=\"noopener\" title=\"\">WordPress<\/a><\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group has-header-gradient-background-color has-background\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<ul class=\"wp-block-social-links aligncenter has-large-icon-size is-style-logos-only is-nowrap is-layout-flex wp-container-core-social-links-is-layout-65900438 wp-block-social-links-is-layout-flex\"><li class=\"wp-social-link wp-social-link-linkedin  wp-block-social-link\"><a href=\"https:\/\/www.linkedin.com\/in\/robert-t-hogan-619806a4\" class=\"wp-block-social-link-anchor\"><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" version=\"1.1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M19.7,3H4.3C3.582,3,3,3.582,3,4.3v15.4C3,20.418,3.582,21,4.3,21h15.4c0.718,0,1.3-0.582,1.3-1.3V4.3 C21,3.582,20.418,3,19.7,3z M8.339,18.338H5.667v-8.59h2.672V18.338z M7.004,8.574c-0.857,0-1.549-0.694-1.549-1.548 c0-0.855,0.691-1.548,1.549-1.548c0.854,0,1.547,0.694,1.547,1.548C8.551,7.881,7.858,8.574,7.004,8.574z M18.339,18.338h-2.669 v-4.177c0-0.996-0.017-2.278-1.387-2.278c-1.389,0-1.601,1.086-1.601,2.206v4.249h-2.667v-8.59h2.559v1.174h0.037 c0.356-0.675,1.227-1.387,2.526-1.387c2.703,0,3.203,1.779,3.203,4.092V18.338z\"><\/path><\/svg><span class=\"wp-block-social-link-label screen-reader-text\">LinkedIn<\/span><\/a><\/li>\n\n<li class=\"wp-social-link wp-social-link-youtube  wp-block-social-link\"><a href=\"https:\/\/www.youtube.com\/channel\/UCuIiXVv392sbxvaUEnJVNaA\" class=\"wp-block-social-link-anchor\"><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" version=\"1.1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M21.8,8.001c0,0-0.195-1.378-0.795-1.985c-0.76-0.797-1.613-0.801-2.004-0.847c-2.799-0.202-6.997-0.202-6.997-0.202 h-0.009c0,0-4.198,0-6.997,0.202C4.608,5.216,3.756,5.22,2.995,6.016C2.395,6.623,2.2,8.001,2.2,8.001S2,9.62,2,11.238v1.517 c0,1.618,0.2,3.237,0.2,3.237s0.195,1.378,0.795,1.985c0.761,0.797,1.76,0.771,2.205,0.855c1.6,0.153,6.8,0.201,6.8,0.201 s4.203-0.006,7.001-0.209c0.391-0.047,1.243-0.051,2.004-0.847c0.6-0.607,0.795-1.985,0.795-1.985s0.2-1.618,0.2-3.237v-1.517 C22,9.62,21.8,8.001,21.8,8.001z M9.935,14.594l-0.001-5.62l5.404,2.82L9.935,14.594z\"><\/path><\/svg><span class=\"wp-block-social-link-label screen-reader-text\">YouTube<\/span><\/a><\/li>\n\n<li class=\"wp-social-link wp-social-link-mail  wp-block-social-link\"><a href=\"mailto:&#098;o&#098;&#116;&#105;me&#116;ec&#104;&#064;&#103;&#109;ail.&#099;o&#109;\" class=\"wp-block-social-link-anchor\"><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" version=\"1.1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M19,5H5c-1.1,0-2,.9-2,2v10c0,1.1.9,2,2,2h14c1.1,0,2-.9,2-2V7c0-1.1-.9-2-2-2zm.5,12c0,.3-.2.5-.5.5H5c-.3,0-.5-.2-.5-.5V9.8l7.5,5.6,7.5-5.6V17zm0-9.1L12,13.6,4.5,7.9V7c0-.3.2-.5.5-.5h14c.3,0,.5.2.5.5v.9z\"><\/path><\/svg><span class=\"wp-block-social-link-label screen-reader-text\">Mail<\/span><\/a><\/li><\/ul>\n<\/div><\/div>\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>The Devil is in the details. JavaScript (JS) The JavaScript programming language was first developed in 1995 by Brendan Eich during his tenure as an engineer at Netscape. Originally intended to be called LiveScript, it underwent a name change before its release. Unlike many other programming languages, JavaScript (JS) does [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":8,"menu_order":4,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_themeisle_gutenberg_block_has_review":false,"jetpack_post_was_ever_published":false,"footnotes":""},"class_list":["post-1603","page","type-page","status-publish","hentry"],"aioseo_notices":[],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/bobtimetech.net\/index.php\/wp-json\/wp\/v2\/pages\/1603","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bobtimetech.net\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bobtimetech.net\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/bobtimetech.net\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bobtimetech.net\/index.php\/wp-json\/wp\/v2\/comments?post=1603"}],"version-history":[{"count":2,"href":"https:\/\/bobtimetech.net\/index.php\/wp-json\/wp\/v2\/pages\/1603\/revisions"}],"predecessor-version":[{"id":4124,"href":"https:\/\/bobtimetech.net\/index.php\/wp-json\/wp\/v2\/pages\/1603\/revisions\/4124"}],"up":[{"embeddable":true,"href":"https:\/\/bobtimetech.net\/index.php\/wp-json\/wp\/v2\/pages\/8"}],"wp:attachment":[{"href":"https:\/\/bobtimetech.net\/index.php\/wp-json\/wp\/v2\/media?parent=1603"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}