There are a couple of javascript array methods which is being asked in many interviews and you should know not because it is asked in interviews but also because it sorts some of your problems in codes.


Here is the list of Array Methods:


.length

Gives us the length of an array


let items = ["pen", "pencil", "paper", "books"]

console.log(items.length);

// 4


.toString()


toString convert array to a comma seprated string.


let items = ["Banana", "Orange", "Apple", "Mango"];

console.log(items.toString());

// Banana, Orange, Apple, Mango



.join()


Join method joins all the array element into a string.

But you can specify seperator in joins.


let items = ["Banana", "Orange", "Apple", "Mango"];

console.log(items.join(" + "));

// Banana + Orange + Apple + Mango


.concat()


This is similar to the string Concat method but it concat arrays.


let items = ["pen", "pencil", "paper", "books"]

let grocery = ["apple", "milk", "bread"]

console.log(items.concat(grocery));

// ["pen", "pencil", "paper", "books", "apple", "milk", "bread"]


.pop()


The pop() method removes the last element from an array.


let items = ["Banana", "Orange", "Apple", "Mango"];

console.log(items.pop());


// ["Banana", "Orange", "Apple"];



.push()

The push() method adds a new element to an array (at the end).


let items = ["Banana", "Orange", "Apple", "Mango"];

console.log(items.push("Kiwi"));


// ["Banana", "Orange", "Apple", "Mango", "Kiwi"];


.shift()


The shift() method removes the first array element and "shifts" all other elements to a lower index.


let items = ["Banana", "Orange", "Apple", "Mango"];

console.log(items.shift());


// ["Orange", "Apple", "Mango"];


.unshift()


The unshift() method adds a new element to an array (at the beginning), and "unshifts" older elements.


let items = ["Banana", "Orange", "Apple", "Mango"];

console.log(items.unshift("Kiwi"));


// ["Kiwi", "Banana", "Orange", "Apple", "Mango"];


.every()


In every method, each element of the array must pass the condition in a function.


Syntax:


array.every(function_name)



let items = ["pen","paper","pencil"];


function isString(item){

    return typeof item === 'string';

}


console.log(items.every(isString)); // true


let items = ["pen","paper","pencil", 23];


function isString(item){

    return typeof item === 'string';

}


console.log(items.every(isString)); // false



.fill()


fills the elements in the array.



let items = ["pen","paper","pencil","glue","scissors"];


console.log(items.fill("crayon", 1,3));// ["pen", "crayon", "crayon","glue","scissors"]


console.log(items.fill("crayon", 1)); // ["pen", "crayon", "crayon", "crayon", "crayon"]


console.log(items.fill("crayon")); // ["crayon", "crayon", "crayon", "crayon", "crayon"]


const arr = Array(10).fill(20);


console.log(arr); // [20, 20, 20, 20, 20, 20, 20, 20, 20, 20]



.filter() 


In every method, we check if every element in the array passes a particular condition. 

In the filter method, we return the elements which pass a particular condition.


let items = ["pen","paper","pencil","glue","scissors"];


const new_items =  items.filter((item) => item.length > 4 );


console.log(new_items); // ["paper", "pencil", "scissors"]


In the above example, we can see new_items return an array where each element has a length greater than 4.


.findIndex()

findIndex simply finds the index of the element in the array.


let items = ["pen","paper","pencil","glue","scissors"];


const new_items =  items.findIndex((item) => item === "paper" );


console.log(new_items); // 1


.flat()


The flat method is used to flatten an array. Flat an array means to reduce the nesting of an array.  


let arr = [1,2,3,[4,5],[6,7,[8,9,10]],11,12];


console.log(arr.flat()); // [1, 2, 3, 4, 5, 6, 7, [8, 9, 10], 11, 12]


One thing we can observe here is that .flat() only flattens one level deep. The array [8,9,10] is still present in our output because it’s 2 levels deep. 

In this case we can do the following


