All of JavaScript's array methods you should know

.length()
Gives us the length of the array.

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

console.log(items.length);// 3  

.concat()
Exactly the same as the strings concat method.

let items = ["pen","paper","pencil"];
let grocery = ["bread", "milk", "eggs"];

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

//["pen", "paper", "pencil", "bread", "milk", "eggs"]

We don not have any ‘+’ concat method for arrays

.every()
In every method, each element of the array must pass the condition in a function
The syntax here is 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()
The fill method as the name suggests fills the array with the item that has been passed

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]

Here the index 1 upto 3 (excluding 3) are filled with the string entered.

.filter()
In the 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. What do you mean by flattening an array ?
Flattening an array simply means that if you are presented an array like so

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. In that case we can use a recursive function to solve that problem. Pls refer below:

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.
Pls 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.

The syntax for splice() is 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.

Follow Geo Mukkath for learning advanced JavaScript in plain english.