JavaScript Tutorial

This JavaScript tutorial is crafted for beginners to introduce them to the basics and advanced concepts of JavaScript. By the end of this guide, you'll reach a proficiency level that sets the stage for further growth. Aimed at empowering you to progress towards becoming a world-class software developer, this tutorial paves the way for a successful career in web development and beyond.

Nested Destructuring
Nested Destructuring
The Nested Destructuring in JavaScript allows us to extract data from nested objects and arrays. An object (or array) can contain another object (or array) inside itself, known as a nested object (or array). Unpacking the nested objects or arrays is called nested destructuring. We can extract all or some data from the objects or arrays using destructuring.
We can assign the extracted data from nested array or object to the variables. This is referred as nested destructuring assignment. When using nested destructuring to get some values from a nested array or object, you have to follow the structure of the array or object.
Nested Object Destructuring
This section will demonstrate nested object destructuring in JavaScript.
Syntax
The syntax of nested object destruction in JavaScript is as follows
const {prop1, prop2: {nestedprop1, nestedprop2}} = obj;
In the above syntax, prop1 is a property of the object, and the prop2 property contains the nested object, having nestedprop1 and nestedprop2 properties.
Example
In the example below, the car object contains the brand, model, and info properties. The info property contains the nested object containing the price and color properties.
We have destructured the nested object and printed the values of the variables in the output.
<html>
<body>
   <p id = "output"> </p>
   <script>
      const car = {
         brand: "Hyundai",
         model: "Verna",
         info: {
            price: 1200000, // Nested properties
            color: "white",
         }
      }
      const { brand, model, info: { price, color } } = car; // Destructuring
      document.getElementById("output").innerHTML = 
	   `Brand: ${brand} <br> Model: ${model} <br> Price: ${price} <br> Color: ${color}`;
   </script>
</body>
</html>
Output
Brand: Hyundai
Model: Verna
Price: 1200000
Color: white
Example: Nested object destructuring and renaming variables
The below code demonstrates that you can rename the variables while unpacking the nested object properties.
We have renamed the brand, model, price, and color variables to company, name, cost, and carColor.
<html>
<body>
<p id = "output"> </p>
<script>
﻿
   const car = {
      brand: "Hyundai",
      model: "Verna",
      info: {
         price: 1200000, // Nested properties
         color: "white",
      }
   }
   // Destructuring
   const {brand: company, model: name, info: {price: cost, color: carColor }} = car;
﻿
   document.getElementById("output").innerHTML = 
   `Company: ${company}, Name: ${name}, Cost: ${cost}, Color: ${carColor}`;
</script>
</body>
</html>
Output
Company: Hyundai, Name: Verna, Cost: 1200000, Color: white
Example: Nested object destructuring and default values
You can use the assignment operator to assign the default values to the variables. Whenever particular property of the object is undefined, it initializes the variable with the default value.
Here, we have renamed each variable and assigned default values. The 'science' property is not defined in the grades (nested object) object. So, the code prints its default value in the output.
<html>
<body>
   <p id = "output"> </p>
   <script>
      const student = {
         firstName: "Sam",
         lastName: "Raina",
         grades: {
            English: 75,
         }
      };
    
      const { firstName: name = "Jay", 
         lastName: surname = "Shah", 
         grades: { English: eng = 0, Science: sci = 0 } 
      } = student;
      
      document.getElementById("output").innerHTML = 
      `Name: ${name} <br> Surname: ${surname} <br> English: ${eng} <br> Science: ${sci}`;
   </script>
</body>
</html>
Output
Name: Sam
Surname: Raina
English: 75
Science: 0
Example: Nested object destructuring and rest operator
The rest operator allows you to collect the remaining properties into a single object.
In the below code, the grades object contains 4 different properties. We have stored the value of the Maths property in the Maths variables and other properties in the 'allGrades' variable using the rest operator. The 'allGrades' is an object containing 3 properties.
<html>
<body>
   <p id = "output"> </p>
   <script>
      const student = {
         firstName: "Kunal",
         lastName: "Karma",
         grades: {
            English: 75,
            Maths: 87,
            SocialScience: 90,
            Science: 80,
         }
      };
      const { firstName, lastName, grades: { Maths, ...allGrades } } = student;
      document.getElementById("output").innerHTML = 
		`firstName: ${firstName} <br>
		 lastName: ${lastName} <br>
		 Maths: ${Maths} <br>
		 allGrades: ${JSON.stringify(allGrades)} <br>
		 `;
   </script>
