The Complete Guide to Becoming a Web Developer: Part 2
Tags: webdev, javascript, tutorial, programming
Published: 2023-06-24 16:58:21

<!-- wp:paragraph -->
<p>Welcome to Part 2 of "The Complete Guide to Becoming a Web Developer." In this part, we dive into one of the most critical components of web development: JavaScript. This powerful scripting language brings interactivity to your web pages and forms the backbone of modern web applications.</p>
<!-- /wp:paragraph -->


<!-- wp:paragraph -->
<p>In "JavaScript 101: Basics and Modern JS Syntax," we'll explore foundational concepts such as variables, data types, and <a href="https://nerdleveltech.com/javascript-functions-why-theyre-essential-to-understand-easy-guide-part2/" target="_blank" rel="noreferrer noopener nofollow">functions</a>, as well as modern ES6 features.</p>
<!-- /wp:paragraph -->

<!-- wp:spacer -->
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:rank-math/toc-block {"headings":[{"key":"efb73cd7-6807-46c4-8031-84151514b5a1","content":"Basics of JS Syntax","level":2,"link":"#basics-of-js-syntax","disable":false,"isUpdated":false,"isGeneratedLink":true},{"key":"078deda1-5d4c-4f98-b991-25114e04f4ba","content":"What is JavaScript?","level":3,"link":"#what-is-java-script","disable":false,"isUpdated":false,"isGeneratedLink":true},{"key":"7fc9b8ed-a7b9-4014-b738-7f99db912fe9","content":"Getting Started with JavaScript","level":3,"link":"#getting-started-with-java-script","disable":false,"isUpdated":false,"isGeneratedLink":true},{"key":"505131ec-64f6-46c9-8830-d696df6bb098","content":"Variables","level":3,"link":"#variables","disable":false,"isUpdated":false,"isGeneratedLink":true},{"key":"f285fa0d-d82e-43ed-b77f-413175922268","content":"var","level":4,"link":"#var","disable":false,"isUpdated":false,"isGeneratedLink":true},{"key":"c2ccef1f-fb03-4911-a734-45f6aca6e97e","content":"let","level":4,"link":"#let","disable":false,"isUpdated":false,"isGeneratedLink":true},{"key":"a6bb83d7-bc76-4d7a-9a6b-14ef31cc8a94","content":"","level":4,"link":"#","disable":false,"isUpdated":false,"isGeneratedLink":true},{"key":"3eaa0264-a168-4f69-9f59-ca93988f0187","content":"Constants","level":3,"link":"#constants","disable":false,"isUpdated":false,"isGeneratedLink":true},{"key":"6b9a243b-41cc-4896-9c88-035beeb2a5eb","content":"const","level":4,"link":"#const","disable":false,"isUpdated":false,"isGeneratedLink":true},{"key":"1583c293-e696-4223-99cc-f5d9a2858b22","content":"Data Types and Structures","level":2,"link":"#data-types-and-structures","disable":false,"isUpdated":false,"isGeneratedLink":true},{"key":"d1bd0ce1-da87-4f58-bc24-21abe6db6d75","content":"Data Types in JavaScript","level":3,"link":"#data-types-in-java-script","disable":false,"isUpdated":false,"isGeneratedLink":true},{"key":"d0595803-b53d-4293-b823-e1c711aff776","content":"Number","level":4,"link":"#number","disable":false,"isUpdated":false,"isGeneratedLink":true},{"key":"0c654be2-5767-4fb1-90cb-6f7708ad62b6","content":"String","level":4,"link":"#string","disable":false,"isUpdated":false,"isGeneratedLink":true},{"key":"8432ccbb-511c-4203-aad7-e64f6098c26f","content":"Boolean","level":4,"link":"#boolean","disable":false,"isUpdated":false,"isGeneratedLink":true},{"key":"ef6d3290-ce25-4922-8ef4-0ec342062219","content":"Null and Undefined","level":4,"link":"#null-and-undefined","disable":false,"isUpdated":false,"isGeneratedLink":true},{"key":"d46c2fc8-9bee-494d-aaa7-c687c1799786","content":"Data Structures: Objects and Arrays","level":3,"link":"#data-structures-objects-and-arrays","disable":false,"isUpdated":false,"isGeneratedLink":true},{"key":"3b148d67-52b4-4047-8fb3-1974729d0518","content":"Objects","level":4,"link":"#objects","disable":false,"isUpdated":false,"isGeneratedLink":true},{"key":"385f3820-e51a-45b6-875f-a54c27b5f81b","content":"Destructuring Objects","level":5,"link":"#destructuring-objects","disable":false,"isUpdated":false,"isGeneratedLink":true},{"key":"ef28493c-d6cb-45fd-91f8-7dc545e04651","content":"Arrays","level":4,"link":"#arrays","disable":false,"isUpdated":false,"isGeneratedLink":true},{"key":"5cde1f51-c084-4c2e-84d7-1d6466642c49","content":"Manipulating an Array","level":5,"link":"#manipulating-an-array","disable":false,"isUpdated":false,"isGeneratedLink":true},{"key":"54227f09-3096-4d44-9dc1-dc6a0cb2452e","content":"The Spread Operator and Rest Parameters","level":5,"link":"#the-spread-operator-and-rest-parameters","disable":false,"isUpdated":false,"isGeneratedLink":true},{"key":"2feeca1a-5954-4b0b-90d9-8641e194fafb","content":"Functions","level":2,"link":"#functions","disable":false,"isUpdated":false,"isGeneratedLink":true},{"key":"e79c774f-e1e1-431b-b426-c863b41fc1a9","content":"Function Parameters and Arguments","level":3,"link":"#function-parameters-and-arguments","disable":false,"isUpdated":false,"isGeneratedLink":true},{"key":"c35389cb-fa58-4996-8cc3-151111baf7f7","content":"Return Values","level":4,"link":"#return-values","disable":false,"isUpdated":false,"isGeneratedLink":true},{"key":"5b581d7f-67b1-4c42-9079-20187518850a","content":"Types of Functions in JavaScript","level":3,"link":"#types-of-functions-in-java-script","disable":false,"isUpdated":false,"isGeneratedLink":true},{"key":"9f7f981f-da01-4cd2-8555-2197f7576c48","content":"Function Declarations","level":4,"link":"#function-declarations","disable":false,"isUpdated":false,"isGeneratedLink":true},{"key":"19697a5c-c6e2-4589-96c4-4ec87cc872cc","content":"Function Expressions","level":4,"link":"#function-expressions","disable":false,"isUpdated":false,"isGeneratedLink":true},{"key":"0b504874-f7fe-4710-a800-bff5e0924bdd","content":"Arrow Functions","level":4,"link":"#arrow-functions","disable":false,"isUpdated":false,"isGeneratedLink":true},{"key":"dabfe5d2-30c0-4746-ab30-cde072eb1237","content":"Object Methods","level":4,"link":"#object-methods","disable":false,"isUpdated":false,"isGeneratedLink":true},{"key":"fd98a003-f23a-4dea-a4db-d8978370174d","content":"The \u0022this\u0022 Keyword","level":3,"link":"#the-this-keyword","disable":false,"isUpdated":false,"isGeneratedLink":true},{"key":"4426bdb2-a751-4566-a0df-3f64f6f1560f","content":"ECMAScript","level":2,"link":"#ecma-script","disable":false,"isUpdated":false,"isGeneratedLink":true},{"key":"11097aec-23fe-471b-8037-f86ea99c7b69","content":"Promises and Async/Await","level":3,"link":"#promises-and-async-await","disable":false,"isUpdated":false,"isGeneratedLink":true},{"key":"1ac0f12a-ca08-427f-a124-df481ac6bc82","content":"Conclusion:","level":2,"link":"#conclusion","disable":false,"isUpdated":false,"isGeneratedLink":true}],"listStyle":"ul"} -->
<div class="wp-block-rank-math-toc-block" id="rank-math-toc"><nav><ul><li class=""><a href="#basics-of-js-syntax">Basics of JS Syntax</a><ul><li class=""><a href="#what-is-java-script">What is JavaScript?</a></li><li class=""><a href="#getting-started-with-java-script">Getting Started with JavaScript</a></li><li class=""><a href="#variables">Variables</a><ul><li class=""><a href="#var">var</a></li><li class=""><a href="#let">let</a></li></ul></li><li class=""><a href="#constants">Constants</a><ul><li class=""><a href="#const">const</a></li></ul></li></ul></li><li class=""><a href="#data-types-and-structures">Data Types and Structures</a><ul><li class=""><a href="#data-types-in-java-script">Data Types in JavaScript</a><ul><li class=""><a href="#number">Number</a></li><li class=""><a href="#string">String</a></li><li class=""><a href="#boolean">Boolean</a></li><li class=""><a href="#null-and-undefined">Null and Undefined</a></li></ul></li><li class=""><a href="#data-structures-objects-and-arrays">Data Structures: Objects and Arrays</a><ul><li class=""><a href="#objects">Objects</a><ul><li class=""><a href="#destructuring-objects">Destructuring Objects</a></li></ul></li><li class=""><a href="#arrays">Arrays</a><ul><li class=""><a href="#manipulating-an-array">Manipulating an Array</a></li><li class=""><a href="#the-spread-operator-and-rest-parameters">The Spread Operator and Rest Parameters</a></li></ul></li></ul></li></ul></li><li class=""><a href="#functions">Functions</a><ul><li class=""><a href="#function-parameters-and-arguments">Function Parameters and Arguments</a><ul><li class=""><a href="#return-values">Return Values</a></li></ul></li><li class=""><a href="#types-of-functions-in-java-script">Types of Functions in JavaScript</a><ul><li class=""><a href="#function-declarations">Function Declarations</a></li><li class=""><a href="#function-expressions">Function Expressions</a></li><li class=""><a href="#arrow-functions">Arrow Functions</a></li><li class=""><a href="#object-methods">Object Methods</a></li></ul></li><li class=""><a href="#the-this-keyword">The "this" Keyword</a></li></ul></li><li class=""><a href="#ecma-script">ECMAScript</a><ul><li class=""><a href="#promises-and-async-await">Promises and Async/Await</a></li></ul></li><li class=""><a href="#conclusion">Conclusion:</a></li></ul></nav></div>
<!-- /wp:rank-math/toc-block -->

