Originally posted on my blog
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
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 contains 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]
Top comments (5)
I think forEach is incorrectly categorized as a mutator function, since it does not modify the array itself, it only might modify the state of the objects inside the array. Actually, most of the non-mutator functions can also modify the state of the objects, for example map and filter.
ForEach itself does not mutate the array. But the function passed as parameter can mutate the array. And mostly forEach is used with a function parameter therefore it's more a mutator than a non-mutator. For the others,
mapandfilterthey both return a new array andreducereturn a single value. But overall they does not mutate the original array.You pass a function to map and filter as well, so they are also able to change the state of the object. Obviously, it's a bad practice to do so but still possible.
You have to reassign e.g. arr = arr.map(x=>x**x), since arr.map(x=>x*x) won't change arr itself, it is new array, same as .filter.
Nice overview. But yes, I would not say .forEach() mutates too, since it is just kind of loop function - passed function may or may not mutate array on which it runs, it could be used for some side effects, it could be used to modify totally different array/object - it is just a loop over items in array and it does not imply any kind of function / computation in that loop.