Difference between revisions of "JavaScript/C4/Array-methods-in-JS/English"

From Script | Spoken-Tutorial
Jump to: navigation, search
(Created page with "Title of the script: Array Methods Author: Jayesh Katta Ramalingaiah Domain Reviewer: Novice Reviewer: Keywords: JavaScript, HTML, callback, parameter, method, loop {...")
 
Line 24: Line 24:
 
Learning Objectives
 
Learning Objectives
 
|| In this tutorial, we will learn about:
 
|| In this tutorial, we will learn about:
−
 
−
 
 
* Different '''Array Methods '''and
 
* Different '''Array Methods '''and
 
* Advanced '''Array Loops '''in''' JS'''
 
* Advanced '''Array Loops '''in''' JS'''
−
 
−
 
  
 
|-
 
|-
 
|| 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 45: 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 58: Line 48:
 
* Pls download and extract the file.
 
* Pls download and extract the file.
 
* Make a copy and then use them for practising.
 
* Make a copy and then use them for practising.
−
 
−
 
  
 
|-
 
|-
Line 67: Line 55:
  
 
We’ll learn a few of them in this tutorial.
 
We’ll learn a few of them in this tutorial.
−
 
−
 
 
* '''length '''- '''Returns''' the length of the '''Array'''
 
* '''length '''- '''Returns''' the length of the '''Array'''
 
* '''push '''- Adds a value at the end of the '''Array'''
 
* '''push '''- Adds a value at the end of the '''Array'''
 
* '''pop '''- Removes a value from the end of the '''Array'''
 
* '''pop '''- Removes a value from the end of the '''Array'''
−
 
−
 
  
 
|-
 
|-
Line 127: Line 111:
  
 
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 134: Line 118:
  
 
Point to the browser '''Console''' tab
 
Point to the browser '''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 248: Line 232:
 
'''<nowiki>Array(4) [ 1, 2, 3, 4 ]</nowiki>'''
 
'''<nowiki>Array(4) [ 1, 2, 3, 4 ]</nowiki>'''
 
|| Observe here that the value '''4''' is added at the end of the '''array'''.
 
|| Observe here that the value '''4''' is added at the end of the '''array'''.
−
 
−
 
  
  
Line 255: Line 237:
 
|| Switch to Editor
 
|| Switch to Editor
 
|| Next, let’s use the '''pop method'''.
 
|| Next, let’s use the '''pop method'''.
−
 
−
 
−
Switch back to the '''editor.'''
 
  
 
|-
 
|-
Line 303: Line 282:
  
 
'''3'''
 
'''3'''
−
|| In the '''console''', we can see the '''deleted value '''from the '''array '''is '''3.'''
+
|| In the '''console''', we can see that the '''pop method''' has successfully removed the last '''element''' from the '''array'''.
−
 
+
−
|-
+
−
|| <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'''.
+
  
  
Line 323: Line 293:
 
* '''shift '''- Removes a value from the beginning of the '''Array'''
 
* '''shift '''- Removes a value from the beginning of the '''Array'''
 
* '''unShift '''- Adds a value to the beginning of the '''Array'''
 
* '''unShift '''- Adds a value to the beginning of the '''Array'''
−
 
−
 
  
 
|-
 
|-
Line 371: Line 339:
 
'''1'''
 
'''1'''
 
|| Since the '''element''' is present in the '''array, index 1 '''is '''returned''' and printed in the '''log.'''
 
|| Since the '''element''' is present in the '''array, index 1 '''is '''returned''' and printed in the '''log.'''
−
 
−
 
  
  
Line 378: Line 344:
 
|| Switch to Editor
 
|| Switch to Editor
 
|| Next, let’s see the''' unshift method'''.
 
|| Next, let’s see the''' unshift method'''.
−
 
−
 
−
Switch back to the '''editor.'''
 
  
 
|-
 
|-
Line 421: Line 384:
 
'''<nowiki>Array(4) [ 0, 1, 2, 3 ]</nowiki>'''
 
'''<nowiki>Array(4) [ 0, 1, 2, 3 ]</nowiki>'''
 
|| As you can see here, the value is added at the beginning of the '''array.'''
 
|| As you can see here, the value is added at the beginning of the '''array.'''
−
 
−
 
−
 
  
 
|-
 
|-
 
|| Switch to Editor
 
|| Switch to Editor
 
|| Next, let’s see the '''shift method'''.
 
|| Next, let’s see the '''shift method'''.
−
 
−
 
−
Switch back to the '''editor.'''
 
  
 
|-
 
|-
Line 455: Line 412:
  
 
|-
 
|-
−
|| Switch to '''Browser'''
+
|| Switch to '''browser'''
 
|| Switch back to the '''browser.'''
 
|| Switch back to the '''browser.'''
  
Line 476: Line 433:
 
* '''map '''- '''Loops''' over the '''Array '''and '''returns''' the '''modified Array'''
 
* '''map '''- '''Loops''' over the '''Array '''and '''returns''' the '''modified Array'''
 
* '''filter '''- '''Loops''' over the '''Array '''with a '''condition''' and '''returns''' the '''filtered Array'''
 
* '''filter '''- '''Loops''' over the '''Array '''with a '''condition''' and '''returns''' the '''filtered Array'''
−
 
−
 
  
 
