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

From Script | Spoken-Tutorial
Jump to: navigation, search
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 '''
 
* Advanced '''Array Loops '''in''' JS'''
 
* 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.
 
* 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.
 
* Make a copy and then use them for practising.
  
Line 149: Line 149:
 
|-
 
|-
 
|| Press: Ctrl + S
 
|| Press: Ctrl + S
−
|| Save the file.
 
  
−
|-
+
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
 
|| Press: Ctrl + S
−
|| Save the file.
 
  
−
|-
+
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
 
|| Press: Ctrl + S
−
|| Save the file.
 
  
−
|-
+
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
 
|| Only Narration
 
|| Let us take an example for each of these '''methods''' and understand them better.
 
|| Let us take an example for each of these '''methods''' and understand them better.
−
 
−
|-
 
−
|| Switch to Editor
 
−
|| Switch back to the '''editor.'''
 
  
 
|-
 
|-
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
 
|| Press: Ctrl + S
−
|| Save the file.
 
  
−
|-
+
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
 
|| Press: Ctrl + S
−
|| Save the file.
 
  
−
|-
+
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
 
|| Press: Ctrl + S
−
|| Save the file.
 
  
−
|-
+
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
 
|| Press: Ctrl + S
−
|| Save the file.
 
  
−
|-
+
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
 
|| Switch to Editor
 
|| Next, let’s learn about the '''map method'''.
 
|| Next, let’s learn about the '''map method'''.
−
 
−
 
−
Switch back to the '''editor.'''
 
  
 
|-
 
|-
Line 544: Line 523:
  
 
const modifiedArr = arr.map((item) => item * 2);
 
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
 
|| Press: Ctrl + S
−
|| Save the file.
 
  
−
|-
+
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
 
|| Press: Ctrl + S
−
|| Save the file.
 
  
−
|-
+
Switch to '''Browser'''
−
|| Switch to '''Browser'''
+
|| Save the file and switch back to the '''browser.'''
−
|| Switch back to the '''browser.'''
+
  
 
|-
 
|-

Revision as of 20:29, 8 June 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
  • 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 files.
  • 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

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.


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

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:


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

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.


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.
[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 indexOf 2.


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

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:


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

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:


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

Switch to Browser

Save the file and 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

Switch to Browser

Save the file and 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.
[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);

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:


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

Switch to Browser

Save the file and 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=55201"