DEV Community

Rahul Kumar
Rahul Kumar

Posted on

1

Mastering JavaScript's Array Powerhouses: forEach, map, filter, reduce, spread, and rest

forEach: Iterating Over Elements

The forEach method iterates over each element in an array, executing a provided callback function for each element.

const numbers = [1, 2, 3, 4, 5];
numbers.forEach(num => {
console.log(num);
});

map: Transforming Elements

The map method creates a new array by applying a provided function to each element of the original array.

const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map(num => num * 2);
console.log(doubledNumbers); // Output: [2, 4, 6, 8, 10]

filter: Selecting Elements

The filter method creates a new array containing only the elements that pass a test implemented by the provided function.

const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(num   => num % 2 === 0);
console.log(evenNumbers); // Output:  
[2, 4]

reduce: Accumulating Values

The reduce method reduces an array to a single value by applying a function against an accumulator and each element in the array.

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((accumulator, currentValue) => accumulator +
currentValue, 0);
console.log(sum); // Output: 15

spread Operator (...): Expanding Elements

The spread operator expands an iterable (array, string, object) into its individual elements.

const numbers = [1, 2, 3];
const newArray = [...numbers, 4, 5];
console.log(newArray); // Output: [1, 2, 3, 4, 5]

rest Operator (...): Gathering Elements
The rest operator collects remaining elements into an array.

function sum(...numbers) {
return numbers.reduce((total, num) => total + num, 0);
}
console.log(sum(1, 2, 3, 4)); // Output: 10

Practical Examples:

  1. Filtering Even Numbers:

const numbers = [1, 2, 3, 4, 5, 6];
const evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // Output: [2, 4, 6]

  1. Creating a New Array with Squared Numbers:

const numbers = [1, 2, 3, 4, 5];
const squaredNumbers = numbers.map(num => num * num);
console.log(squaredNumbers); // Output: [1, 4, 9, 16, 25]

  1. Summing Array Elements:

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((accumulator, currentValue) => accumulator +
currentValue, 0);
console.log(sum); // Output: 15
 

  1. Flattening a Nested Array:

const nestedArray = [[1, 2], [3, 4], [5]];
const flattenedArray = nestedArray.flat();
console.log(flattenedArray); // Output: [1, 2, 3, 4, 5]

SurveyJS custom survey software

JavaScript UI Libraries for Surveys and Forms

SurveyJS lets you build a JSON-based form management system that integrates with any backend, giving you full control over your data and no user limits. Includes support for custom question types, skip logic, integrated CCS editor, PDF export, real-time analytics & more.

Learn more

Top comments (0)

Cloudinary image

Optimize, customize, deliver, manage and analyze your images.

Remove background in all your web images at the same time, use outpainting to expand images with matching content, remove objects via open-set object detection and fill, recolor, crop, resize... Discover these and hundreds more ways to manage your web images and videos on a scale.

Learn more

πŸ‘‹ Kindness is contagious

Please leave a ❀️ or a friendly comment on this post if you found it helpful!

Okay