JavaScript/C4/Object-and-Array-Destructuring-in-JS/English

From Script | Spoken-Tutorial
Revision as of 11:02, 21 June 2021 by Nancyvarkey (Talk | contribs)

Jump to: navigation, search

Title of the script: Object and Array Destructuring

Author: Jayesh Katta Ramalingaiah

Domain Reviewer: Vigneshwer Dhinakaran

Novice Reviewer: Praveeen S.

Keywords: JavaScript, HTML, abject, array, shorthands, spread, template literals

Visual Cue
Narration
Slide: Title Hello and welcome to the spoken tutorial on “Object and Array Destructuring in JS”.
Slide:

Learning Objectives

In this tutorial, we will learn about:
  • Spread Operator
  • Template Literals
  • Objects and
  • Array Destructuring
Slide: System Specifications This tutorial is recorded using:
  • Ubuntu Linux OS version 18.04
  • Visual Studio Code version 1.45.0 (code editor)
  • Firefox web browser

However, you may use any other browser of your choice.

Slide: Pre-requisites To practice this tutorial,
  • You should be familiar with writing and executing JS files.
  • If not, please go through the prerequisite tutorials on this website.
Slide: Code files
  • The files used in this tutorial are available in the Code files link on this tutorial page.
  • Pls download and extract the files.
  • Make a copy and then use them for practising.
Slide: Destructuring
  • Destructuring is an assignment syntax in JavaScript
  • It makes it possible to unpack values defined in Object or Array.
Only Narration Now, let us take an example and understand Array and Object Destructuring better.
Show VS editor Open Visual Studio Code editor
[Editor] Welcome Page -> Open Folder -> Practice-JS -> index.html & main.js


Then open the files index.html and main.js as explained in the earlier tutorials.


For this demonstration, I have already opened the same.


These files are available in the Code files link for practice.

[Editor] Type:


<!DOCTYPE html>

<html lang="en">

<head>

<title>Object and Array Destructuring & Short Hands</title>

</head>

<body>

<script src="main.js"></script>

</body>

</html>

In the index.html file, replace the code as shown.



Press: Ctrl + S


Press: Alt + L and Alt + O

Save the file and start the Live server.
[Firefox] Press Ctrl + Shift + I


Point to the browser developer tools


Click on the Console tab

In the web browser, open the Browser developer tools panel and go to the Console tab.
Switch to Editor Switch back to the editor.
[Editor] Type:


const arr = ["Jayesh", 20];

const [name, age] = arr;


console.log(name);

console.log(age);

In the main.js file, replace the code as shown.
[Editor] Highlight:

const arr = ["Jayesh", 20];

Here, I have created an array with the variable name arr.


The array has two values - Jayesh and 20.

[Editor] Highlight:


const [name, age] = arr;

Instead of assigning the array index separately for the variables name and age.


We can pass the array with the variable name on the left-hand side.


And assign the array variable on the right-hand side.

[Editor] Highlight:


console.log(name);

console.log(age);

To verify this, I’m logging the name and age variables on the console.
Press: Ctrl + S Save the file.
Switch to Browser Switch back to the browser.
[Browser] [Console Tab]:

Highlight:


Jayesh

20

The output verifies that the array values are assigned to the name and age variables.


This is called destructuring of arrays in JS.

Only narration Next, let's learn how to destructure an object.
Switch to Editor Switch back to the editor.
[Editor] Type:


const obj = { name: "Jayesh", age: 20 };

const { name, age } = obj;


console.log(name);

console.log(age);

In the main.js file, replace the code as shown.
[Editor] Highlight:


const obj = { name: "Jayesh", age: 20 };

Here, I have declared an object with the variable name obj.


This object has 2 properties- name and age.

[Editor] Highlight:


const { name, age } = obj;

This is similar to the array example which we have seen before.


We assign the object property values to the name and age variables.


Then we pass an object expression on the left-hand side.


And assign the object variable on the right-hand side.

[Editor] Highlight:


console.log(name);

console.log(age);

To verify this, I’m logging name and age variables separately on the console.
Press: Ctrl + S Save the file.
Switch to Browser Switch back to the browser.
[Browser] [Console Tab]:

Highlight:


Jayesh

20

The output verifies that the object is destructured.



Only Narration Here, we have 2 properties.

And we have passed 2 variable names in both of our array and object examples.


Now, let’s think of a scenario where we have 3 properties.


We need to assign the first property to the name variable.


And the rest of the properties to the details variable.


To achieve this, we have a concept called the spread operator.

Slide: Object Destructing For Objects, the variable name should be the same as the object property name.


Otherwise, the variable name will be assigned to undefined.