<!-- wp:spacer -->
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:heading -->
<h2 class="wp-block-heading" id="basics-of-js-syntax">Basics of JS Syntax</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Welcome to JavaScript, the backbone of modern web development! Let's get started by understanding its fundamentals and exploring the modern syntax it offers. Don't worry if you're a beginner or new to coding - we'll start from the very basics.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading" id="what-is-java-script">What is JavaScript?</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>JavaScript is a high-level, interpreted programming language that is a cornerstone of the web. It adds interactivity to your website and allows you to create rich web applications. If HTML is the skeleton of a website and CSS its clothes, JavaScript is the brains behind the operation, giving life to everything!</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading" id="getting-started-with-java-script">Getting Started with JavaScript</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>You don't need anything fancy to write JavaScript. You can start writing JavaScript right in your web browser's developer console. To open it, right-click on any webpage, select 'Inspect', and then click on 'Console'. Try typing the following line:</p>
<!-- /wp:paragraph -->


<!-- wp:prismatic/blocks {"className":"prism-editor no-trans"} -->
<pre class="wp-block-prismatic-blocks prism-editor no-trans"><code class="language-">console.log("Hello, World!");
</code></pre>
<!-- /wp:prismatic/blocks -->


<!-- wp:paragraph -->
<p>Congratulations! You've written your first line of JavaScript.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading" id="variables">Variables</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Variables in JavaScript are containers for data. They can hold numbers, text (strings), and even complex data structures like objects and arrays. Here's how you create a variable:</p>
<!-- /wp:paragraph -->