</body>
</html>
Output
firstName: Kunal
lastName: Karma
Maths: 87
allGrades: {"English":75,"SocialScience":90,"Science":80}
Nested Array Destructuring
This section will demonstrate nested array destructuring in JavaScript.
Syntax
The syntax to unpack nested array elements (nested array destructuring) in JavaScript is as follows
const [a, [b, c], d] = arr;
In the above syntax, we store the nested array elements in the b and c variables.
Example
In the below code, the arr array contains the nested array. We unpack the nested array elements into the variables b and c. In the output, you can observe the values of the b and c variables.
<html>
<body>
   <p id = "output"> </p>
   <script>
      const arr = [10, [15, 20], 30];
      const [a, [b, c], d] = arr;
      document.getElementById("output").innerHTML = 
      "a = " + a + ", b = " + b + ", c = " + c + ", d = " + d; 
   </script>
</body>
</html>
Output
a = 10, b = 15, c = 20, d = 30
Example: Skipping elements of the nested array
Assignment destructuring allows you to skip the elements of the nested array. Here, the arr array contains two nested arrays. We skip the first element of each nested array while destructuring the nested array.
<html>
<body>
   <p id = "output"> </p>
   <script>
      const arr = [2, [3, 4], [9, 10]];
      const [a, [, b], [, c]] = arr;
      document.getElementById("output").innerHTML = 
      "a = " + a + ", b = " + b + ", c = " + c; 
   </script>
</body>
</html>
Output
a = 2, b = 4, c = 10
Example: Nested array destructuring and default values
You can assign default values to the variables like objects while destructuring the nested arrays.
Here, the first nested array of arr [3, 4] contains two elements. While destructuring, we skipped the first two elements and used the variable p to get the third element, but the nested array contains only two elements. So, the value of the variable p is a 29 default value.
<html>
<body>
   <p id = "output"> </p>
   <script>
      const arr = [2, [3, 4], [9, 10]];
      const [, [, , p = 29], [, q]] = arr;
      document.getElementById("output").innerHTML =
      "p = " + p + ", q = " + q; 
   </script>
</body>
</html>
Output
p = 29, q = 10
Example: Nested array destructuring and rest operator
You can use the rest operator with nested array destructuring. Here, variable b stores the remaining elements of the first nested array, and variable c stores the remaining elements of the parent array, which includes the second nested array and last array element.
<html>
<body>
   <p id = "output"> </p>
   <script>
      const arr = [[6, 7, 8, 9], [10, 11, 12, 13], 14];
      const [[a, ...b], ...c] = arr
      document.getElementById("output").innerHTML = 
      "a = " + a + "<br> b = " + b + "<br> c = " + c; 
   </script>
</body>
</html>
Output
a = 6
b = 7,8,9
c = 10,11,12,13,14
Array Within Object – Nested Destructuring
Sometimes, we need to destructure the object containing the array. Let's understand it via the example below.
Example
In the example below, the num2 property of the numbers object contains the array. We destructure the object properties and print the values in the output.
<html>
<body>
   <p id = "output"> </p>
   <script>
      const numbers = {
         num1: 10,
         num2: [40, 6, 5],
      }
      const {num1, num2: [a, b, c]} = numbers;
      document.getElementById("output").innerHTML = 
      "num1 = " + num1 + ", a = " + a + ", b = " + b + ", c = " + c; 
   </script>
</body>
</html>
Output
num1 = 10, a = 40, b = 6, c = 5
Object Within Array – Nested Destructuring
In some cases, an array can also contain the object, and you need to destructure the object from the array.
Example
In the below code, the numbers array contains the object containing the p and q properties.
After that, we destructure the array and unpack the object properties.
<html>
<body>
   <p id = "output"> </p>
   <script>
      const numbers = [10, { p: 20, q: 30 }]
      const [a, { p, q }] = numbers;
      document.getElementById("output").innerHTML = 
      "a = " + a + ", p = " + p + ", q = " + q; 
   </script>
</body>
</html>
Output
a = 10, p = 20, q = 30
﻿
﻿
﻿

Javascript Basics

JavaScript Operators

JavaScript Control Flow

JavaScript Functions

JavaScript Objects

Object Oriented JavaScript

JavaScript Versions

JavaScript Cookies

JavaScript Browser BOM

JavaScript Web APIs

JavaScript Events

JavaScript Tutorial

Nested Destructuring

Nested Destructuring

Nested Object Destructuring

Syntax

Example

Output

Example: Nested object destructuring and renaming variables

Output

Example: Nested object destructuring and default values

Output

Example: Nested object destructuring and rest operator

Output

Nested Array Destructuring

Syntax

Example

Output

Example: Skipping elements of the nested array

Output

Example: Nested array destructuring and default values

Output

Example: Nested array destructuring and rest operator

Output

Array Within Object – Nested Destructuring

Example

Output

Object Within Array – Nested Destructuring

Example

Output