Array methods in Javascript

Array is one of the most important and frequently used concepts in JS. If someone raises the question “What is an array?”, we used to say,

“An array is a homogeneous collection of elements”.

My own definition of the array is,

It is a data structure used for arranging the elements or data as a group and each element can be accessed through its index.

To develop a JS enabled application, we should know this basic concept of arrays and the methods to be used.

For e.g:

const sampleArray = [  ‘HTML’  ,  ‘JavaScript’  ,  ‘ES6’ ]

where,

sampleArray [ 0 ] – ‘HTML’

sampleArray [ 1 ] – ‘JavaScript’

sampleArray [ 2 ] – ‘HTML’

Now, let us see some most commonly used array methods with simple examples

• length:

To find the length or size of a particular array.

Eg: console.log(sampleArray.length); 

Output: 3

• Adding an element to an array:

1. push:
   

   To add an element at the end of an array.

   Eg: sampleArray.push(‘NodeJS’); 
   Output:  [  ‘HTML’  ,  ‘JavaScript’  ,  ‘ES6’ ,  ‘NodeJS’ ]

2. unshift:
   

   To add an element at the front of an array.

   Eg: sampleArray.unshift(‘NodeJS’); 
   Output:  [ ‘NodeJS’ ,   ‘HTML’  ,  ‘JavaScript’  ,  ‘ES6’  ]

• Removing element(s) from an array:

1. pop:
   

   To remove the last element from an array.

   Eg: sampleArray.pop(); 
   Output:  [  ‘HTML’  ,  ‘JavaScript’ ]
   

   Here ES6 is removed as it was at the end of the array.

2. shift:
   

   To remove the first element in the array.

   Eg: sampleArray.shift(); 
   Output:  [  ‘JavaScript’  ,  ‘ES6’  ]
   

   Here HTML is removed as it was the first element in the array.

3. Remove an item by index position – splice(pos,1)
   

   To remove an element by index position.

   Eg: sampleArray.splice(2, 1);
   Output:  [  ‘HTML’ ,  ‘JavaScript’  ]
   

   Here ES6 is removed as it was present in the index 2 and the second parameter specifies the number of elements to be removed.

4. Remove multiple items – splice(pos,n)
   

   To remove more than one elements based on the index position.
   Here n specifies the number of elements to be removed from the specific index pos.
   

   Eg: const removedItems = sampleArray.splice(1 , 2);
   Output:  sampleArray = [  ‘HTML’  ]
   removedItems = [  ‘JavaScript’ , ‘ES6’  ]
   

    Here both Javascript(index-1)  and ES6(index-2)  are removed and pushed to removedItems.

• Copying an array:

1. slice:
   

   To make a copy of an array with all its elements.

   Eg: const copyOfArray = sampleArray.slice();
   Output:  copyOfArray = [  ‘HTML’  ,  ‘JavaScript’  ,  ‘ES6’ ,  ‘NodeJS’ ]

• Find the existence of an element:

1. includes():
   

   To find whether an element present in an array or not.

   Eg: var isPresent = sampleArray.includes(‘ES6’);   // returns true
   var isPresent = sampleArray.includes(‘MongoDB’);   // returns false

• Merging of arrays:

1. concat():
   

   To combine/merge two or more arrays to form a new array.

   Eg:  var array1 = ['a', 'b', 'c'];
   var array2 = ['d', 'e', 'f'];
   
   console.log(array1.concat(array2));
   Output:  [ 'a', 'b', 'c', 'd', 'e', 'f' ];

• Operations/Functions that return a new array:

1. filter:
   

   This returns a new array with the elements that pass the conditions given in the function.

   Eg:
   const filteredArray = sampleArray.filter(element => element.length < 5);      
   Output:  [  ‘HTML’   ,  ‘ES6’  ] , Here the length of each element is less than 5.

2. map:
   

   Here, the given function is executed for each element of the array and the result will be pushed to a new array.

   Eg:     const sampleArray = [ 4, 2, 34, 50 ]
   const mappedArray  = sampleArray.map(element => element*2); 
   Output:  [ 8 , 4  , 68 , 100 ]

• Looping through an array:

• 1. for loop.
  2. forEach
  3. for of
  4. for in
  5. Map
  6. Filter

These are some of the methods which we can use to loop through an array.

And yes…We came to an end and I hope this blog on frequently used array methods will be useful to develop a js-based application. For more methods, refer the below link.

Reference:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array