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.

Otherwise, let's get started.

• Mutator array methods

  • sort()
  • unshift()
  • shift()
  • splice()
  • push()
  • reverse()
  • pop()
  • fill()
  • forEach()

• Non-mutator array methods

  • slice()
  • join()
  • includes()
  • filter()
  • concat()
  • every()
  • find()
  • findIndex()
  • map()
  • reduce()
  • some()
  • flat()
  • flatMap()

Mutator array methods

These following methods will modify the array.

sort()

It sorts the elements of an array.

return value: the sorted array.

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.

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.

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 contain the deleted elements/element. If no element is removed, it returns an empty array.

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.

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

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

reverse()

It reverses an array.

return value: the reversed array.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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

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