Day to Day Array Methods
In my last blog, we went through the basics of arrays in JS, this time we would be levelling up a little and would discuss the common array methods that come handy every now and then, but before that lets have a brief recap of what an Array is and what methods actually mean.
What is an Array in JS?
In JavaScript, an array is a special type of object used to store an ordered collection of multiple values under a single variable name. Each value in an array is called an element and is accessed by its numeric position, or index, which is zero-based (the first element is at index 0).
What are Methods?
In JS, a method is a function that is stored as a property of an object or a class, designed to perform actions on the data contained within that specific object or class, using the this keyword to access and modify its properties.
Common Array Methods
JS being a generous language, comes packed with a lot of methods for array which often reduce our task of writing particular logics to perform something on that array. We would be discussing a few of them over here
push() & pop()
Push and Pop are like brothers, they just love doing things in opposite sense,
push() is used to add element(s) at the end of the array, it returns the length of the modified array. It also modifies the original array.
const runs_this_over = [1,4,2]
//suppose the batsman hits a 6 in the next ball
runs_this_over.push(6)
pop() is used to remove the last element from the array it is used on, however it does not return the final length but returns the element that was removed and then modifies the original array with one element less. Running pop() on an empty array will return undefined.
const tasks_to_do = ["cleaning", "eating", "sleeping"]
//you would have done the sleeping, and want to remove it from tasks, so you do:
const popped = tasks_to_do.pop()
console.log(popped); // "sleeping"
console.log(tasks_to_do); //["cleaning", "eating"]
shift() & unshift()
shift() and unshift() could be called the distant relative of push() and pop() .
You see push() will push an element at the end of the array and return the modified array length, unshift() does the same, it's just that, it pushes element(s) at the beginning of the array. It will return the length of the modified array and modify the original array as well.
const techStack = ["CPP", "JS"]
console.log(techStack.unshift("Java","Python")) //4
console.log(techStack) //["Java","Python","CPP", "JS"]
pop() will remove the last element from the array and return the element that was popped, well shift() does something similar, it removes an element from the beginning of the array and return the element it removed and modifies the original array. If you try to use shift() on an empty array it returns undefined.
const easyTaskFirst = ["reading", "writing", "researching"]
const easiestTask = easyTaskFirst.shift();
console.log(easyTaskFirst) // ["writing", "researching"]
console.log(easiestTask) // "reading"
map()
The map() method of the array will return a new array populated with the result of the callback function passed to it on every element in the calling array.
const multiply = (n)=> n*2;
const employeePayment = [10, 20, 30];
const newPayments = employeePayment.map(multiply);
filter()
The filter() method of the array will return a shallow copy of a portion of given array, consisting of elements from the calling array which pass the callback function given to it.
const arr = [
{ name: "A", age: 20 },
{ name: "B", age: 25 },
{ name: "C", age: 30 }
];
const filtered = arr.filter(person => person.age > 20);
console.log(filtered);
// [
// { name: "B", age: 25 },
// { name: "C", age: 30 }
// ]
filtered[0].age = 99;
console.log(arr); //shallow copy
// [
//{ name: "A", age: 20 },
//{ name: "B", age: 99 },
//{ name: "C", age: 30 }
// ]
forEach()
The forEach() is an array method that executes a function once for each element in the array, but does not return a new array.
const arr = [1,2,3];
arr.forEach((value, index, array) => {
array[index] = value * 2;
});
console.log(arr); //[2,4,6]
reduce()
In my opinion reduce is the star of the array methods, my personal favorite and I would be making a seperate blog to discuss how cool it is to use. So I would limit the usage and power of reduce() in this blog to a great extent.
reduce() is an array method that combines all elements of an array into a single value by repeatedly applying a function.
array.reduce((accumulator, currentValue) => {
// logic
}, initialValue);
accumulator → stores the running result
currentValue → current element being processed
initialValue → starting value of the accumulator
const arr = [1, 2, 3, 4];
const sum = arr.reduce((acc, num) => acc + num, 0);
console.log(sum); //10
Conclusion
In this section, we explored some of the most commonly used JavaScript array methods and how they help us work with collections of data more efficiently.
Methods like push() and pop() allow us to add or remove elements from the end of an array, while shift() and unshift() perform similar operations at the beginning of the array. We also looked at methods used for processing array elements, such as map(), which creates a new array by transforming each element, and filter(), which produces a new array containing only the elements that satisfy a given condition. The reduce() method helps combine all elements of an array into a single value by repeatedly applying a function. Finally, forEach() was introduced as a way to execute a function for every element in an array, typically used when performing actions or side effects rather than creating new data structures.
Together, these methods provide powerful and expressive ways to manipulate arrays and form the foundation for writing clean and functional JavaScript code.
