Javascript Array Methods Push Pop Shift Map Filter Reduce Complete Guide
Understanding the Core Concepts of JavaScript Array Methods push, pop, shift, map, filter, reduce
1. Push
The push method adds one or more elements to the end of an array and returns the new length of the array.
let fruits = ["apple", "banana"];
fruits.push("orange"); // ["apple", "banana", "orange"]
fruits.push("grape", "pear"); // ["apple", "banana", "orange", "grape", "pear"]
Importance: Essential for adding elements to the end of an array. This method is used frequently to accumulate items dynamically.
2. Pop
The pop method removes the last element from an array and returns that element.
let fruits = ["apple", "banana", "orange"];
let lastFruit = fruits.pop(); // "orange"
// fruits is now ["apple", "banana"]
Importance: Useful when you need to remove items from the end of an array and retrieve them for further processing.
3. Shift
The shift method removes the first element from an array and returns that element.
let fruits = ["apple", "banana", "orange"];
let firstFruit = fruits.shift(); // "apple"
// fruits is now ["banana", "orange"]
Importance: Complements pop by removing items from the start instead of the end, which is helpful for queues or FIFO operations.
4. Map
The map method creates a new array populated with the results of calling a provided function on every element in the original array.
let numbers = [1, 2, 3];
let doubled = numbers.map(num => num * 2); // [2, 4, 6]
Importance: Ideal for transforming data in an array without modifying the original array. It's widely used in rendering components in frameworks like React.
5. Filter
The filter method creates a new array containing all elements that pass the test implemented by the provided function.
let numbers = [1, 2, 3, 4, 5];
let evens = numbers.filter(num => num % 2 === 0); // [2, 4]
Importance: Enables precise selection of array elements based on conditions, facilitating cleaner and more intuitive code for data manipulation tasks.
6. Reduce
The reduce method executes a reducer function on each element of the array, resulting in a single output value.
let numbers = [1, 2, 3, 4];
let sum = numbers.reduce((total, num) => total + num, 0); // 10
// Accumulate an object where keys are items and values are their counts
let names = ["Alice", "Bob", "Alice", "Charlie"];
let nameCounts = names.reduce((acc, name) => {
acc[name] = (acc[name] || 0) + 1;
return acc;
}, {});
// nameCounts is { Alice: 2, Bob: 1, Charlie: 1 }
Importance: A powerful tool for aggregation and accumulation. Used in numerous scenarios, from summing values to flattening arrays.
General Keyword Summary:
- Push: Adds elements to the end, returns new length.
- Pop: Removes end element, returns removed item.
- Shift: Removes start element, returns removed item.
- Map: Transforms each element based on condition, returns new array.
- Filter: Selects elements that meet condition, returns new array.
- Reduce: Aggregates array into single value, useful for summation and object creation.
Online Code run
Step-by-Step Guide: How to Implement JavaScript Array Methods push, pop, shift, map, filter, reduce
1. push()
The push() method adds one or more elements to the end of an array and returns the new length of the array.
Example:
// Initialize an array
let fruits = ['Apple', 'Banana'];
// Add an element to the end of the array
fruits.push('Cherry');
console.log(fruits); // Output: ['Apple', 'Banana', 'Cherry']
// Adding multiple elements
fruits.push('Date', 'Elderberry');
console.log(fruits); // Output: ['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry']
2. pop()
The pop() method removes the last element from an array and returns that element. This method changes the length of the array.
Example:
// Initialize an array
let fruits = ['Apple', 'Banana', 'Cherry', 'Date'];
// Remove the last element from the array
let removedFruit = fruits.pop();
console.log(fruits); // Output: ['Apple', 'Banana', 'Cherry']
console.log(removedFruit); // Output: Date
3. shift()
The shift() method removes the first element from an array and returns that element. This method changes the length of the array.
Example:
// Initialize an array
let fruits = ['Apple', 'Banana', 'Cherry'];
// Remove the first element from the array
let firstFruit = fruits.shift();
console.log(fruits); // Output: ['Banana', 'Cherry']
console.log(firstFruit); // Output: Apple
4. map()
The map() method creates a new array populated with the results of calling a provided function on every element in the calling array.
Example:
// Initialize an array
let numbers = [1, 2, 3, 4];
// Create a new array with doubled values
let doubledNumbers = numbers.map(function(number) {
return number * 2;
});
console.log(numbers); // Output: [1, 2, 3, 4]
console.log(doubledNumbers); // Output: [2, 4, 6, 8]
5. filter()
The filter() method creates a new array with all elements that pass the test implemented by the provided function.
Example:
// Initialize an array
let numbers = [1, 2, 3, 4, 5];
// Create a new array with even numbers
let evenNumbers = numbers.filter(function(number) {
return number % 2 === 0;
});
console.log(numbers); // Output: [1, 2, 3, 4, 5]
console.log(evenNumbers); // Output: [2, 4]
6. reduce()
The reduce() method executes a reducer function (that you provide) on each element of the array, resulting in a single output value.
Example:
Login to post a comment.