JavaScript/C4/Array-methods-in-JS/English - Revision history

Nancyvarkey at 05:34, 21 June 2021

2021-06-21T05:34:43Z

Pravin1389 at 14:59, 8 June 2021

2021-06-08T14:59:19Z

Nancyvarkey at 08:52, 31 May 2021

2021-05-31T08:52:30Z

Show changes

Kr.jayesh: Created page with "Title of the script: Array Methods Author: Jayesh Katta Ramalingaiah Domain Reviewer: Novice Reviewer: Keywords: JavaScript, HTML, callback, parameter, method, loop {..."

2021-05-22T18:23:36Z

Created page with "Title of the script: Array Methods Author: Jayesh Katta Ramalingaiah Domain Reviewer: Novice Reviewer: Keywords: JavaScript, HTML, callback, parameter, method, loop {..."

New page

Title of the script: Array Methods

Author: Jayesh Katta Ramalingaiah

Domain Reviewer:

Novice Reviewer:

Keywords: JavaScript, HTML, callback, parameter, method, loop

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

|-
|| Slide: Title
|| Hello and welcome to the spoken tutorial on “'''Array Methods in JS'''”.

|-
|| Slide:

Learning Objectives
|| In this tutorial, we will learn about:

* Different '''Array Methods '''and
* Advanced '''Array Loops '''in''' JS'''

|-
|| 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 file.
* Make a copy and then use them for practising.

|-
|| Slide: Array Methods
|| To make development work easy, we can use many of the '''inbuilt array methods '''of '''JS'''.

We’ll learn a few of them in this tutorial.

* '''length '''- '''Returns''' the length of the '''Array'''
* '''push '''- Adds a value at the end of the '''Array'''
* '''pop '''- Removes a value from the end of the '''Array'''

