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

Nancyvarkey at 05:35, 21 June 2021

2021-06-21T05:35:28Z

Nancyvarkey at 05:32, 21 June 2021

2021-06-21T05:32:54Z

Pravin1389 at 06:21, 7 June 2021

2021-06-07T06:21:14Z

Nancyvarkey at 18:11, 27 May 2021

2021-05-27T18:11:18Z

Kr.jayesh: 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..."

2021-05-22T18:00:24Z

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..."

New page

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

{| border = “1”
|| <center>'''Visual Cue'''</center>
|| <center>'''Narration'''</center>

|-
|| 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'''

|-
|| <nowiki>[Editor] </nowiki>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.

|-
|| <nowiki>[Editor] </nowiki>Type:

<nowiki><!DOCTYPE html></nowiki>

<nowiki><html lang="en"></nowiki>

<nowiki><head></nowiki>

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

<nowiki></head></nowiki>

<nowiki><body></nowiki>

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

<nowiki></body></nowiki>

<nowiki></html></nowiki>
|| 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'''.

|-
|| <nowiki>[Firefox] Press</nowiki>''' 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.'''

|-
|| <nowiki>[Editor] </nowiki>Type:

<nowiki>const arr = ["Jayesh", 20];</nowiki>

<nowiki>const [name, age] = arr;</nowiki>

console.log(name);

console.log(age);
|| In the '''main.js '''file, replace the '''code''' as shown.

|-
|| <nowiki>[Editor] Highlight:</nowiki>

<nowiki>const arr = ["Jayesh", 20];</nowiki>
|| Here, I have created an '''array '''with the '''variable '''name '''arr'''.

The '''array '''has two values - '''Jayesh''' and '''20'''.

|-
|| <nowiki>[Editor] Highlight:</nowiki>

<nowiki>const [name, age] = arr;</nowiki>
|| 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.

|-
|| <nowiki>[Editor] Highlight:</nowiki>

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.'''

|-
|| <nowiki>[Browser] [Console Tab]:</nowiki>

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.'''

|-
|| <nowiki>[Editor] </nowiki>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.

|-
|| <nowiki>[Editor] Highlight:</nowiki>

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.'''

|-
|| <nowiki>[Editor] Highlight:</nowiki>

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.

|-
|| <nowiki>[Editor] Highlight:</nowiki>

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.'''

|-
|| <nowiki>[Browser] [Console Tab]:</nowiki>

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.

It's just ('''…) '''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.'''

|-
|| <nowiki>[Editor] </nowiki>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.

|-
|| <nowiki>[Editor] Highlight:</nowiki>

const obj = {

name: "Jayesh",

age: 20,

location: "Bangalore",

};
|| Here, I have '''declared''' an '''object '''with''' 3''' '''properties''' as per our discussed scenario.

|-
|| <nowiki>[Editor] Highlight:</nowiki>

const { '''name''', ...details } = obj;
|| To assign the '''name property '''value in the '''object''' to the '''name variable''', I’m '''declaring the name '''here.

|-
|| <nowiki>[Editor] Highlight:</nowiki>

'''...'''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.

|-
|| <nowiki>[Editor] Highlight:</nowiki>

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.'''

|-
|| <nowiki>[Browser] [Console Tab]:</nowiki>

Highlight:

'''Jayesh'''
|| Here is the verification for the newly created '''name variable.'''

'''T'''he value in the '''name '''property of the '''object '''is assigned as '''Jayesh'''.

|-
|| <nowiki>[Browser] [Console Tab]:</nowiki>

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'''.
* For eg:''' ` '''some string '''`'''
* '''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.'''

|-
|| <nowiki>[Editor] </nowiki>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.

|-
|| <nowiki>[Editor] Highlight:</nowiki>

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.'''

|-
|| <nowiki>[Editor] Highlight:</nowiki>

{name, location: city }
|| The '''passed object '''should have the '''name '''and '''location '''as the '''properties.'''

|-
|| <nowiki>[Editor] Highlight:</nowiki>

location: city
|| Here, If I have a requirement to access the '''location property '''as a '''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'''

|-
|| <nowiki>[Editor] Highlight:</nowiki>

console.log(`${name} lives in ${city}`);
|| To verify this, I have '''logged''' a '''string '''that accepts '''name '''and '''city variables'''.

|-
|| <nowiki>[Editor] Highlight: </nowiki>

`${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''').'''

|-
|| <nowiki>[Editor] Highlight:</nowiki>

${city}
|| Here, I’m not using '''location '''anymore, as the '''location''' is cast as a '''city.'''

|-
|| <nowiki>[Editor] Highlight:</nowiki>

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.'''

|-
|| <nowiki>[Browser] [Console Tab]:</nowiki>

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

|}

@@ Line 3: / Line 3: @@
 Author: Jayesh Katta Ramalingaiah
-Domain Reviewer: Vigneshwer Dhinakaran
+Domain Reviewer: Ankita Maske
 Novice Reviewer: Praveeen S.

@@ Line 289: / Line 289: @@
 |-
 || Slide: Object Destructing
-|| Note:
+|| For '''Objects''', the '''variable''' name''' '''should be the same as the '''object property''' name.
-−
 For '''Objects''', the '''variable''' name''' '''should be the same as the '''object property''' name.
@@ Line 394: / Line 392: @@
-'''T'''he value in the '''name '''property of the '''object '''is assigned as '''Jayesh'''.
+The value in the '''name '''property of the '''object '''is assigned as '''Jayesh'''.
 |-
@@ Line 502: / Line 500: @@
 |-
 || Press: Ctrl + S
-|-
+Switch to '''browser'''
-|| Switch to '''browser'''
+|| Save the file and Switch back to the '''browser.'''
 || Switch back to the '''browser.'''
 |-

@@ Line 8: / Line 8: @@
 Keywords: JavaScript, HTML, abject, array, shorthands, spread, template literals
 {| border = “1”
@@ Line 24: / Line 22: @@
 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''')
@@ Line 47: / Line 39: @@
 || Slide: Pre-requisites
 || 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.
 |-
@@ Line 60: / Line 48: @@
 * Pls download and extract the files.
 * Make a copy and then use them for practising.
 |-
 || 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'''.
 |-
@@ Line 123: / Line 107: @@
 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
-|| 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'''.
-* For eg:''' ` '''some string '''`'''
+* Here is an example.
 * '''Variables '''values can be displayed using''' ${} ('''the '''dollar''' symbol and curly braces''')''' in a '''string'''.
 |-
@@ Line 479: / Line 461: @@
 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}
-|| 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.'''
@@ Line 548: / Line 530: @@
 || 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'''
+* '''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
@@ Line 570: / Line 546: @@
 * Open the file '''MyPage.html''' in a '''web browser'''
 * Observe the output in the '''browser’s console'''
 |-
@@ Line 577: / Line 551: @@
 ||
 * 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.
 * For more details, please write to us.
 |-
 || Slide: Forum questions
-|| Pls post your timed queries in this forum
+|| Pls post your timed queries in this forum.
 |-
 || 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.
 |-