# Array methods in JavaScript: when to use which 🤔?
## Hey guys 👋
There are a lot of array methods in JavaScript and often we get confused 😕 about which to use when.
In this article I will summarise these methods and do my best to clear about which method should we use according to our needs.
### Let's get started 🚀
As I said we will study the array methods according to our needs, so just think what do you want...
### I want...
### 1. to mutate the original array
#### a) add to original array
i) `.push`:
this method adds an element to the ***end*** of the original array and returns ***the new length of the array***.
```js
let numbers = [1,2,3];
number.push(4);
console.log(numbers) // [1,2,3,4]
```
ii) `.unshift`:
this method is like `.push` method, except it adds the element at the ***start*** of the original array.
```js
let numbers = [2,3,4];
numbers.unshift(1);
console.log(numbers) // [1,2,3,4]
```
#### b) remove from the original array
i) `.pop`:
this method removes the ***last*** element of the array and ***returns the removed element***.
```js
let names = ['Sid', 'Marty', 'John'];
const removedName = names.pop();
console.log(names) // ['Sid', 'Marty']
console.log(removedName) // 'John'
```
ii) `.shift`:
`.shift` is just like `.pop` except it removes the element from the ***start***.
iii) `.splice`:
this method is bit tricky, it can ***remove*** and/or ***add*** the element(s) to the original array.
```js
const fruits = ["Banana", "Orange", "Apple", "Mango"];
// At position 2, remove 1 element and add 2 elements:
fruits.splice(2, 1, "Lemon", "Kiwi");
console.log(fruits) // ["Banana", "Orange", "Lemon", "Kiwi", "Mongo"]
```
Other mutating array methods:
i) `.reverse`
this method reverses an array. The first element becomes the last, and the last array becomes the first.
```js
const array = [1,2,3,4,5]
array.reverse();
console.log(array);
// [5,4,3,2,1]
```
ii) `.sort`
this method sorts the array **in place** and also **returns the sorted array**. This method converts all the element to string and sorts them in ascending order by default.
```js
const months = ['March', 'Jan', 'Feb', 'Dec'];
months.sort();
console.log(months);
// ["Dec", "Feb", "Jan", "March"]
const array1 = [1, 30, 4, 21, 100000];
array1.sort();
console.log(array1);
// [1, 100000, 21, 30, 4]
```
`.sort` receives an optional parameter **a compare function**, which can be used to override the default behaviour of `.sort`.
If *compare function* is supplied all array elements are sorted according to the return value of the compare function.
**compare function** receives two arguments say `a` and `b`. Where `a` is *first element for comparison* and `b` is *second element for comparison.*
- If compareFunction(a, b) returns a value > than 0, sort b before a.
- If compareFunction(a, b) returns a value < than 0, sort a before b.
- If compareFunction(a, b) returns 0, a and b are considered equal.
*I know it sounds confusing 😅 , take a look at the example 👇*.
```js
let numbers = [4, 2, 5, 1, 3];
numbers.sort((a, b) => {
return a - b;
})
console.log(numbers);
// [1,2,3,4,5]
```
iii) `.fill`
The `.fill` method changes all elements in an array to provided value, from a start index (which is 0 by default) to an end index (which is *length of the array* by default).
```js
const array1 = [1, 2, 3, 4];
// fill with 0 from position 2 until position 4
console.log(array1.fill(0, 2, 4));
// [1, 2, 0, 0]
// fill with 5 from position 1
console.log(array1.fill(5, 1));
// [1, 5, 5, 5]
console.log(array1.fill(6));
// [6, 6, 6, 6]
```
### 2. a new array
If you want a new array, please look at the following array methods:
i) `.map`:
As a react developer, `.map` is the most used array method for me. It loops over the array and perform a certain action on each element then returns the ***new array of the same length***.
```js
const numbers = [1,2,3,4];
const numberSqr = numbers.map((num) => num*num);
console.log(numberSqr) // [1,4,9,16]
```
* `.map` receives a callback function, which accepts the following arguments:
i) The current `element` being processed in the array.
ii) `index` of the current `element` being processed in the array.
iii) `array` on which `.map` was called.
- value returned from the callback function will be mapped the corresponding element in the array.
ii) `.filter`:
This methods ***creates a new array*** with all the elements that passed the condition given in the callback function.
```js
const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
const result = words.filter(word => word.length > 6);
console.log(result);
// ["exuberant", "destruction", "present"]
```
iii) `.slice`:
This method returns a copy of the ***portion*** of the array.
```js
const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];
console.log(animals.slice(2));
// ["camel", "duck", "elephant"]
console.log(animals.slice(2, 4));
// ["camel", "duck"]
```
iv) `.concat`:
This method is used to merge two or more arrays. This method does not change the existing arrays, but instead returns a new array.
```js
const letters = ['a', 'b', 'c'];
const numbers = [1, 2, 3];
letters.concat(numbers);
// result is ['a', 'b', 'c', 1, 2, 3]
```
### 3. an array index
i) `.indexOf`:
This method ***returns the first index*** at which a given element can be found in the array, or ***-1*** if it is not present.
```js
const fruits = ['Banana', 'Apple', 'Kiwi'];
console.log(fruits.indexOf('Apple')) // 1
console.log(fruits.indexOf('Orange')) // -1
```
ii) `.findIndex`:
This method **returns the index of the first element** that passed a given condition. Otherwise **-1** indicating that no element passed the condition.
```js
const numbers = [5,9,2,11,5];
const index = numbers.findIndex((element) => element > 8) // 2
const ind = numbers.findIndex((element) => element > 12) // -1
```
### 4. an array element
`.find`:
This method returns the first element which satisfies a provided condition. `undefined` otherwise.
```js
const array1 = [5, 12, 8, 130, 44];
const found = array1.find(element => element > 10);
console.log(found);
// 12
```
### 5. to know if the array includes
i) `.includes`:
This methods returns `true` (if the array contains the element) or `false`.
```js
const friends = ['Jon', 'Joe', 'Jack', 'Jill'];
console.log(friends.includes('Jon')) // true
console.log(friends.includes('Sid')) // false
```
ii) `.some`:
Name of this method sometimes confuse me 😣. This method returns `true` if at least one element passes the given condition.
```js
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
```
iii) `.every`:
This method returns `true` if all the elements in the array pass the given condition, `false` otherwise.
```js
function isBigEnough(element, index, array) {
return element >= 10;
}
[12, 5, 8, 130, 44].every(isBigEnough); // false
[12, 54, 18, 130, 44].every(isBigEnough); // true
```
### 6. a new string
`.join`:
This methods ***joins*** all the element of the array by a given string separator and ***return the string***.
```js
let words = ['JS', 'is', 'amazing'];
// joining the words by space
console.log(words.join(' ')) // 'JS is amazing'
// joining by dash ('-')
console.log(words.join('-')) // 'JS-is-amazing'
```
### 7. to just loop over an array
`forEach`:
This method executes a provided function once for each array element.
```js
const array1 = ['a', 'b', 'c'];
array1.forEach(element => console.log(element));
// 'a'
// 'b'
// 'c'
```
### 8. to transform the array to a single value
`.reduce`:
This methods reduces the array to a **single** `value`.
This `value` can be of any type: `number`, `string`, `boolean`, `array` or `object`.
The reducer function takes four arguments:
a) Accumulator
b) Current Value
c) Current Index
d) Source Array
Reducer function's returned value is assigned to the accumulator, whose value is remembered across each iteration throughout the array, and ultimately becomes the final, single resulting value.
```js
// sum of the elements of the array using .reduce
let numbers = [1,4,5];
const sum = numbers.reduce((acc, el, i, arr) => acc+el);
console.log(sum) // 10
```
Phew, this was a lot to take in 😅.
I hope you guys found this article helpful, if you did please leave a like.
Find me on [twitter](https://www.twitter.com/sidmirza4).
#### Thanks for reading. 💚
#### Happy coding.