10 Javascript Array Methods You should know

In this blog, I will try to explain the 10 most important Javascript Array methods. So without a very long intro, let's get started.

We know about array, right?

An array is a data structure that contains a group of elements that are all of the same data types, such as an integer or string

Now let's explore the 10 most important methods of Javascript Array.

1. Concat(): Suppose, we have two or more arrays. We need to merge these arrays. Then we simply use this concat() method

const arr1 = [1,2,3];
const arr2 = [4,5,6];
const arr3 = arr1.concat(arr2);
console.log(arr3);
// expected output: Array [1, 2, 3, 4, 5, 6]

This method won't change our existing arrays but instead return a new array.

2. Every(): Suppose, we need to test all elements of an array whether it's odd or even. Then what we will think first? for loop, right? But using every() method we can do this easily. This method test whether all the elements of an array pass the test provided by a function or simply a condition. If it can pass it will return true otherwise false.

const numbers = [1, 3, 5, 7, 13];
const isAllOdd = (n) => (n%2) > 0;
console.log(numbers.every(isAllOdd));
// expected output: true

3. FindIndex(): This method returns the first index of an array under a testing function. Suppose, we have to find the index of an element that is dividable by 5.

const numbers = [2, 8, 10, 15, 20, 9, 35];
const isDividable = (n) => (n % 5) === 0;
console.log(numbers.findIndex(isDividable));
// expected output: 2

Look, here we have 3 more numbers dividable by 5 which are 15, 20, and 35 but it returns 2 (index of 10) because it's the first index satisfied by the function.

4. IndexOf(): This method is very simple. It returns the first index of an element of an array. If a given element won’t present in the array, then this method will return -1.

const fruits = ['Apple', 'Mango', 'Banana', 'Lithci', 'Mango'];
console.log(fruits.indexOf('Mango'));
// expected output: 1
console.log(fruits.indexOf('Dragonfruit'));
// expected output: -1

5. LastIndexOf(): This method is quite opposite of indexOf() method. indexOf() returns the first index of an element of the array, right? But lastIndexOf() method returns the last index of an element of the array. If a given element won't present in the array, then this method will return -1.

const fruits = ['Apple', 'Mango', 'Banana', 'Lithci', 'Mango'];
console.log(fruits.lastIndexOf('Mango'));
// expected output: 4
console.log(fruits.lastIndexOf('Dragonfruit'));
// expected output: -1

6. Reverse(): This method is used to reverse an Array.

const arr = [1,2,3,4,5,6,7,8,9];
console.log(arr);
// expected output: Array [1, 2, 3, 4, 5, 6, 7, 8, 9]

Very simple, right?

7. Shift(): This method simply removes the first element from an array. It also returns the removed element. And, obviously, it changes the length of the array.

const arr = [15, 20, 43, 55, 48];
const firstElement = arr.shift();
console.log(arr);
// expected output: Array [20, 43, 55, 48]
console.log(firstElement);
// expected output: 15

8. Unshift(): This method is the opposite of the shift() method. shift() removes the first element from an array, right? But unshift() adds one or more elements at the beginning of an array whereas push() adds one element at the end of the array. It also returns the new length of the array.

const arr = [4, 5, 6, 7];
const newSize = (arr.unshift(1, 2, 3));
console.log(newSize);
// expected output: 7
console.log(arr);
// expected output: Array [1, 2, 3, 4, 5, 6, 7]

9. Join(): This method is very interesting. This method concatenates all of the elements of the array and returns them as a string. Interesting, right? We can separate those elements by a comma or any separator string.

const fruits = ['Apple', 'Mango', 'Banana', 'Lithci', 'Mango'];
console.log(fruits.join());
// expected output: "Apple,Mango,Banana,Lithci,Mango"
console.log(fruits.join(''));
// expected output: "AppleMangoBananaLithciMango"
console.log(fruits.join('+'));
// expected output: "Apple+Mango+Banana+Lithci+Mango"
console.log(fruits.join('-'));
// expected output: "Apple-Mango-Banana-Lithci-Mango"

10. Filter(): Suppose, we have an array of some numbers. Now we want to keep those numbers that are greater than 5. We can easily do this by using the filter() method. This method creates a new array with the elements that satisfied the given condition. Let's see how.

const numbers = [2,3, 4,2,4,5, 6,9,13, 3];
const newNumbers = numbers.filter(number => number > 5);
console.log(newNumbers);
// expected output: Array [6, 9, 13]

That's all for this blog. Thanks for reading.😊

Hope to see you on the next blog.