|-
|| Only Narration
|| Now, let us take an example for each of these '''methods''' and understand them 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>Array Methods</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 '''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 = [1, 2, 3];</nowiki>

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

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

<nowiki>const arr = [1, 2, 3];</nowiki>
|| Here, I have created a '''variable''' named '''arr '''and assigned an '''array '''with '''elements 1, 2 '''and '''3.'''

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

console.log(arr.length);
|| And in the '''console,''' I am '''logging arr.length''', which prints the length of the '''array'''.

|-
|| Press: Ctrl + S
|| Save the file.

|-
|| Switch to '''Browser'''
|| Switch back to the '''browser.'''

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

Highlight:

'''3'''
|| Here we see 3.

That’s because there are '''3 elements''', and so the length of the '''array '''is '''3.'''

Next, let’s see the '''push method'''.

|-
|| Switch to Editor
|| Switch back to the '''editor.'''

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

<nowiki>const arr = [1, 2, 3];</nowiki>

console.log(arr.push(4));

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

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

arr.push(4);
|| I’m using the '''push method '''to add an '''element''' to the end of the '''array'''

The '''push method '''accepts values to '''push''' to the '''array.'''

Here I’m '''passing''' only one value which is '''4.'''

You can give multiple comma-separated values too.

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

console.log(arr.push(4));
|| The '''push method '''returns the''' length '''of the '''array'''.

To verify the '''length''', I’m using the '''push method''' inside the '''log statement'''.

|-
|| Press: Ctrl + S
|| Save the file.

|-
|| Switch to '''Browser'''
|| Switch back to the '''browser.'''

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

Highlight:

'''4'''
|| In the '''console''', we can see that the '''length '''of the '''array '''after '''pushing''' the value, is seen as '''4.'''

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

Highlight:

'''<nowiki>Array(4) [ 1, 2, 3, 4 ]</nowiki>'''
|| Observe here that the value '''4''' is added at the end of the '''array'''.

|-
|| Switch to Editor
|| Next, let’s use the '''pop method'''.

Switch back to the '''editor.'''

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

<nowiki>const arr = [1, 2, 3];</nowiki>

console.log(arr.pop());

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

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

arr.pop();
|| Here, I used the '''pop method.'''

'''pop '''is an '''inbuilt function call '''that deletes one value at the end of the '''array'''.

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

console.log(arr.pop());
|| The '''pop method returns''' the '''deleted value '''in the '''array'''.

To verify the '''value''', I’m using the '''pop method''' inside the '''log statement.'''

|-
|| Press: Ctrl + S
|| Save the file.

|-
|| Switch to '''Browser'''
|| Switch back to the '''browser.'''

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

Highlight:

'''3'''
|| In the '''console''', we can see the '''deleted value '''from the '''array '''is '''3.'''

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

Highlight:

'''<nowiki>Array [ 1, 2 ]</nowiki>'''
|| We can see that the '''pop method''' has successfully removed the last '''element''' from the '''array'''.

Next, let’s learn some more '''array methods'''.

|-
|| Slide: Array Methods
||
* '''indexOf '''- '''Returns''' the '''index '''of the value in the '''Array'''
* '''shift '''- Removes a value from the beginning of the '''Array'''
* '''unShift '''- Adds a value to the beginning of the '''Array'''

|-
|| Only Narration
|| Let us take an example for each of these '''methods''' and understand them better.

|-
|| Switch to Editor
|| Switch back to the '''editor.'''

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

<nowiki>const arr = [1, 2, 3];</nowiki>

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

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

console.log(arr.indexOf(2));
|| Here, I’m using the '''indexOf method '''and '''passing''' the value''' 2''' to it.

If the '''array '''has the value '''2''', then it will '''return''' the '''index''' as '''2.'''

If the value is not available in the '''array''', then it will '''return -1.'''

|-
|| Press: Ctrl + S
|| Save the file.

|-
|| Switch to '''Browser'''
|| Switch back to the '''browser.'''

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

Highlight:

'''1'''
|| Since the '''element''' is present in the '''array, index 1 '''is '''returned''' and printed in the '''log.'''

|-
|| Switch to Editor
|| Next, let’s see the''' unshift method'''.

Switch back to the '''editor.'''

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

<nowiki>const arr = [1, 2, 3];</nowiki>

arr.unshift(0);

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

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

arr.unshift(0);
|| Here, I’m using the '''unshift method '''and '''passing''' the value '''0''' to it.

This '''method '''adds the value at the beginning of the '''array.'''

You can '''pass''' comma-separated values too if you want to add more.

|-
|| Press: Ctrl + S
|| Save the file.

|-
|| Switch to '''Browser'''
|| Switch back to the '''browser.'''

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

Highlight:

'''<nowiki>Array(4) [ 0, 1, 2, 3 ]</nowiki>'''
|| As you can see here, the value is added at the beginning of the '''array.'''

|-
|| Switch to Editor
|| Next, let’s see the '''shift method'''.

Switch back to the '''editor.'''

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

<nowiki>const arr = [1, 2, 3];</nowiki>

arr.shift();

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

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

arr.shift();
|| Here, I’m using the '''shift method''', which deletes one value from the beginning of the '''array'''.

|-
|| Press: Ctrl + S
|| Save the file.

|-
|| Switch to '''Browser'''
|| Switch back to the '''browser.'''

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

Highlight:

'''<nowiki>Array [ 2, 3 ]</nowiki>'''
|| Notice here that 1 is removed from the '''array'''.

Let’s continue to learn some more '''array methods'''.

|-
|| Slide: Array Methods
||
* '''forEach '''- '''Loops''' over the '''Array'''
* '''map '''- '''Loops''' over the '''Array '''and '''returns''' the '''modified Array'''
* '''filter '''- '''Loops''' over the '''Array '''with a '''condition''' and '''returns''' the '''filtered Array'''

|-
|| Only Narration
|| Let us look at an example for each of these '''methods''' and understand them better.

|-
|| Switch to Editor
|| Switch back to the '''editor.'''

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

<nowiki>const arr = [1, 2, 3];</nowiki>

arr.forEach((item) => console.log(item));
|| In the '''main.js '''file, replace the '''code''' as shown.

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

arr.forEach((item) => console.log(item));
|| Here, I’m using a '''forEach method '''to '''loop''' over the '''array'''.

This is an advanced '''loop''' compared to a normal '''for loop'''.

Its execution is faster compared to a '''for loop.'''

'''forEach '''accepts a '''callback function.'''

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

(item) =>
|| Here, I will '''pass''' any '''variable '''name as a '''parameter'''.

Say '''item''', which''' '''refers to the value in each and every iteration.

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

console.log(item);
|| On every iteration, I '''log''' the value.

|-
|| Press: Ctrl + S
|| Save the file.

|-
|| Switch to '''Browser'''
|| Switch back to the '''browser.'''

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

Highlight:

'''1'''

'''2'''

'''3'''
|| Look here. The '''array '''has '''looped''' over.

The values in the '''array '''are printed one after the other.

|-
|| Switch to Editor
|| Next, let’s learn about the '''map method'''.

Switch back to the '''editor.'''

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

<nowiki>const arr = [1, 2, 3];</nowiki>

const modifiedArr = arr.map((item) => item * 2);

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

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

const modifiedArr = arr.map((item) => item * 2);
|| Here, I’m using the '''map method'''.

|-
|| Slide: Map Method
|| '''map method '''is also very similar to '''forEach method.'''

* It accepts a '''callback function''',
* '''Loops''' over each and every value in the '''array'''
* Modifies it, and then '''returns''' the modified '''array'''

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

const modifiedArr = arr.map((item) => item * 2);
|| ’m storing the modified '''array '''in the '''variable''' '''modifiedArr'''.

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

console.log(modifiedArr);
|| In the '''console''', I’m '''logging''' the '''modifiedArr''' '''variable '''for verification.

|-
|| Press: Ctrl + S
|| Save the file.

|-
|| Switch to '''Browser'''
|| Switch back to the '''browser.'''

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

Highlight:

'''<nowiki>Array(3) [ 2, 4, 6 ]</nowiki>'''
|| Observe the '''console'''.

The '''map method''' has modified each and every value in the '''array '''by multiplying it by''' 2.'''

And, it has '''returned''' the modified '''array.'''

|-
|| Switch to Editor
|| Next, let's learn about the '''filter method'''.

Switch back to the '''editor.'''

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

<nowiki>const arr = [1, 2, 3, 4];</nowiki>

<nowiki>const filteredArr = arr.filter((item) => item < 3);</nowiki>

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

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

<nowiki>const filteredArr = arr.filter((item) => item < 3);</nowiki>
|| Here, I’m using the '''filter method.'''

The '''filter method '''filters the '''array '''with a '''condition''' and '''returns '''a filtered '''array'''.

Similar to '''forEach''', even the '''filter method '''accepts a '''callback function.'''

The '''filter method loops''' over and for each and every value the '''function '''gets '''executed'''.

The '''filter method '''will not '''modify '''the original '''array'''.

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

<nowiki>item < 3</nowiki>
|| Here, inside the '''callback function''', I have mentioned a '''condition'''.

If the '''condition''' is satisfied, the value is '''returned.'''

Else it won't '''return''' anything.

|-
|| const filteredArr =
|| The '''returned''' values are stored in the '''variable filteredArr'''.

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

console.log(filteredArr);
|| Here, I’m '''logging''' the '''filteredArr variable''' for verification.

|-
|| Press: Ctrl + S
|| Save the file.

|-
|| Switch to '''Browser'''
|| Switch back to the '''browser.'''

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

Highlight:

'''<nowiki>Array [ 1, 2 ]</nowiki>'''
|| In the '''console''', we have the '''filtered array'''.

Only values that are less than 3 are filtered and are displayed here as per the condition we set.

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

Let’s summarize.

|-
|| Slide''': '''Summary''' '''

|| In this tutorial, we have learnt:

* Different''' Array Methods '''and
* Advanced '''Array Loops '''in''' JS'''

|-
|| Slide:

<nowiki>[Highlight]:</nowiki>

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array
|| We have covered only a few '''array methods '''in this tutorial.

To learn more visit the link shown.

|-
|| Slide: Assignment
|| As an assignment:

* Open the file '''assignment.js''' which you have created earlier.
* Clear the existing code.
* '''Declare''' a '''variable marks'''
* Assign an '''array '''to '''marks'''
* '''The array''' should contain - '''10 '''random numbers
* Filter the '''marks array''' and display the '''marks '''divisible by''' 2''' and '''3'''
* 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:
+Domain Reviewer: Ankita Maske
-Novice Reviewer:
+Novice Reviewer: Praveeen S.
 Keywords: JavaScript, HTML, callback, parameter, method, loop

@@ Line 24: / Line 24: @@
 Learning Objectives
 || In this tutorial, we will learn about:
-* Different '''Array Methods '''and
+* Different '''Array Methods '''
 * Advanced '''Array Loops '''in''' JS'''
@@ Line 46: / Line 46: @@
 ||
 * The files used in this tutorial are available in the''' Code files''' link on this tutorial page.
-* Pls download and extract the file.
+* Pls download and extract the files.
 * Make a copy and then use them for practising.
@@ Line 149: / Line 149: @@
 |-
 || Press: Ctrl + S
-|-
+Switch to '''Browser'''
-|| Switch to '''Browser'''
+|| Save the file and switch back to the '''browser.'''
-|| Switch back to the '''browser.'''
 |-
@@ Line 210: / Line 208: @@
 |-
 || Press: Ctrl + S
-|-
+Switch to '''Browser'''
-|| Switch to '''Browser'''
+|| Save the file and switch back to the '''browser.'''
-|| Switch back to the '''browser.'''
 |-
@@ Line 270: / Line 266: @@
 |-
 || Press: Ctrl + S
-|-
+Switch to '''Browser'''
-|| Switch to '''Browser'''
+|| Save the file and switch back to the '''browser.'''
-|| Switch back to the '''browser.'''
 |-
@@ Line 297: / Line 291: @@
 || Only Narration
 || Let us take an example for each of these '''methods''' and understand them better.
 |-
@@ Line 319: / Line 309: @@
-If the '''array '''has the value '''2''', then it will '''return''' the '''index''' as '''2.'''
+If the '''array '''has the value '''2''', then it will '''return''' the '''indexOf 2.'''
@@ Line 326: / Line 316: @@
 |-
 || Press: Ctrl + S
-|-
+Switch to '''Browser'''
-|| Switch to '''Browser'''
+|| Save the file and switch back to the '''browser.'''
-|| Switch back to the '''browser.'''
 |-
@@ Line 371: / Line 359: @@
 |-
 || Press: Ctrl + S
-|-
+Switch to '''Browser'''
-|| Switch to '''Browser'''
+|| Save the file and switch back to the '''browser.'''
-|| Switch back to the '''browser.'''
 |-
@@ Line 409: / Line 395: @@
 |-
 || Press: Ctrl + S
-|-
+Switch to '''Browser'''
-|| Switch to '''browser'''
+|| Save the file and switch back to the '''browser.'''
-|| Switch back to the '''browser.'''
 |-
@@ Line 482: / Line 466: @@
 |-
 || Press: Ctrl + S
-|-
+Switch to '''Browser'''
-|| Switch to '''Browser'''
+|| Save the file and switch back to the '''browser.'''
-|| Switch back to the '''browser.'''
 |-
@@ Line 507: / Line 489: @@
 || Switch to Editor
 || Next, let’s learn about the '''map method'''.
 |-
@@ Line 544: / Line 523: @@
 const modifiedArr = arr.map((item) => item * 2);
-|| ’m storing the modified '''array '''in the '''variable''' '''modifiedArr'''.
+|| I’m storing the modified '''array '''in the '''variable''' '''modifiedArr'''.
 |-
@@ Line 554: / Line 533: @@
 |-
 || Press: Ctrl + S
-|-
+Switch to '''Browser'''
-|| Switch to '''Browser'''
+|| Save the file and switch back to the '''browser.'''
-|| Switch back to the '''browser.'''
 |-
@@ Line 634: / Line 611: @@
 |-
 || Press: Ctrl + S
-|-
+Switch to '''Browser'''
-|| Switch to '''Browser'''
+|| Save the file and switch back to the '''browser.'''
-|| Switch back to the '''browser.'''
 |-