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 {...")
 
 
(2 intermediate revisions by 2 users not shown)
Line 3: Line 3:
 
Author: Jayesh Katta Ramalingaiah
 
Author: Jayesh Katta Ramalingaiah
  
−
Domain Reviewer:  
+
Domain Reviewer: Ankita Maske
  
−
Novice Reviewer:  
+
Novice Reviewer: Praveeen S.
  
 
Keywords: JavaScript, HTML, callback, parameter, method, loop
 
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 '''
−
 
+
−
* 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 56: 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 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 165: 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 226: 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 248: Line 228:
 
'''<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 233:
 
|| 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 291: 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 303: Line 276:
  
 
'''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 287:
 
* '''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'''
−
 
−
 
  
 
|-
 
|-
 
|| 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 351: 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 358: 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 327:
 
'''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 332:
 
|| 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 408: 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 421: Line 370:
 
'''<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 452: 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 476: Line 417:
 
* '''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 531: 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 556: 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 584: Line 514:
 
|| 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 597: 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 607: 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 631: Line 555:
 
|| 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 690: 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.'''
+
  
 
|-
 
|-
Line 721: Line 640:
  
 
|| 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 657:
 
|| 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 671:
 
* 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 677:
 
* 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.
−
 
−
 
  
 
|-
 
|-

Latest revision as of 11:04, 21 June 2021

Title of the script: Array Methods

Author: Jayesh Katta Ramalingaiah

Domain Reviewer: Ankita Maske

Novice Reviewer: Praveeen S.

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=55262"