JavaScript/C4/Array-methods-in-JS/English
Title of the script: Array Methods
Author: Jayesh Katta Ramalingaiah
Domain Reviewer:
Novice Reviewer:
Keywords: JavaScript, HTML, callback, parameter, method, loop
|
|
Slide: Title | Hello and welcome to the spoken tutorial on “Array Methods in JS”. |
Slide:
Learning Objectives |
In this tutorial, we will learn about:
|
Slide: System Specifications | This tutorial is recorded using:
However, you may use any other browser of your choice. |
Slide : Pre-requisites | To practice this tutorial,
|
Slide: Code files |
|
Slide: Array Methods | To make development work easy, we can use many of the inbuilt array methods of JS.
|
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.
|
[Editor] Type:
<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
|
Save the file and start the Live server. |
[Firefox] Press Ctrl + Shift + I
|
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:
console.log(arr.length); |
In the main.js file, replace the code as shown. |
[Editor] Highlight:
|
Here, I have created a variable named arr and assigned an array with elements 1, 2 and 3. |
[Editor] Highlight:
|
And in the console, I am logging arr.length, which prints the length of the array. |
Press: Ctrl + S
Switch to Browser |
Save the file and 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.
|
Switch to Editor | Switch back to the editor. |
[Editor] Type:
const arr = [1, 2, 3]; console.log(arr.push(4));
|
In the main.js file, replace the code as shown. |
[Editor] Highlight:
|
I’m using the push method to add an element to the end of the array
|
[Editor] Highlight:
console.log(arr.push(4)); |
The push method returns the length of the array.
|
Press: Ctrl + S
Switch to Browser |
Save the file and 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:
|
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:
console.log(arr.pop()); console.log(arr); |
In the main.js file, replace the code as shown. |
[Editor] Highlight:
|
Here, I used the pop method.
|
[Editor] Highlight:
console.log(arr.pop()); |
The pop method returns the deleted value in the array.
|
Press: Ctrl + S
Switch to Browser |
Save the file and 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.
|
Slide: Array Methods |
|
Only Narration | Let us take an example for each of these methods and understand them better. |
[Editor] Type:
console.log(arr.indexOf(2)); |
In the main.js file, replace the code as shown. |
[Editor] Highlight:
|
Here, I’m using the indexOf method and passing the value 2 to it.
|
Press: Ctrl + S
Switch to Browser |
Save the file and 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:
arr.unshift(0); console.log(arr); |
In the main.js file, replace the code as shown. |
[Editor] Highlight:
|
Here, I’m using the unshift method and passing the value 0 to it.
|
Press: Ctrl + S
Switch to Browser |
Save the file and 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:
arr.shift(); console.log(arr); |
In the main.js file, replace the code as shown. |
[Editor] Highlight:
|
Here, I’m using the shift method, which deletes one value from the beginning of the array. |
Press: Ctrl + S
Switch to Browser |
Save the file and switch back to the browser. |
[Browser] [Console Tab]:
Highlight:
|
Notice here that 1 is removed from the array.
|
Slide: Array Methods |
|
Only Narration | Let us look at an example for each of these methods and understand them better. |
[Editor] Type:
arr.forEach((item) => console.log(item)); |
In the main.js file, replace the code as shown. |
[Editor] Highlight:
|
Here, I’m using a forEach method to loop over the array.
|
[Editor] Highlight:
|
Here, I will pass any variable name as a parameter.
|
[Editor] Highlight:
|
On every iteration, I log the value. |
Press: Ctrl + S
Switch to Browser |
Save the file and switch back to the browser. |
[Browser] [Console Tab]:
Highlight:
2 3 |
Look here. The array has looped over.
|
Switch to Editor | Next, let’s learn about the map method. |
[Editor] Type:
const modifiedArr = arr.map((item) => item * 2); console.log(modifiedArr); |
In the main.js file, replace the code as shown. |
[Editor] Highlight:
|
Here, I’m using the map method.
|
Slide: Map Method | map method is also very similar to forEach method.
|
[Editor] Highlight:
|
I’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
Switch to Browser |
Save the file and switch back to the browser. |
[Browser] [Console Tab]:
Highlight:
|
Observe the console.
|
Switch to Editor | Next, let's learn about the filter method. |
[Editor] Type:
const filteredArr = arr.filter((item) => item < 3); console.log(filteredArr); |
In the main.js file, replace the code as shown. |
[Editor] Highlight:
|
Here, I’m using the filter method.
|
[Editor] Highlight:
item < 3 |
Here, inside the callback function, I have mentioned a condition.
|
const filteredArr = | The returned values are stored in the variable filteredArr. |
[Editor] Highlight:
|
Here, I’m logging the filteredArr variable for verification. |
Press: Ctrl + S
Switch to Browser |
Save the file and switch back to the browser. |
[Browser] [Console Tab]:
Highlight:
|
In the console, we have the filtered array.
|
Only Narration | With this, we have come to the end of this tutorial.
|
Slide: Summary
|
In this tutorial, we have learnt:
|
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.
|
Slide: Assignment | As an assignment:
|
Slide: About Spoken Tutorial Project |
|
Slide: Spoken tutorial workshops |
|
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 |