<!-- wp:prismatic/blocks {"className":"prism-editor no-trans"} -->
<pre class="wp-block-prismatic-blocks prism-editor no-trans"><code class="language-">let greeting = "Hello, World!";
</code></pre>
<!-- /wp:prismatic/blocks -->

<!-- wp:paragraph -->
<p>Here, <code>greeting</code> is a variable that holds the string "Hello, World!". You can use <code>var</code> instead of <code>let</code> to declare a variable, but <code>let</code> is preferred in modern JavaScript because it has block-scope.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>In JavaScript, you declare a variable with one of three keywords: <code>var</code>, <code>let</code>, or <code>const</code>. These three keywords handle scope differently and have different rules for use.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":4} -->
<h4 class="wp-block-heading" id="var">var</h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p><code>var</code> is the oldest way to declare variables. It is function-scoped, meaning a variable declared inside a function with <code>var</code> is only available within that function. However, <code>var</code> doesn't have block scope. This means if a variable is declared inside a block, like an <code>if</code> statement or a <code>for</code> loop, it's actually available outside of that block.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Here's an example:</p>
<!-- /wp:paragraph -->

<!-- wp:prismatic/blocks {"className":"prism-editor no-trans"} -->
<pre class="wp-block-prismatic-blocks prism-editor no-trans"><code class="language-">function sayHello() {
  var greeting = "Hello, World!";
  console.log(greeting);  // outputs: Hello, World!
}