Slide: Spread Operator The syntax of Spread Operator is very simple.


(…) three dots followed by the variable name.

Only Narration Now, let us take an example and understand this better.
Switch to Editor Switch back to the editor.
[Editor] Type:


const obj = {

name: "Jayesh",

age: 20,

location: "Bangalore",

};

const { name, ...details } = obj;


console.log(name);

console.log(details);

In the main.js file, replace the code as shown.
[Editor] Highlight:


const obj = {

name: "Jayesh",

age: 20,

location: "Bangalore",

};

Here, I have declared an object with 3 properties as per our discussed scenario.
[Editor] Highlight:


const { name, ...details } = obj;

To assign the name property value in the object to the name variable, I’m declaring the name here.
[Editor] Highlight:

...details

And, to store the rest of the two properties in the details variable, I’m using a spread operator.


As discussed, the usage of the spread operator is very simple.


It is... (three dots) followed by the details variable name.

[Editor] Highlight:


console.log(name);

console.log(details);

To verify, I’m logging both the variables separately.
Press: Ctrl + S Save the file.
Switch to Browser Switch back to the browser.
[Browser] [Console Tab]:

Highlight:


Jayesh

Here is the verification for the newly created name variable.


The value in the name property of the object is assigned as Jayesh.

[Browser] [Console Tab]:

Highlight:


Object { age: 20, location: "Bangalore" }

And the rest of the properties in objects are assigned to details.
Only Narration Next, let’s learn about Template literals which is a better way to concatenate strings.
Slide: Template Literals
  • Template literals are written using open and closed backticks.
  • Here is an example.
  • Variables values can be displayed using ${} (the dollar symbol and curly braces) in a string.
Only Narration Now, let us take an example and understand this better.
Switch to Editor Switch back to the editor.
[Editor] Type:


function display({ name, location: city }) {

console.log(`${name} lives in ${city}`);

}


display({ name: "Jayesh", location: "Bangalore" });

In the main.js file, replace the code as shown.
[Editor] Highlight:


function display({ name, location: city }) {

console.log(`${name} lives in ${city}`);

}

Here, I have declared a function named display, which accepts an object as a parameter.
[Editor] Highlight:


{name, location: city }

The passed object should have the name and location as the properties.
[Editor] Highlight:


location: city

Here, I have a requirement to access the location property as city variable.


I assign city to location as a variable name, to access inside the function.


So, in order to achieve that, I can cast the variable using : colon

[Editor] Highlight:


console.log(`${name} lives in ${city}`);

To verify this, I have logged a string that accepts name and city variables.
[Editor] Highlight:


`${name} lives in ${city}`

As mentioned, I’m writing my string using backtick here to concatenate variables and strings.


And the variable names are wrapped up with $ dollar symbol and curly braces{}.

[Editor] Highlight:


${city}

Here, I’m not using location anymore, as the location is cast as city.
[Editor] Highlight:


display({ name: "Jayesh", location: "Bangalore" });

Here, I have made a function call by passing an object having a name and location as parameters.
Press: Ctrl + S

Switch to browser

Save the file and Switch back to the browser.
[Browser] [Console Tab]:

Highlight:


Jayesh lives in Bangalore

The console output verifies that the string has concatenated properly using Template literals.


The location property is also cast as a city and hence displayed here.

Only Narration With this, we have come to the end of this tutorial.


Let’s summarize.

Slide: Summary In this tutorial, we have learnt:
  • Spread Operator
  • Template Literals
  • Object and
  • Array Destructuring
Slide: Assignment As an assignment:
  • Open the file assignment.js which you have created earlier.
  • Clear the existing code.
  • Declare variable marks
  • Assign an array to variable marks containing 88, 90 and 92
  • Destruct the array and assign the values to m1, m2 and m3 respectively
  • And log the values of m1, m2 and m3
  • Open the file MyPage.html in a web browser
  • Observe the output in the browser’s console
Slide: About Spoken Tutorial Project
  • The video at the following link summarises the Spoken Tutorial project.
  • Please download and watch it.
Slide: Spoken tutorial workshops
  • We conduct workshops using spoken tutorials and give certificates.
  • For more details, please write to us.
Slide: Forum questions Pls post your timed queries in this forum.
Slide: Acknowledgement Spoken Tutorial Project is funded by the Ministry of Education (MoE), Government of India.
Slide: Thanks The script for this tutorial is contributed by Jayesh and this is Praveen signing off. Thank you for joining

Contributors and Content Editors

Kr.jayesh, Nancyvarkey, Pravin1389

Retrieved from "https://script.spoken-tutorial.org/index.php?title=JavaScript/C4/Object-and-Array-Destructuring-in-JS/English&oldid=55259"