In this article we'll explore all must know array methods with easy explanations along with good examples. Before jumping on array methods lets clarify the understanding of array.
What is Array?
Arrays are zero-indexed ordered collection of values stored in a single variable. They are special type of objects in JavaScript. Arrays are passed by reference and not passed by value. Arrays in JavaScript are resizable unlike some other languages. In other words array elements can be added or removed and the length property automatically updates.
create array
Array can be created using two ways in JavaScript:
- Array Literal (most used)
const arr = [];
- Array Constructor
const arr = new Array()
What are Array Methods and Why are They Needed?
Array methods are pre-built functions which perform specific tasks. It's availability make developers life easy, saves times and reduces bug for such tasks. So yeah... they are great help. So knowing how they work and which method performs what is a must know! Now we'll explore the important, most used array methods and will also consider which method mutates original array.
Array Method:
push()
Push: add a new element at the end of the array and mutates the original array and return new length.
const arr = [1,2,3,4,5]
console.log(arr.push(6))// 6 - new length
console.log(arr) // [1,2,3,4,5,6]
pop()
pop: remove last element of the array returns removed element and mutates original array.
const arr = [1,2,3,4,5]
console.log(arr.pop()) // 5 -> remove last element and return it
console.log(arr) // [1,2,3,4] -> change original
shift()
shift: remove element from the start, returns removed element and mutates original array.
const arr = [1,2,3,4,5]
console.log(arr.shift()) // 1 -> remove first element and return it
console.log(arr) // [2,3,4,5] -> change original
unshift()
unshift: add element at the start , return new length and change original array.
const arr = [1,2,3,4,5]
console.log(arr.unshift(0)) // 6 -> return new length
console.log(arr) // [0,1,2,3,4,5] -> change original
map()
map: map method accepts a function (callback) and perform the function on each element , it returns new array and does not mutates original array.
const arr = [1,2,3,4];
const result = arr.map((i)=> i*2)
console.log(result); // [2,4,6,8]
reduce()
reduce: takes a callback and initializer( if initial value is not given then by default first element becomes initial value). This method performs the callback on each element and reduces the values to single value and return it. It does not mutates original array.
syntax:
array.reduce(callback, initial value)
const arr = [1,2,3,4,5]
const result = arr.reduce((pv,cv)=> pv + cv,0);
console.log(result) // 15
filter()
filter: accepts callback which performs the function on each element, returns new array of only those element which are true for callback. It does not mutates original array.
const arr = [10,20,30,40,50];
const result = arr.filter((e)=> e > 20);
console.log(result); // [30,40,50]
forEach()
forEach; takes callback which performs on each element of the array. forEach does not return anything, it returns undefined therefore it can not be chained. forEach itself does not mutate the array, but you can mutate the array inside the callback.
const arr = [1, 2, 3];
// This will NOT mutate the array (primitives passed by value)
arr.forEach(function(element) {
element = element * 2; // Changes local copy only
});
console.log(arr); // Output: [1, 2, 3]
// This WILL mutate the array (explicit assignment using index)
arr.forEach(function(element, index, theArray) {
theArray[index] = element * 2; // Modifies the original array
});
console.log(arr); // Output: [2, 4, 6]
forEach() is ideal for performing an action on each item where you do not need to create a new array, such as:
Logging array elements to the console.
Updating the DOM (Document Object Model).
Modifying an external variable (side effects)
Conclusion
In this article we cover basic but important array methods which are a must know for any developer. You can only optimize things that you understand.. So now that you know these methods practice a lot in console.
Keep being happy keep coding!