sayHello();
console.log(greeting);  // ReferenceError: greeting is not defined
</code></pre>
<!-- /wp:prismatic/blocks -->

<!-- wp:paragraph -->
<p>Here, <code>greeting</code> is only available inside the <code>sayHello</code> function.</p>
<!-- /wp:paragraph -->

<!-- wp:prismatic/blocks {"className":"prism-editor no-trans"} -->
<pre class="wp-block-prismatic-blocks prism-editor no-trans"><code class="language-">if (true) {
  var name = "Alice";
}

console.log(name);  // outputs: Alice
</code></pre>
<!-- /wp:prismatic/blocks -->

<!-- wp:paragraph -->
<p>Even though <code>name</code> is declared inside the <code>if</code> block, it's available outside the block because <code>var</code> doesn't have block scope.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":4} -->
<h4 class="wp-block-heading" id="let">let</h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p><code>let</code> is a newer way to declare variables, introduced in ES6 (also known as ES2015). Unlike <code>var</code>, <code>let</code> is block-scoped. This means a variable declared with <code>let</code> is only available within the block where it's declared.</p>
<!-- /wp:paragraph -->

<!-- wp:prismatic/blocks {"className":"prism-editor no-trans"} -->
<pre class="wp-block-prismatic-blocks prism-editor no-trans"><code class="language-">if (true) {
  let name = "Alice";
}

console.log(name);  // ReferenceError: name is not defined
</code></pre>
<!-- /wp:prismatic/blocks -->

<!-- wp:paragraph -->
<p>Here, <code>name</code> is not available outside the <code>if</code> block because <code>let</code> has block scope.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":4} -->
<h4 class="wp-block-heading"></h4>
<!-- /wp:heading -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading" id="constants">Constants</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>If you have a value that won't change throughout your program, you can declare it as a constant:</p>
<!-- /wp:paragraph -->

<!-- wp:prismatic/blocks {"className":"prism-editor no-trans"} -->
<pre class="wp-block-prismatic-blocks prism-editor no-trans"><code class="language-">const pi = 3.14159;
</code></pre>
<!-- /wp:prismatic/blocks -->

<!-- wp:heading {"level":4} -->
<h4 class="wp-block-heading" id="const">const</h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p><code>const</code> is another way to declare variables, also introduced in ES6. <code>const</code> is block-scoped like <code>let</code>, but it has an extra rule: you can't reassign a <code>const</code> variable. Once you assign a value to a <code>const</code> variable, you can't change that value.</p>
<!-- /wp:paragraph -->

<!-- wp:prismatic/blocks {"className":"prism-editor no-trans"} -->
<pre class="wp-block-prismatic-blocks prism-editor no-trans"><code class="language-">const pi = 3.14159;
pi = 3.14;  // TypeError: Assignment to constant variable.
</code></pre>
<!-- /wp:prismatic/blocks -->

<!-- wp:paragraph -->
<p>In this example, <code>secondsInMinute</code> and <code>minutesInHour</code> are constants. Because we've used <code>const</code> for these variables, we can be sure that their values will never change elsewhere in the code.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>However, it's important to note that <code>const</code> in JavaScript isn't quite the same as constants in some other languages. In JavaScript, <code>const</code> only means that the variable itself cannot be reassigned. If the variable is an object or array, the contents of the object or array can still be changed:</p>
<!-- /wp:paragraph -->

<!-- wp:prismatic/blocks {"className":"prism-editor no-trans"} -->
<pre class="wp-block-prismatic-blocks prism-editor no-trans"><code class="language-">const person = {
  name: "Alice",
  age: 25
};

person.age = 26;  // This is fine
person = { name: "Bob", age: 30 };  // TypeError: Assignment to constant variable.
</code></pre>
<!-- /wp:prismatic/blocks -->

<!-- wp:paragraph -->
<p>In this example, changing the <code>age</code> property of the <code>person</code> object is allowed, even though <code>person</code> is a <code>const</code>. However, trying to assign a new object to <code>person</code> results in an error.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>You're saying "I have a constant identifier <code>person</code> which points to an object in memory." This is what you can't change: <code>person</code> will always point to that particular object. You cannot make <code>person</code> point to a different object or a different type of data.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>But <code>const</code> doesn't make the actual object itself immutable. The object <code>person</code> refers to is still fully modifiable: you can change its properties, add new properties, delete properties, etc.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Declaring a constant can help make your code easier to understand because you know that wherever that constant is used, it always represents the same value. You can use it in such as:</p>
<!-- /wp:paragraph -->

