All of JavaScript's array methods you should know
Tags: javascript, webdev, array, methods
Published: 2022-11-14 02:46:04

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

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

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

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

```jsx
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)` 

```jsx
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 

```jsx
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. 

```jsx
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. 

```jsx
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 

```jsx
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 
 

```jsx
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: 

```jsx
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

```jsx
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. 

```jsx
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. 

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

**.isArray()**

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

```jsx
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()

```jsx
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. 

```jsx
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. 

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

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

**.reverse()** 

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

```jsx
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. 

```jsx
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. 

```jsx
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);` 

```jsx
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](https://dev.to/geomukkath) for learning advanced JavaScript in plain english.