Alok blogs
Understanding 10 Array methods by visiting 12 Jyotirlingas in India

Understanding 10 Array methods by visiting 12 Jyotirlingas in India

Alok Tamrakar's photo
Alok Tamrakar
·

6 min read

In this blog we will learn about 10 array methods by a small story of visiting 12 Jyotirlingas in India . So the story started My family is decided to visit 12 Jyotirlingas in my summer holidays . We planned our summer and decided to cover all temples in the month . So first make the list of all the jyotirlingas in one diary and started writing the distances of each one with our nearest railway station.

1) Push ():

Push methods of array is used to add the specific element to the end of the array and returns the new length of the array .

Here we first make empty array and then pushed all the temples name in the array .

const jyotirlingas = [];
const jyotirlingasCount = jyotirlingas.push('Mahakaleswar');
console.log(jyotirlingasCount) // 1 
console.log(jyotirlingas) // Array ["Mahakalewar"]

// we put all the jyotirlinga name into the array 
jyotirlingas.push('Omkareshwar','Somnath','Kashi Vishwanath','KedarNath', 'Vaidyanath', 'Nageshwar', 'Malikarjuna','Triyambkeshar',
'Bhimsankar', 'Rameshwaram', 'Grishnesar');

console.log(jyotirlingas) // Array ['Omkareshwar','Somnath','Kashi Vishwanath','KedarNath', 'Vaidyanath', 'Nageshwar', 'Malikarjuna','Triyambkeshar',
'Bhimsankar', 'Rameshwaram', 'Grishnesar]

Now we have the list of the all Jyotirlingas in the array .

2) Length

Length Property of array is used to find the number of elements in the array .

For cross checking we use length property to check whether we missed any temple or not

const jyotirlingas = ['Omkareshwar','Somnath','Kashi Vishwanath','KedarNath', 'Vaidyanath', 'Nageshwar', 'Malikarjuna','Triyambkeshar',
'Bhimsankar', 'Rameshwaram', 'Grishnesar']

const jyotirlingasLength = jyotirlingas.length
console.log(jyotirlingasLength) // 11

Here we get 11 so we missed on temple name so we started checking which temple name we forget to add in the name so we got an array function by which we can find whether this name available or not in the array i.e. includes()

3) Includes()

The includes () method of array is used to determine whether an array includes a certain value among its entries it return true or false respectively .

const jyotirlingas = ['Omkareshwar','Somnath','Kashi Vishwanath','KedarNath', 'Vaidyanath', 'Nageshwar', 'Malikarjuna','Triyambkeshar',
'Bhimsankar', 'Rameshwaram', 'Grishnesar']
console.log(jyotirlingas.includes('Mahakeleshwar')) // false 
console.log(jyotirlingas.includes('Somnath')) // true

Using Includes method we got to know we missed one name but My brother said that this somnath value also we didn’t write then I said we get true values means then it is available . He said give me proof at which index that value is available then we got to know about IndexOf Method .

4) IndexOf ()

IndexOf() method of array returns the first index at which a given element can be found in the array , or return -1 if it is not present in the array .

we think to use this method to check which temple we forget to add in the array so we started checking using IndexOf () method .

const jyotirlingas = ['Omkareshwar','Somnath','Kashi Vishwanath','KedarNath', 'Vaidyanath', 'Nageshwar', 'Malikarjuna','Triyambkeshar',
'Bhimsankar', 'Rameshwaram', 'Grishnesar']

console.log(jyotirlingas.indexOf('Mahakeleshwar')) // -1 
console.log(jyotirlingas.indexOf('Somnath')) // 1

Now we have list of all the 12 jyotirlingas . So Now My mother said as we write name of all Jyotirlingas so start making a sequence of temples from where we have to start our journey , and we have to make flow of journey so that we can cover whole journey in least time . My mother suggest reverse the array and start journey with last temple .

5) Reverse()

Reverse Method of Array reverses an array and return the references of the same array means the first array element becoming the last element and the last element becoming the first .

const jyotirlingas = ['Omkareshwar','Somnath','Kashi Vishwanath','KedarNath', 'Vaidyanath', 'Nageshwar', 'Malikarjuna','Triyambkeshar',
'Bhimsankar', 'Rameshwaram', 'Grishnesar']

const reversed = jyotirlingas.reverse()
console.log(reversed) 
// we get the reverse element

6) Pop ()

Pop method is used to removes the last element from an array and returns that element . this method changes the length of the array .

const jyotirlingas = ['Omkareshwar','Somnath','Kashi Vishwanath','KedarNath', 'Vaidyanath', 'Nageshwar', 'Malikarjuna','Triyambkeshar',
'Bhimsankar', 'Rameshwaram', 'Grishnesar']
 console.log(jyotirlingas.pop()) // 'Grishnesar'