<!-- wp:prismatic/blocks {"className":"prism-editor no-trans"} -->
<pre class="wp-block-prismatic-blocks prism-editor no-trans"><code class="language-">const secondsInMinute = 60;
const minutesInHour = 60;
const secondsInHour = secondsInMinute * minutesInHour;
</code></pre>
<!-- /wp:prismatic/blocks -->

<!-- wp:spacer -->
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:heading -->
<h2 class="wp-block-heading" id="data-types-and-structures">Data Types and Structures</h2>
<!-- /wp:heading -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading" id="data-types-in-java-script">Data Types in JavaScript</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>In JavaScript, we primarily deal with a few key data types: <code>Number</code>, <code>String</code>, <code>Boolean</code>, <code>Object</code>, <code>Null</code>, and <code>Undefined</code>.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":4} -->
<h4 class="wp-block-heading" id="number">Number</h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>The <code>Number</code> type is used for any numeric type, whether it's an integer or a floating-point number.</p>
<!-- /wp:paragraph -->

<!-- wp:prismatic/blocks {"className":"prism-editor no-trans"} -->
<pre class="wp-block-prismatic-blocks prism-editor no-trans"><code class="language-">let integer = 10;
let floatingPoint = 3.14159;
</code></pre>
<!-- /wp:prismatic/blocks -->

<!-- wp:heading {"level":4} -->
<h4 class="wp-block-heading" id="string">String</h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>A <code>String</code> is a sequence of characters used to represent text. You can declare strings using single quotes, double quotes, or backticks.</p>
<!-- /wp:paragraph -->

<!-- wp:prismatic/blocks {"className":"prism-editor no-trans"} -->
<pre class="wp-block-prismatic-blocks prism-editor no-trans"><code class="language-">let singleQuoted = 'Hello, World!';
let doubleQuoted = "Hello, World!";
let backticks = `Hello, World!`;
</code></pre>
<!-- /wp:prismatic/blocks -->

<!-- wp:heading {"level":4} -->
<h4 class="wp-block-heading" id="boolean">Boolean</h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>A <code>Boolean</code> can be one of two values: <code>true</code> or <code>false</code>. It's typically used for conditions and comparisons.</p>
<!-- /wp:paragraph -->

<!-- wp:prismatic/blocks {"className":"prism-editor no-trans"} -->
<pre class="wp-block-prismatic-blocks prism-editor no-trans"><code class="language-">let isHappy = true;
let isSad = false;
</code></pre>
<!-- /wp:prismatic/blocks -->

<!-- wp:heading {"level":4} -->
<h4 class="wp-block-heading" id="null-and-undefined">Null and Undefined</h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p><code>Null</code> and <code>Undefined</code> are two distinct types in JavaScript, each with a single value. <code>Null</code> is an assignment value that means no value or no object. It's intentionally nothing. <code>Undefined</code> means a variable has been declared but has not yet been assigned a value.</p>
<!-- /wp:paragraph -->

<!-- wp:prismatic/blocks {"className":"prism-editor no-trans"} -->
<pre class="wp-block-prismatic-blocks prism-editor no-trans"><code class="language-">let nothing = null;
let somethingUndefined;
console.log(somethingUndefined); // Outputs: undefined
</code></pre>
<!-- /wp:prismatic/blocks -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading" id="data-structures-objects-and-arrays">Data Structures: Objects and Arrays</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>JavaScript offers complex data structures like <code>Objects</code> and <code>Arrays</code>.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":4} -->
<h4 class="wp-block-heading" id="objects">Objects</h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Objects in JavaScript are collections of key-value pairs. They provide a way to group related data and functions together.</p>
<!-- /wp:paragraph -->

<!-- wp:prismatic/blocks {"className":"prism-editor no-trans"} -->
<pre class="wp-block-prismatic-blocks prism-editor no-trans"><code class="language-">let person = {
  name: "Alice",
  age: 25,
  greet: function() {
    console.log(`Hello, my name is ${this.name}`);
  }
};

person.greet(); // Outputs: Hello, my name is Alice
</code></pre>
<!-- /wp:prismatic/blocks -->

<!-- wp:paragraph -->
<p>You can access properties of an object using dot notation, as shown above, or bracket notation (<code>person['name']</code>).</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":5} -->
<h5 class="wp-block-heading" id="destructuring-objects">Destructuring Objects</h5>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Destructuring is a convenient way of extracting multiple values from data stored in objects and arrays.</p>
<!-- /wp:paragraph -->

