Difference between revisions of "JavaScript/C4/Object-and-Array-Destructuring-in-JS/English"

From Script | Spoken-Tutorial
Jump to: navigation, search
(Created page with "Title of the script: Object and Array Destructuring Author: Jayesh Katta Ramalingaiah Domain Reviewer: Novice Reviewer: Keywords: JavaScript, HTML, abject, array, shorth...")
 
Line 8: Line 8:
  
 
Keywords: JavaScript, HTML, abject, array, shorthands, spread, template literals
 
Keywords: JavaScript, HTML, abject, array, shorthands, spread, template literals
−
 
−
 
  
 
{| border = “1”
 
{| border = “1”
Line 24: Line 22:
 
Learning Objectives
 
Learning Objectives
 
|| In this tutorial, we will learn about:
 
|| In this tutorial, we will learn about:
−
 
−
 
 
* '''Spread Operator'''
 
* '''Spread Operator'''
 
* '''Template Literals'''
 
* '''Template Literals'''
 
* '''Objects and'''
 
* '''Objects and'''
 
* '''Array Destructuring'''
 
* '''Array Destructuring'''
−
 
−
 
  
 
|-
 
|-
 
|| Slide: System Specifications
 
|| Slide: System Specifications
 
|| This tutorial is recorded using:
 
|| This tutorial is recorded using:
−
 
−
 
 
* '''Ubuntu Linux''' OS version 18.04
 
* '''Ubuntu Linux''' OS version 18.04
 
* '''Visual Studio Code''' version 1.45.0 ('''code editor''')
 
* '''Visual Studio Code''' version 1.45.0 ('''code editor''')
Line 47: Line 39:
 
|| Slide: Pre-requisites
 
|| Slide: Pre-requisites
 
|| To practice this tutorial,
 
|| To practice this tutorial,
−
 
+
* You should be familiar with writing and executing''' JS''' files.
−
 
+
−
* You should be familiar with writing and executing''' JS''' files'''.'''
+
 
* If not, please go through the prerequisite tutorials on this website.
 
* If not, please go through the prerequisite tutorials on this website.
−
 
−
 
  
 
|-
 
|-
Line 60: Line 48:
 
* Pls download and extract the files.
 
* Pls download and extract the files.
 
* Make a copy and then use them for practising.
 
* Make a copy and then use them for practising.
−
 
−
 
  
 
|-
 
|-
 
|| Slide: Destructuring
 
|| Slide: Destructuring
 
||  
 
||  
−
* '''Destructuring '''is''' '''an''' assignment syntax '''in '''JavaScript'''
+
* '''Destructuring '''is an''' assignment syntax '''in '''JavaScript'''
 
* It makes it possible to unpack values defined in '''Object '''or '''Array'''.
 
* It makes it possible to unpack values defined in '''Object '''or '''Array'''.
−
 
−
 
  
 
|-
 
|-
Line 123: Line 107:
  
 
Press: Alt + L and Alt + O  
 
Press: Alt + L and Alt + O  
−
|| Save the file and Start the '''Live server'''.
+
|| Save the file and start the '''Live server'''.
  
 
|-
 
|-
Line 129: Line 113:
  
  
−
Point to the browser '''developer tools'''
+
Point to the '''browser developer tools'''
  
  
 
Click on the '''Console''' tab
 
Click on the '''Console''' tab
−
|| In the web browser, open the '''Browser developer tools''' panel and go to the '''console tab'''.
+
|| In the '''web browser''', open the '''Browser developer tools''' panel and go to the '''Console tab'''.
  
 
|-
 
|-
Line 317: Line 301:
  
  
−
It's just ('''…) '''three dots followed by the '''variable '''name.
+
('''…) '''three dots followed by the '''variable '''name.
  
 
|-
 
|-
Line 429: Line 413:
 
||  
 
||  
 
* '''Template literals''' are written using open and closed '''backticks'''.
 
* '''Template literals''' are written using open and closed '''backticks'''.
−
* For eg:''' ` '''some string '''`'''
+
* Here is an example.
 
* '''Variables '''values can be displayed using''' ${} ('''the '''dollar''' symbol and curly braces''')''' in a '''string'''.
 
* '''Variables '''values can be displayed using''' ${} ('''the '''dollar''' symbol and curly braces''')''' in a '''string'''.
−
 
−
 
  
 
|-
 
|-
Line 479: Line 461:
  
 
location: city
 
location: city
−
|| Here, If I have a requirement to access the '''location property '''as a '''city variable.'''
+
|| Here, I have a requirement to access the '''location property '''as '''city variable.'''
  
  
Line 502: Line 484:
  
  
−
And the '''variable '''names are wrapped up with '''${} (dollar''' symbol and''' '''curly braces''').'''
+
And the '''variable '''names are wrapped up with '''$ dollar''' symbol and curly braces'''{}.'''
  
 
|-
 
|-
Line 509: Line 491:
  
 
${city}
 
${city}
−
|| Here, I’m not using '''location '''anymore, as the '''location''' is cast as a '''city.'''
+
|| Here, I’m not using '''location '''anymore, as the '''location''' is cast as '''city.'''
  
 
|-
 
|-
Line 523: Line 505:
  
 
|-
 
|-
−
|| Switch to '''Browser'''
+
|| Switch to '''browser'''
 
|| Switch back to the '''browser.'''
 
|| Switch back to the '''browser.'''
  
Line 548: Line 530:
 
|| Slide''': '''Summary''' '''
 
|| Slide''': '''Summary''' '''
 
|| In this tutorial, we have learnt:
 
|| In this tutorial, we have learnt:
−
 
−
 
 
* '''Spread Operator'''
 
* '''Spread Operator'''
 
* '''Template Literals'''
 
* '''Template Literals'''
 
* '''Object '''and
 
* '''Object '''and
 
* '''Array Destructuring'''
 
* '''Array Destructuring'''
−
 
−
 
  
 
|-
 
|-
 
|| Slide: Assignment
 
|| Slide: Assignment
 
|| As an assignment:
 
|| As an assignment:
−
 
−
 
 
* Open the file '''assignment.js''' which you have created earlier.
 
* Open the file '''assignment.js''' which you have created earlier.
 
* Clear the existing code.
 
* Clear the existing code.
−
* '''Declare''' '''variable marks'''
+
* '''Declare variable marks'''
 
* Assign an '''array '''to''' variable marks '''containing''' 88, 90''' and '''92'''
 
* Assign an '''array '''to''' variable marks '''containing''' 88, 90''' and '''92'''
 
* '''Destruct''' the '''array '''and assign the values to '''m1''', '''m2 '''and''' m3''' respectively
 
* '''Destruct''' the '''array '''and assign the values to '''m1''', '''m2 '''and''' m3''' respectively
Line 570: Line 546:
 
* Open the file '''MyPage.html''' in a '''web browser'''
 
* Open the file '''MyPage.html''' in a '''web browser'''
 
* Observe the output in the '''browser’s console'''
 
* Observe the output in the '''browser’s console'''
−
 
−
 
  
 
|-
 
|-
Line 577: Line 551:
 
||  
 
||  
 
* The video at the following link summarises the Spoken Tutorial project.
 
* The video at the following link summarises the Spoken Tutorial project.
−
* Please download and watch it
+
* Please download and watch it.
−
 
+
−
 
+
  
 
|-
 
|-
Line 586: Line 558:
 
* We conduct workshops using spoken tutorials and give certificates.
 
* We conduct workshops using spoken tutorials and give certificates.
 
* For more details, please write to us.
 
* For more details, please write to us.
−
 
−
 
  
 
|-
 
|-
 
|| Slide: Forum questions
 
|| Slide: Forum questions
−
|| Pls post your timed queries in this forum
+
|| Pls post your timed queries in this forum.
  
 
|-
 
|-
 
|| Slide: Acknowledgement
 
|| Slide: Acknowledgement
−
|| Spoken Tutorial Project is funded by the Ministry of Education (MoE), Government of India
+
|| Spoken Tutorial Project is funded by the Ministry of Education (MoE), Government of India.
  
 
|-
 
|-

Revision as of 23:41, 27 May 2021

Title of the script: Object and Array Destructuring

Author: Jayesh Katta Ramalingaiah

Domain Reviewer:

Novice Reviewer:

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 Note:

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 Save the file.
Switch to browser 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=55172"