JavaScript array methods: Mutator VS Non-mutator and the returning value
Tags: javascript, beginners
Published: 2020-01-16 15:49:29

Originally posted on [my blog](https://www.ibrahima-ndaw.com/blog/javascript-array-methods-mutators-vs-non-mutators/)

JavaScript array methods enable us to manipulate our data. However, we've to use them with care depending on how they manipulate our arrays. Some of them rely on immutability and some others use the mutable way. And knowing how they manipulate our data can help us to build predictable apps.

In this post, I will lead you through mutator and non-mutator array methods and their returning value.

Notice this article is not an introduction to array methods. I will focus on mutability and immutability. So, If you're new to array methods, this post might help you.
{% link ibrahima92/15-must-know-javascript-array-methods-in-2020-1kd8 %}

Otherwise, let's get started.

- [Mutator array methods](#mutator-array-methods)
  - [sort()](#sort)
  - [unshift()](#unshift)
  - [shift()](#shift)
  - [splice()](#splice)
  - [push()](#push)
  - [reverse()](#reverse)
  - [pop()](#pop)
  - [fill()](#fill)
  - [forEach()](#foreach)
- [Non-mutator array methods](#non-mutator-array-methods)
  - [slice()](#slice)
  - [join()](#join)
  - [includes()](#includes)
  - [filter()](#filter)
  - [concat()](#concat)
  - [every()](#every)
  - [find()](#find)
  - [findIndex()](#findindex)
  - [map()](#map)
  - [reduce()](#reduce)
  - [some()](#some)
  - [flat()](#flat)
  - [flatMap()](#flatmap)

## Mutator array methods

These following methods will modify the array.

### sort()

It sorts the elements of an array.

**return value**: the sorted array.

```javascript
const myAwesomeArray = [5, 4, 3, 2, 1]

// Sort from smallest to largest
myAwesomeArray.sort((a, b) => a - b)
//------->return value: [1, 2, 3, 4, 5]
```

### unshift()

It adds one or more elements to the beginning of an array.

**return value**: the new length of the array.

```javascript
const myAwesomeArray = [5, 4, 3, 2, 1]

myAwesomeArray.unshift(6)
//------->return value: (6)
```

### shift()

It removes the first element from an array.

**return value**: the removed element or `undefined` if the array is empty.

```javascript
const myAwesomeArray = [5, 4, 3, 2, 1]

myAwesomeArray.shift()
//------->return value: (5)
```

### splice()

It removes or replaces existing elements and/or adds new elements.

**return value**: The array which contains the deleted elements/element. If no element is removed, it returns an empty array.

```javascript
const myAwesomeArray = [5, 4, 3, 2, 1]

myAwesomeArray.splice(0, 1, 8)
//------->return value: [5]
```

### push()

It adds one or more elements to the end of an array.

**return value**: the new length of the array.

```javascript
const myAwesomeArray = [5, 4, 3, 2, 1]

myAwesomeArray.push(7)
//------->return value: (6)
```

### reverse()

It reverses an array.

**return value**: the reversed array.

```javascript
const myAwesomeArray = ["e", "d", "c", "b", "a"]

myAwesomeArray.reverse()
//------->return value: ['a', 'b', 'c', 'd', 'e']
```

### pop()

It removes the last element from an array.

**return value**: the removed element from the array or `undefined` if the array is empty.

```javascript
const myAwesomeArray = [5, 4, 3, 2, 1]

myAwesomeArray.pop()
//------->return value: 1
```

### fill()

It fills all the elements of an array with the same value.

**return value**: the modified array.

```javascript
const myAwesomeArray = [1, 2, 3, 4, 5]

myAwesomeArray.fill(0, 1, 3)
//------->return value: [1, 0, 0, 4, 5]
```

### forEach()

It applies a function to each element of the array.

**return value**: it returns `undefined`.

```javascript
const myAwesomeArray = [
  { id: 1, name: "john" },
  { id: 2, name: "Ali" },
  { id: 3, name: "Mass" },
]

myAwesomeArray.forEach(element => console.log(element.name))
//------->return value: undefined
```

## Non-mutator array methods

These following methods do not modify the array and return some representation of the array.

### slice()

It extracts a section of a given array.

**return value**: the new array with the extracted elements.

```javascript
const myAwesomeArray = [1, 2, 3, 4, 5]

myAwesomeArray.slice(0, 3)
//------->return value: [1, 2, 3]
```

### join()

It joins all elements of an array into a string.

**return value**: a string with all array elements concatenated or the empty string if the array is empty.

```javascript
const myAwesomeArray = ["JavaScript", "is", "awesome"]

myAwesomeArray.join(" ")
//------->return value: "JavaScript is awesome"
```

### includes()

It determines whether the array contains a given value or not.

**return value**: it returns a boolean `true` or `false`.

```javascript
const myAwesomeArray = [1, 2, 3, 4, 5]

myAwesomeArray.includes(3)
//------->return value: true
```

### filter()

It filters an array with a function to check which element passes the test.

**return value**: the new array with elements that pass the test otherwise an empty array.

```javascript
const myAwesomeArray = [
  { id: 1, name: "john" },
  { id: 2, name: "Ali" },
  { id: 3, name: "Mass" },
  { id: 4, name: "Mass" },
]

myAwesomeArray.filter(element => element.name === "Mass")
//-------> return value : [{id: 3, name: "Mass"},
//                  {id: 4, name: "Mass"}]
```

### concat()

It will merge two or more arrays/values by concatenating it.

**return value**: the new array with arrays/values concatenated.

```javascript
const myAwesomeArray = [1, 2, 3, 4, 5]
const myAwesomeArray2 = [10, 20, 30, 40, 50]
myAwesomeArray.concat(myAwesomeArray2)
//-------> return value : [1, 2, 3, 4, 5, 10, 20, 30, 40, 50]
```

### every()

It checks whether all elements in the array pass the test function or not.

**return value**: it returns a boolean `true` or `false`.

```javascript
const myAwesomeArray = ["a", "a", "a", "a", "a"]

myAwesomeArray.every(test => test === "a")
//-------> return value : true
```

### find()

It finds the element that satisfies the provided testing function.

**return value**: the first element that satisfies the testing function otherwise it returns `undefined`.

```javascript
const myAwesomeArray = [
  { id: 1, name: "john" },
  { id: 2, name: "Ali" },
  { id: 3, name: "Mass" },
]

myAwesomeArray.find(element => element.id === 3)
//-------> return value : {id: 3, name: "Mass"}
```

### findIndex()

It returns the index of an element found and which satisfies the test function.

**return value**: the index of the first element that satisfies the testing function otherwise it returns `-1`.

```javascript
const myAwesomeArray = [
  { id: 1, name: "john" },
  { id: 2, name: "Ali" },
  { id: 3, name: "Mass" },
]

myAwesomeArray.findIndex(element => element.id === 3)
//-------> return value : 2
```

### map()

It takes a function as an argument that will run on all elements on the array.

**return value**: a new array that contains each element being the result of the callback function.

```javascript
const myAwesomeArray = [5, 4, 3, 2, 1]
myAwesomeArray.map(x => x * x)

//-------> return value : [25, 16, 9, 4, 1]
```

### reduce()

It executes a reducer function on each element of the array.

**return value**: a single value which results from the reduction of the array.

```javascript
const myAwesomeArray = [1, 2, 3, 4, 5]

myAwesomeArray.reduce((total, value) => total * value)
//-------> return value = 120
```

### some()

It determines whether at least one element in the array matches the test function or not.

**return value**: it returns a boolean `true` or `false`.

```javascript
const myAwesomeArray = ["a", "b", "c", "d", "e"]

myAwesomeArray.some(test => test === "d")
//-------> return value : true
```

### flat()

It flats all sub-array elements into a new array.

**return value**: a new array with the sub-array elements concatenated into it.

```javascript
const myAwesomeArray = [[1, 2], [3, 4], 5]

myAwesomeArray.flat()
//-------> return value : [1, 2, 3, 4, 5]
```

### flatMap()

It applies a function to each element of the array and then flattens the result into an array.

**return value**: a new array with each element being the result of the callback function and flattened.

```javascript
const myAwesomeArray = [[1], [2], [3], [4], [5]]

myAwesomeArray.flatMap(arr => arr * 10)
//-------> return value : [10, 20, 30, 40, 50]
```

| [TWITTER](https://twitter.com/ibrahima92_) | [BLOG](https://www.ibrahima-ndaw.com/) | [NEWSLETTER](https://ibrahima-ndaw.us5.list-manage.com/subscribe?u=8dedf5d07c7326802dd81a866&id=5d7bcd5b75) | [GITHUB](https://github.com/ibrahima92) | [LINKEDIN](https://www.linkedin.com/in/ibrahima-ndaw/) | [CODEPEN](https://codepen.io/ibrahima92) | [DEV](https://dev.to/ibrahima92) |
| -------------- | ------------------------------------------ | ----------------------------------------- | ----------------------------------------------------------------------------------------------------------- | ----------------------------- | ------------------------------------------------------ | ---------------------------------------- | -------------------------------- |