<!-- wp:prismatic/blocks {"className":"prism-editor no-trans"} -->
<pre class="wp-block-prismatic-blocks prism-editor no-trans"><code class="language-">let person = {
  name: "Alice",
  age: 25
};

let { name, age } = person;

console.log(name); // Outputs: Alice
console.log(age); // Outputs: 25
</code></pre>
<!-- /wp:prismatic/blocks -->

<!-- wp:heading {"level":4} -->
<h4 class="wp-block-heading" id="arrays">Arrays</h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Arrays are used to store multiple values in a single variable. You can access elements of an array using their index (starting from 0).</p>
<!-- /wp:paragraph -->

<!-- wp:prismatic/blocks {"className":"prism-editor no-trans"} -->
<pre class="wp-block-prismatic-blocks prism-editor no-trans"><code class="language-">let colors = ['red', 'green', 'blue'];

console.log(colors[0]); // Outputs: red
</code></pre>
<!-- /wp:prismatic/blocks -->

<!-- wp:heading {"level":5} -->
<h5 class="wp-block-heading" id="manipulating-an-array">Manipulating an Array</h5>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>There are several built-in methods to manipulate arrays, such as <code>push</code> (add element to the end), <code>pop</code> (remove element from the end), <code>shift</code> (remove element from the beginning), <code>unshift</code> (add element to the beginning), and more.</p>
<!-- /wp:paragraph -->

<!-- wp:prismatic/blocks {"className":"prism-editor no-trans"} -->
<pre class="wp-block-prismatic-blocks prism-editor no-trans"><code class="language-">let colors = ['red', 'green', 'blue'];
colors.push('yellow');

console.log(colors); // Outputs: ['red', 'green', 'blue', 'yellow']
</code></pre>
<!-- /wp:prismatic/blocks -->

<!-- wp:heading {"level":5} -->
<h5 class="wp-block-heading" id="the-spread-operator-and-rest-parameters">The Spread Operator and Rest Parameters</h5>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>The spread operator (<code>...</code>) allows an iterable such as an array to be expanded in places where zero or more arguments (for function calls) or elements (for array literals) are expected.</p>
<!-- /wp:paragraph -->

<!-- wp:prismatic/blocks {"className":"prism-editor no-trans"} -->
<pre class="wp-block-prismatic-blocks prism-editor no-trans"><code class="language-">let colors1 = ['red', 'green', 'blue'];
let colors2 = [...colors1, 'yellow'];

console.log(colors2); // Outputs: ['red', 'green', 'blue', 'yellow']
</code></pre>
<!-- /wp:prismatic/blocks -->

<!-- wp:paragraph -->
<p>Similarly, rest parameters are used in function definitions, allowing you to represent an indefinite number of arguments as an array.</p>
<!-- /wp:paragraph -->

<!-- wp:prismatic/blocks {"className":"prism-editor no-trans"} -->
<pre class="wp-block-prismatic-blocks prism-editor no-trans"><code class="language-">function sum(...numbers) {
  return numbers.reduce((a, b) => a + b);
}

console.log(sum(1, 2, 3, 4, 5)); // Outputs: 15
</code></pre>
<!-- /wp:prismatic/blocks -->

<!-- wp:paragraph -->
<p>These are the fundamental building blocks of JavaScript.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>In the next section, we'll go over Functions, and further expand your JavaScript toolbox.</p>
<!-- /wp:paragraph -->

<!-- wp:spacer -->
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:heading -->
<h2 class="wp-block-heading" id="functions">Functions</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>In JavaScript, functions are blocks of code designed to perform a particular task. They are executed when they're invoked (called). A JavaScript function is defined with the <code>function</code> keyword, followed by a name, and a pair of parentheses <code>()</code>.</p>
<!-- /wp:paragraph -->

<!-- wp:prismatic/blocks {"className":"prism-editor no-trans"} -->
<pre class="wp-block-prismatic-blocks prism-editor no-trans"><code class="language-">function greet() {
  console.log("Hello, World!");
}

greet();  // Outputs: Hello, World!
</code></pre>
<!-- /wp:prismatic/blocks -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading" id="function-parameters-and-arguments">Function Parameters and Arguments</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Functions can take parameters, which are values you supply to the function so that the function can do something utilizing those values. These values are called arguments.</p>
<!-- /wp:paragraph -->

<!-- wp:prismatic/blocks {"className":"prism-editor no-trans"} -->
<pre class="wp-block-prismatic-blocks prism-editor no-trans"><code class="language-">function greet(name) {
  console.log(`Hello, ${name}!`);
}