console.log(jyotirlingas.pop())

Now we started our journey and completed two jyotirlingas . Now My mother said now how many jyotirlingas are left to visit give me the list of jyotirlingas then we used the forEach function to show the list .

7) forEach()

forEach() method calls a function for each element in the array .

const jyotirlingas = ['Omkareshwar','Somnath','Kashi Vishwanath','KedarNath', 'Vaidyanath', 'Nageshwar', 'Malikarjuna','Triyambkeshar',
'Bhimsankar', 'Rameshwaram', 'Grishnesar']

jyotirlingas.forEach((element)=>{
console.log(element)
})

After seeing the list of temples my Uncle said that there are good gardens in the Varansi so we have to give first priority to visit it . He told me to place the gardens in the starting order of the list . so I think if I use PUSH function then it place the element in the last of the array then I got to know about the Unshift function .

8) unShift ()

unShift method is used to adds the element in the beginning of the array and return the new length of the array .

const jyotirlingas = ['Omkareshwar','Somnath','Kashi Vishwanath','KedarNath', 'Vaidyanath', 'Nageshwar', 'Malikarjuna','Triyambkeshar',
'Bhimsankar', 'Rameshwaram', 'Grishnesar']

console.log(jyotirlingas.unshift('garden1','garden2')) // 13

So I got the solution of pushing the elements to the beginning of the array . My Aunty give me task to show me the list of places from the second index to 5 index only . I got to know about the slice method

9) slice()

Slice() mehtod returns a shallow copy (means main copy remains same ) of a portion of an array into new array object selected from the start to end (end not included ) where start and end represent the index of the items in the array . The original array will not be modified .

const jyotirlingas = ['Omkareshwar','Somnath','Kashi Vishwanath','KedarNath', 'Vaidyanath', 'Nageshwar', 'Malikarjuna','Triyambkeshar',
    'Bhimsankar', 'Rameshwaram', 'Grishnesar']

    console.log(jyotirlingas.slice(2)) /* Array [''Kashi Vishwanath','KedarNath', 'Vaidyanath', 'Nageshwar', 'Malikarjuna','Triyambkeshar',
    'Bhimsankar', 'Rameshwaram', 'Grishnesar'] */ 

    console.log(jyotirlingas.slice(2,4)) // Array ['Kashi Vishwanath','KedarNath'] 

    console.log(jyotirlingas.slice(2,6)) // Array ['Kashi Vishwanath','KedarNath', 'Vaidyanath', 'Nageshwar']

    console.log(jyotirlingas.slice(-2))  // Array ['Rameshwaram', 'Grishnesar']

    console.log(jyotirlingas.slice(-2,-1)) // Array [ 'Rameshwaram' ]

    console.log(jyotirlingas.slice(2,-1)) // Array ['Kashi Vishwanath','KedarNath', 'Vaidyanath', 'Nageshwar', 'Malikarjuna','Triyambkeshar','Bhimsankar', 'Rameshwaram']

Summary for slice :

  1. If we have slice (2) : we start treat as the starting point and last one will be our end we wil include last one as well

  2. If we have (2,4) : We start from 2 index and 4 one treat as end but we will not write element of 4th index

  3. If we have (-2) : we treat as starting point and last one will be our end we wil include last one as well

  4. If we have (-2,-1) : we get last-1 element because last element will be -1 here .

Negative index mark like that :

Btw this My brother said include a new place btw two temles so Now we want to include any value btw the array elements so we got to know about the splice method .

10 ) splice ()

Splice method of Array changes the contents of an array by removing or relacing existing elements and/or adding new elements . it modified on existing array .

const jyotirlingas = ['Omkareshwar','Somnath','Kashi Vishwanath','KedarNath', 'Vaidyanath', 'Nageshwar', 'Malikarjuna','Triyambkeshar',
    'Bhimsankar', 'Rameshwaram', 'Grishnesar'] 
jyotirlingas.splice(1,2,"om");
console.log(jyotirlingas) 
/* ['Omkareshwar','Om','KedarNath', 'Vaidyanath', 'Nageshwar', 'Malikarjuna','Triyambkeshar',
    'Bhimsankar', 'Rameshwaram', 'Grishnesar'] 
*/

In splice note down : splice (1,2,”om” ) means start from 1 and remove 2 values from 1 and 2 and place om in it . it means that middle value is count here .

Signing Off!!

Finishing off with the article here. I really hope, I made the article worth your while and you learned a great deal from it.

More than happy to address any improvements and suggestions. Please feel free to drop a comment.

Connect with me via: LinkedIn

ChaiCodeChaiaurcodeJavaScriptHashnode