let arr = [1,2,3,[4,5],[6,7,[8,9,10]],11,12];


console.log(arr.flat(2)); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]


When we specify a number as an argument inside flat() we can go as many levels deep as we want. But what if we don’t know how deep the array is then in that case we can use a recursive function to solve that problem. 


Here,


let arr = [1,2,3,[4,5],[6,7,[8,9,10]],11,12];


const result = [];


function flattenArray(arr){

arr.forEach((ele) => (Array.isArray(ele) ? flattenArray(ele) : result.push(ele)));

return result;

}


console.log(flattenArray(arr)); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]



.forEach()


forEach() literally iterates through each object in the array


let items = ["pen","paper","pencil","glue","scissors"];


let arr = items.forEach((item) => console.log(item)); 


/*

pen

paper

pencil

glue

scissors

*/


.from()


.from creates a shallow copy of an array.


let items = ["pen","paper","pencil","glue","scissors"];


let items2 = Array.from(items);


console.log(items2); // ["pen","paper","pencil","glue","scissors"]


Here items2 is a shallow copy of items.


console.log((items === items2)) // false


.isArray()


.isArray() is used to check if something is an array.


let items = ["pen","paper","pencil","glue","scissors"];


console.log(Array.isArray(items)); // true



.flatMap()

The .faltMap() method is going to do two tasks of .flat() and .map()


let arr = [1,2,3,[4],6,7,8,9,10,11,12];


console.log(arr.flatMap((e) => e * 2)); //[2, 4, 6, 8, 12, 14, 16, 18, 20, 22, 24]


As seen above we now have a flattened array with the operation done on each element. 

Note that the flatMap() only flats arrays with one element in it.


.reduce()


The reduce method in JavaScript reduces an array into a single value.


let arr = [1,2,3,4];


console.log(arr.reduce((sum, val) => {

return sum + val

})); // 10


Here reduce() takes two arguments sum and val. val is each value of the array and then it foes the operation inside the curly braces. Later it stores it to sum.


.includes()


.includes() checks if an element is present in an array.


let arr = [1,2,3,4];


console.log(arr.includes(2)); // true


.reverse()


The .reverse() method is used to reverse an array


let arr = [1,2,3,4];


console.log(arr.reverse()); // [4,3,2,1]


.some()


.some() is the opposite of .every() 

If some of the conditions (at least 1) returns true for the condition, the return true.


let arr = [1,2,3,4];


let result = arr.some((e) => (typeof e === "number"));


console.log(result); // true


.sort()


.sort() is used to sort the array. It mutates the original array.


let arr = [12,5,1,6,4];


arr.sort((a,b) => {return a - b });


console.log(arr); //[1, 4, 5, 6, 12]



.splice()


The splice() method is used to delete and replace array elements.


Syntax:

array.splice(startIndex,#ofItemsToDelete, item1, item2, item3);


let arr = [1,2,3,4];

const deletedItems = arr.splice(0,2,5,6,7);

console.log(deletedItems); //[1, 2]

console.log(arr); //[5, 6, 7, 3, 4]


Here the start index is 0, we are deleting 2 items and replacing it with 5,6,7 and 8. 

We get the deleted items array and as mentioned earlier we get the mutated array.


.slice()


The slice() method slices out a piece of an array into a new array.


let items = ["Banana", "Orange", "Apple", "Mango"];

console.log(items.slice(1));


// ["Orange", "Apple", "Mango"];


The slice() method can take two arguments like slice(1, 3).

The method then selects elements from the start argument, and up to (but not including) the end argument.


let items = ["Banana", "Orange", "Apple", "Mango"];

console.log(items.slice(1,3));


// ["Mango"];


 If the end argument is omitted, like in the first examples, the slice() method slices out the rest of the array.


let items = ["Banana", "Orange", "Apple", "Mango"];

console.log(items.slice(2));


// ["Apple", "Mango"]];



I hope you will be going to use these functions, if you know some more function let us know in the comments.