greet("Alice");  // Outputs: Hello, Alice!
</code></pre>
<!-- /wp:prismatic/blocks -->

<!-- wp:heading {"level":4} -->
<h4 class="wp-block-heading" id="return-values">Return Values</h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Functions can also return values. This is a way for a function to output a result that can be used in your code.</p>
<!-- /wp:paragraph -->

<!-- wp:prismatic/blocks {"className":"prism-editor no-trans"} -->
<pre class="wp-block-prismatic-blocks prism-editor no-trans"><code class="language-">function add(a, b) {
  return a + b;
}

let sum = add(1, 2);
console.log(sum);  // Outputs: 3
</code></pre>
<!-- /wp:prismatic/blocks -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading" id="types-of-functions-in-java-script">Types of Functions in JavaScript</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>In JavaScript, we have different ways to declare a function: function declarations, function expressions, arrow functions, and methods within objects.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":4} -->
<h4 class="wp-block-heading" id="function-declarations">Function Declarations</h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Function declarations are the standard function in JavaScript. They're declared with the <code>function</code> keyword, followed by the name of the function.</p>
<!-- /wp:paragraph -->

<!-- wp:prismatic/blocks {"className":"prism-editor no-trans"} -->
<pre class="wp-block-prismatic-blocks prism-editor no-trans"><code class="language-">function greet() {
  console.log("Hello, World!");
}
</code></pre>
<!-- /wp:prismatic/blocks -->

<!-- wp:heading {"level":4} -->
<h4 class="wp-block-heading" id="function-expressions">Function Expressions</h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Function expressions are functions that are assigned to a variable. They can be named or anonymous.</p>
<!-- /wp:paragraph -->

<!-- wp:prismatic/blocks {"className":"prism-editor no-trans"} -->
<pre class="wp-block-prismatic-blocks prism-editor no-trans"><code class="language-">let greet = function() {
  console.log("Hello, World!");
}
</code></pre>
<!-- /wp:prismatic/blocks -->

<!-- wp:heading {"level":4} -->
<h4 class="wp-block-heading" id="arrow-functions">Arrow Functions</h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Arrow functions were introduced in ES6 as a more concise syntax for writing function expressions. They are especially useful for short, simple functions, and they work well with higher-order functions that take other functions as arguments.</p>
<!-- /wp:paragraph -->

<!-- wp:prismatic/blocks {"className":"prism-editor no-trans"} -->
<pre class="wp-block-prismatic-blocks prism-editor no-trans"><code class="language-">let greet = () => {
  console.log("Hello, World!");
}
</code></pre>
<!-- /wp:prismatic/blocks -->

<!-- wp:heading {"level":4} -->
<h4 class="wp-block-heading" id="object-methods">Object Methods</h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Functions that are part of JavaScript objects are called methods.</p>
<!-- /wp:paragraph -->

<!-- wp:prismatic/blocks {"className":"prism-editor no-trans"} -->
<pre class="wp-block-prismatic-blocks prism-editor no-trans"><code class="language-">let person = {
  name: "Alice",
  greet: function() {
    console.log(`Hello, my name is ${this.name}`);
  }
};

person.greet();  // Outputs: Hello, my name is Alice
</code></pre>
<!-- /wp:prismatic/blocks -->

<!-- wp:paragraph -->
<p>Here, the <code>greet</code> method uses the <code>this</code> keyword to refer to the <code>person</code> object. In this case, <code>this</code> allows the <code>greet</code> method to access other properties of the <code>person</code> object.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading" id="the-this-keyword">The "this" Keyword</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>The JavaScript <code>this</code> keyword is used in methods to refer to the object that the method belongs to. The value of <code>this</code> depends on how a function is called. It's a complex topic, but here are the basics.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>In a method, <code>this</code> refers to the owner object:</p>
<!-- /wp:paragraph -->

<!-- wp:prismatic/blocks {"className":"prism-editor no-trans"} -->
<pre class="wp-block-prismatic-blocks prism-editor no-trans"><code class="language-">let person = {
  name: "Alice",
  greet: function() {
    console.log(`Hello, my name is ${this.name}`);
  }
};

person.greet();  // Outputs: Hello, my name is Alice
</code></pre>
<!-- /wp:prismatic/blocks -->

<!-- wp:paragraph -->
<p>In a regular function (not a method or arrow function), <code>this</code> refers to the global object (<code>window</code> in a browser, <code>global</code> in Node.js):</p>
<!-- /wp:paragraph -->