|-
 
|-
 
|| Only Narration
 
|| Only Narration
 
|| Let us look at an example for each of these '''methods''' and understand them better.
 
|| Let us look at an example for each of these '''methods''' and understand them better.
−
 
−
|-
 
−
|| Switch to Editor
 
−
|| Switch back to the '''editor.'''
 
  
 
|-
 
|-
Line 584: Line 535:
 
|| Slide: Map Method
 
|| Slide: Map Method
 
|| '''map method '''is also very similar to '''forEach method.'''
 
|| '''map method '''is also very similar to '''forEach method.'''
−
 
−
 
 
* It accepts a '''callback function''',  
 
* It accepts a '''callback function''',  
 
* '''Loops''' over each and every value in the '''array'''
 
* '''Loops''' over each and every value in the '''array'''
 
* Modifies it, and then '''returns''' the modified '''array'''
 
* Modifies it, and then '''returns''' the modified '''array'''
−
 
−
 
  
 
|-
 
|-
Line 631: Line 578:
 
|| Switch to Editor
 
|| Switch to Editor
 
|| Next, let's learn about the '''filter method'''.
 
|| Next, let's learn about the '''filter method'''.
−
 
−
 
−
Switch back to the '''editor.'''
 
  
 
|-
 
|-
Line 721: Line 665:
  
 
|| In this tutorial, we have learnt:
 
|| In this tutorial, we have learnt:
−
 
−
 
 
* Different''' Array Methods '''and
 
* Different''' Array Methods '''and
 
* Advanced '''Array Loops '''in''' JS'''
 
* Advanced '''Array Loops '''in''' JS'''
−
 
−
 
  
 
|-
 
|-
Line 742: Line 682:
 
|| 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''' a '''variable marks'''
 
* '''Declare''' a '''variable marks'''
 
* Assign an '''array '''to '''marks'''
 
* Assign an '''array '''to '''marks'''
−
* '''The array''' should contain - '''10 '''random numbers
+
* '''The array''' should contain 10 random numbers
−
* Filter the '''marks array''' and display the '''marks '''divisible by''' 2''' and '''3'''
+
* Filter the '''marks array''' and display the '''marks '''divisible by 2 and 3
 
* 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 760: Line 696:
 
* 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 768: Line 702:
 
* 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.
−
 
−
 
  
 
|-
 
|-

Revision as of 14:22, 31 May 2021

Title of the script: Array Methods

Author: Jayesh Katta Ramalingaiah

Domain Reviewer:

Novice Reviewer:

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


Visual Cue
Narration
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
[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>Array Methods</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 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 = [1, 2, 3];

console.log(arr.length);

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


const arr = [1, 2, 3];

Here, I have created a variable named arr and assigned an array with elements 1, 2 and 3.
[Editor] Highlight:


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.
[Browser] [Console Tab]:

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.
[Editor] Type:

const arr = [1, 2, 3];

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


console.log(arr);

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


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.

[Editor] Highlight:

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.
[Browser] [Console Tab]:

Highlight:

4

In the console, we can see that the length of the array after pushing the value, is seen as 4.
[Browser] [Console Tab]:

Highlight:


Array(4) [ 1, 2, 3, 4 ]

Observe here that the value 4 is added at the end of the array.


Switch to Editor Next, let’s use the pop method.
[Editor] Type:


const arr = [1, 2, 3];

console.log(arr.pop());

console.log(arr);

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


arr.pop();

Here, I used the pop method.


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

[Editor] Highlight:

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.
[Browser] [Console Tab]:

Highlight:

3

In the console, 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.
[Editor] Type:


const arr = [1, 2, 3];

console.log(arr.indexOf(2));

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


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.
[Browser] [Console Tab]:

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.
[Editor] Type:


const arr = [1, 2, 3];

arr.unshift(0);

console.log(arr);

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


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.
[Browser] [Console Tab]:

Highlight:

Array(4) [ 0, 1, 2, 3 ]

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.
[Editor] Type:


const arr = [1, 2, 3];

arr.shift();

console.log(arr);

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


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.
[Browser] [Console Tab]:

Highlight:


Array [ 2, 3 ]

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.
[Editor] Type:


const arr = [1, 2, 3];

arr.forEach((item) => console.log(item));

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


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.

[Editor] Highlight:


(item) =>

Here, I will pass any variable name as a parameter.


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

[Editor] Highlight:


console.log(item);

On every iteration, I log the value.
Press: Ctrl + S Save the file.
Switch to Browser Switch back to the browser.
[Browser] [Console Tab]:

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.

[Editor] Type:


const arr = [1, 2, 3];

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

console.log(modifiedArr);

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


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
[Editor] Highlight:


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

’m storing the modified array in the variable modifiedArr.
[Editor] Highlight:

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.
[Browser] [Console Tab]:

Highlight:


Array(3) [ 2, 4, 6 ]

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.
[Editor] Type:


const arr = [1, 2, 3, 4];

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

console.log(filteredArr);

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


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

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.

[Editor] Highlight:

item < 3

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.
[Editor] Highlight:


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.
[Browser] [Console Tab]:

Highlight:


Array [ 1, 2 ]

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:

[Highlight]:

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

Contributors and Content Editors

Kr.jayesh, Nancyvarkey, Pravin1389

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