Most Important Javascript Array Methods

Nabed Khan
4 min readNov 2, 2020

--

Javascript array is a non-primitive data type. Javascript array is like an object. There are have some methods. Today we discuss about the most uses javascript array methods.

Concat():

The concat method is used to combine two or more arrays. It returns a new array but doesn't edit the existing array

const list1 = [1, 2, 3, 4, 5];
const list2 = [6, 7, 8, 9, 10];
const list3 = list1.concat(list2);
console.log(list3);
Output is: [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]

Filter():

The filter method check condition then provides a new array. If the condition is true then provide a result otherwise result is an empty array.

const list1 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const list2 = list1.filter(item => item > 5);
console.log(list2);
Output is: [ 6, 7, 8, 9, 10 ]

Find():

The find method also checks the condition and provides a single element, which is the value of the first element in the provided array. It’s doesn’t provide an array. below in my code result is 1. why? because the condition is true and the first element 1 is less than 5 that’s why the result is 1. find method only returns the first element in the existing array.

const list1 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const list2 = list1.find(item => item < 5);
console.log(list2);
Output is: 1

IndexOf():

If we need to know the index number of an element in the existing array then we can use the indexOf method. It returns the index number. if the given element can be found in the existing array then return the index number otherwise given us -1.

const names = ['Nabed', 'Shuvo', 'Momin', 'Al-Amin', 'Antor', 'Jannat'];
const result = names.indexOf('Momin');
console.log(result);
Output is: 2

Push():

Most of the time we need to adds one or more elements in the array then we can use the javascript push() method. The push method inserts element at the end of the array. After insertion returns the new length of the array.

const names = ['Nabed', 'Shuvo', 'Momin'];
names.push('jannat');
console.log(names);
Output is: [ 'Nabed', 'Shuvo', 'Momin', 'jannat' ]

Pop():

If we need to delete the last element of the array then we can use the pop() method. It helps us to remove the last element of the array. After removing returns the new length of the array.

const names = ['Nabed', 'Shuvo', 'Momin', 'Al-Amin', 'Antor', 'Jannat'];
console.log(names);
Output is: [ 'Nabed', 'Shuvo', 'Momin', 'Al-Amin', 'Antor' ]

Shift():

The shift method helps us to remove the first element of the array. If we need to remove the first element of the array then we can use the shift() method.

const names = ['Nabed', 'Shuvo', 'Momin', 'Al-Amin', 'Antor'];
names.shift();
console.log(names);
Output is: [ 'Shuvo', 'Momin', 'Al-Amin', 'Antor' ]

Unshift():

If we need to add one or more elements at the start of the array then we can use the javascript unshift() method. The unshift method inserts element at the beginning of the array. After insertion returns the new length of the array.

const list = [1, 2, 3, 4, 5];
list.unshift(-1, 0);
console.log(list);
Output is: [ -1, 0, 1, 2, 3, 4, 5 ]

ForEach():

If we want to traverse the array element then we can use the forEach method. forEach method received a callback function and we can pass 3 parameter
1. Current Item/value
2. Index Number
3. Full Array

const names = ['Nabed', 'Shuvo', 'Momin', 'Al-Amin', 'Antor', 'Jannat'];
names.forEach((item, index, arr) => {
console.log(item, index, arr);
});
Output is:
Nabed 0 [ 'Nabed', 'Shuvo', 'Momin', 'Al-Amin', 'Antor', 'Jannat' ]
Shuvo 1 [ 'Nabed', 'Shuvo', 'Momin', 'Al-Amin', 'Antor', 'Jannat' ]Momin 2 [ 'Nabed', 'Shuvo', 'Momin', 'Al-Amin', 'Antor', 'Jannat' ]Al-Amin 3 [ 'Nabed', 'Shuvo', 'Momin', 'Al-Amin', 'Antor', 'Jannat' ]Antor 4 [ 'Nabed', 'Shuvo', 'Momin', 'Al-Amin', 'Antor', 'Jannat' ]Jannat 5 [ 'Nabed', 'Shuvo', 'Momin', 'Al-Amin', 'Antor', 'Jannat' ]

Slice():

If we need a part of the array from existing array then we can use the slice method. slice method returns copied part of the new array. It doesn’t change the existing array. slice method takes 2 arguments.

  1. start index- starting index number of the array.
  2. end index- end before ending the index number of the array.
const names = ['Nabed', 'Shuvo', 'Momin', 'Al-Amin', 'Antor', 'Jannat'];
console.log(names.slice(2, 5));
console.log(names);
Output is:
[ 'Momin', 'Al-Amin', 'Antor' ]
[ 'Nabed', 'Shuvo', 'Momin', 'Al-Amin', 'Antor', 'Jannat' ]

Splice():

The splice method changes the array. It’s used to remove and replace elements from the existing array.

Remove Element from Array:
when we remove elements from the array. we need to pass 2 arguments.
1. The first one is the starting index number.
2. Second one is how many elements want to remove from the array.

we can also see remove elements with a new array.

const names = ['Nabed', 'Shuvo', 'Momin', 'Al-Amin', 'Antor', 'Jannat'];
const removeElement = names.splice(2, 2);
console.log(removeElement);
console.log(names);
Output is:
[ 'Momin', 'Al-Amin' ]
[ 'Nabed', 'Shuvo', 'Antor', 'Jannat' ]

Replace Element from Array:
when we replace element from the array. we need to pass 3 arguments.
1. The first one is the starting index number.
2. Second one is how many elements want to remove from the array.
3. add a new element.

const names = ['Nabed', 'Shuvo', 'Momin', 'Al-Amin', 'Antor', 'Jannat'];
names.splice(3, 1, 'Jahed');
console.log(names);
Output is: [ 'Nabed', 'Shuvo', 'Momin', 'Jahed', 'Antor', 'Jannat' ]

Sort():

If you sorting the all array elements then we can sort method. It’s can be sorted in ascending order. In this method have a simple problem for us, It’s can be sorted only by string element. It can’t be sorted by number element.

const names = ['Nabed', 'Shuvo', 'Momin', 'Al-Amin', 'Antor', 'Jannat'];
names.sort();
console.log(names);
Output is:
[ 'Al-Amin', 'Antor', 'Jannat', 'Momin', 'Nabed', 'Shuvo' ]

--

--