<!-- wp:prismatic/blocks {"className":"prism-editor no-trans"} -->
<pre class="wp-block-prismatic-blocks prism-editor no-trans"><code class="language-">function greet() {
  console.log(this);  // Outputs: the global object
}

greet();
</code></pre>
<!-- /wp:prismatic/blocks -->

<!-- wp:paragraph -->
<p>In an event handler, <code>this</code> refers to the element that received the event:</p>
<!-- /wp:paragraph -->

<!-- wp:prismatic/blocks {"className":"prism-editor no-trans"} -->
<pre class="wp-block-prismatic-blocks prism-editor no-trans"><code class="language-">button.addEventListener('click', function() {
  console.log(this);  // Outputs: the element that was clicked
});
</code></pre>
<!-- /wp:prismatic/blocks -->

<!-- wp:paragraph -->
<p>It's worth noting that arrow functions don't have their own <code>this</code>. In arrow functions, <code>this</code> refers to the <code>this</code> of the enclosing lexical context.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>P.S.</strong> Functions and  <code>this</code> keyword are crucial steps in your JavaScript journey.</p>
<!-- /wp:paragraph -->

<!-- wp:spacer -->
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:heading -->
<h2 class="wp-block-heading" id="ecma-script">ECMAScript</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>We discussed the Let and Const, Arrow Functions, Template Literals, Rest Parameters, and Spread Operator. Please go over the above topics to get more insights or if you want more details you better give this article <a href="https://nerdleveltech.com/ecmascript-es6-a-comprehensive-guide-to-modern-javascript/" target="_blank" rel="noreferrer noopener nofollow">(ECMAScript ES6+: A Comprehensive Guide to Modern JavaScript)</a> a read.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Meanwhile, let's touch on the promises and the Async/Await next.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading" id="promises-and-async-await">Promises and Async/Await</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Promises and async/await make dealing with asynchronous code more manageable. A Promise is an object representing the eventual completion or failure of an asynchronous operation. The async/await syntax provides a more readable and cleaner way to work with promises. </p>
<!-- /wp:paragraph -->

<!-- wp:prismatic/blocks {"className":"prism-editor no-trans"} -->
<pre class="wp-block-prismatic-blocks prism-editor no-trans"><code class="language-">async function fetchUser() {
  try {
    let response = await fetch('https://api.github.com/users/octocat');
    let data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error:', error);
  }
}

fetchUser();
</code></pre>
<!-- /wp:prismatic/blocks -->

<!-- wp:paragraph -->
<p>These are just some of the features introduced in ES6 and beyond. Each of these features makes JavaScript more powerful and easier to use, and understanding them is key to mastering modern JavaScript.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>P.S.</strong> When you're ready to read more about Promises and Async / Await and get more insights with great details, you can head to this article: <a href="https://nerdleveltech.com/understand-the-asynchronous-javascript-callbacks-promises-and-async-await/" target="_blank" rel="noreferrer noopener nofollow">Understand the Asynchronous JavaScript: Callbacks, Promises, and Async/Await</a></p>
<!-- /wp:paragraph -->

<!-- wp:spacer -->
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:heading -->
<h2 class="wp-block-heading" id="conclusion">Conclusion:</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>We've reached the end of "JavaScript 101: Basics and Modern JS Syntax", a significant milestone on our journey to mastering web development. In this segment, we've thoroughly explored the fundamental aspects of JavaScript, and we've familiarized ourselves with modern JS syntax. We now have a good understanding of variables, data types, functions, and ES6 features, all of which are essential tools in a developer's toolbox.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>However, the journey doesn't end here. As we continue to dive deeper into JavaScript, we'll unlock even more of its potential to create engaging, interactive web experiences.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Next up, we're going to bring life to static web pages and bridge the gap between front-end and back-end. In our upcoming articles, "Interacting with the DOM" and "Asynchronous JavaScript, AJAX, JSON, and APIs: A Practical Guide," we'll explore how JavaScript interacts with the web page's Document Object Model (DOM), making the page dynamic and interactive.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>We'll also dive into asynchronous JavaScript, where we'll learn to deal with operations that take time to complete without blocking the rest of our code. We'll explore AJAX (Asynchronous JavaScript And XML), learn how to work with JSON data and understand how APIs work.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Get ready to level up your JavaScript skills and bring your web development knowledge to new heights. Stay tuned!</p>
<!-- /wp:paragraph -->