CheatSheet Of Most Useful JavaScript Array Functions
Tags: javascript, codenewbie, codequality, node
Published: 2020-07-14 15:03:02

>*As a professional developer, most of my time I have to play with arrays to perform manipulation in data to get the desired outcome.*

>*To play with arrays very well we must have to remember inbuilt array functions, So I make a list of arrays which I use most of my time.*

### These methods are the most used ones, they cover 99% of use cases
---
#### To add/remove elements:

`Array.push(...items)` – adds items to the end,
```
const array = [1, 2, 3, 4]
array.push(10) // 5 (push returns the length of the new array)
// array = [1, 2, 3, 4, 10]
```

`Array.pop()` – extracts an item from the end,
```
const array = [1, 2, 3 , 4]
array.pop() // 4 (pop returns the element removed)
// array = [1, 2, 3]
```

`Array.shift()` – extracts an item from the beginning,
```
const array = [1, 2, 3, 4]
array.shift() // 1(shift returns the removed element)
// array = [2, 3, 4]
```

`Array.unshift(...items)` – adds items to the beginning.
```
const array = [1, 2, 3, 4]
array.unshift(9, 10) // 6 (unshift returns the length of new array)
// array = [9, 10, 1, 2, 3, 4] 
```
`Array.splice(pos, deleteCount, ...items)` – at index pos delete deleteCount elements and insert items.
```
const months = ['Jan', 'March', 'April', 'June'];
months.splice(1, 0, 'Feb');
// inserts at index 1
console.log(months);
// expected output: Array ["Jan", "Feb", "March", "April", "June"]
```

`Array.slice(start, end)` – creates a new array, copies elements from position start till end (not inclusive) into it.
```
const array = [1, 2, 3, 4]
const slicedArray = array.slice(0, 2)
// array = [1, 2, 3, 4]
// slicedArray = [1, 2]
```

`Array.concat(...items)` – returns a new array: copies all members of the current one and adds items to it. If any of items is an array, then its elements are taken.
```
const array = [1, 2, 3, 4]
const concatArray = array.concat([5, 6, 7, 8])
// array = [1, 2, 3, 4]
// concatArray = [1, 2, 3, 4, 5, 6, 7, 8]
```


---

#### To search among elements:

`Array.indexOf/lastIndexOf(item, pos)` – look for item starting from position pos, return the index or -1 if not found.
```
const beasts = ['ant', 'bison', 'camel', 'duck', 'bison'];

console.log(beasts.indexOf('bison'));
// expected output: 1

const animals = ['Dodo', 'Tiger', 'Penguin', 'Dodo'];

console.log(animals.lastIndexOf('Dodo'));
// expected output: 3

```

`Array.includes(value)` – returns true if the array has value, otherwise false.
```
const array1 = [1, 2, 3];

console.log(array1.includes(2));
// expected output: true
```

`Array.find/filter(func)` – filter elements through the function, return first/all values that make it return true.
```
const array = [1, 2, 3, 4]
const filteredArray = array.filter(element => element%2)
// array = [1, 2, 3, 4]
// filteredArray = [1, 3]
```

`Array.findIndex(func)` - like find, but returns the index instead of a value.
```
const array1 = [5, 12, 8, 130, 44];

const isLargeNumber = (element) => element > 13;

console.log(array1.findIndex(isLargeNumber));
// expected output: 3

```
---
#### To iterate over elements:

`Array.forEach(func)` – calls func for every element, does not return anything.
```
const array = [1, 2, 3, 4]
array.forEach((element, index) => {
   console.log(`Element ${element} at index ${index}`)
})

\\ Element 1 at index 0
\\ Element 2 at index 1
\\ Element 3 at index 2
\\ Element 4 at index 3
```


#### To transform the array:

`Array.map(func)` – creates a new array from results of calling func for every element.
```
const array = [1, 2, 3, 4]
const mapArray = array.map(element => element * 2)
// array = [1, 2, 3, 4]
// mapArray = [2, 4, 6, 8]
```

`Array.sort(func)` – sorts the array in-place, then returns it.
```
const months = ['March', 'Jan', 'Feb', 'Dec'];
months.sort();
console.log(months);
// expected output: Array ["Dec", "Feb", "Jan", "March"]
```

`Array.reverse()` – reverses the array in-place, then returns it.
```
const array1 = ['one', 'two', 'three'];
const reversed = array1.reverse();
console.log('reversed:', reversed);
// expected output: "reversed:" Array ["three", "two", "one"]
```

`Array.split()/Array.join()` – convert a string to array and back.
```
const elements = ['Fire', 'Air', 'Water'];

console.log(elements.join());
// expected output: "Fire,Air,Water"

const string = "Fire,Air,Water";
console.log(string.split(','));
// output: ["Fire", "Air", "Water"] 

```
`Array.reduce(func, initial)` – calculate a single value over the array by calling func for each element and passing an intermediate result between the calls.
```
const array = [1, 2, 3, 4]
const result = array.reduce((accumulator, current) => (
   accumulator + current
), 10)
// array = [1, 2, 3, 4]
// result = 20
```
---
#### Additionally:

`Array.isArray(arr)` - checks arr for being an array.
```
Array.isArray([1, 2, 3]);  // true
Array.isArray({foo: 123}); // false
```
`Array.keys()` - returns a new Array Iterator object that contains the keys for each index in the array.
```
const array1 = ['a', 'b', 'c'];
const iterator = array1.keys();

for (const key of iterator) {
  console.log(key);
}

// expected output: 0
// expected output: 1
// expected output: 2
```
`Array.values()` -  returns a new Array Iterator object that contains the values for each index in the array.

```
const array1 = ['a', 'b', 'c'];
const iterator = array1.values();

for (const value of iterator) {
  console.log(value);
}

// expected output: "a"
// expected output: "b"
// expected output: "c"
```
`Array.some()` - at least one element in the array passes the test implemented by the provided function. It returns a Boolean value.
```
const array = [1, 2, 3, 4, 5];

// checks whether an element is even
const even = (element) => element % 2 === 0;

console.log(array.some(even));
// expected output: true
```
`Array.every()` - all elements in the array pass the test implemented by the provided function. It returns a Boolean value.
```
const isBelowThreshold = (currentValue) => currentValue < 40;

const array1 = [1, 30, 39, 29, 10, 13];

console.log(array1.every(isBelowThreshold));
// expected output: true
```