Introduction

The goal of this tutorial is to introduce you to some of the most powerful and commonly used array methods in JavaScript: map(), filter(), and reduce(). These methods are crucial to understand as they help in manipulating and managing data in JavaScript arrays efficiently.

After completing this tutorial, you will be able to:
- Understand and use map(), filter(), and reduce() methods.
- Iterate over arrays using these methods.
- Manipulate and manage data in arrays more efficiently.

This tutorial assumes you have basic understanding of JavaScript and its syntax.

Step-by-Step Guide

Array.map()

The map() method creates a new array with the results of calling a provided function on every element in the array.

const array1 = [1, 4, 9, 16];

// pass a function to map
const map1 = array1.map(x => x * 2);

console.log(map1);
// expected output: Array [2, 8, 18, 32]

In this example, we've used map() to multiply every element in the array by 2.

Array.filter()

The filter() method creates a new array with all elements that pass the test implemented by the provided function.

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => word.length > 6);

console.log(result);
// expected output: Array ["exuberant", "destruction", "present"]

Here, filter() is used to get all words in the array with length greater than 6.

Array.reduce()

The reduce() method executes a reducer function (that you provide) on each element of the array, resulting in single output value.

const array1 = [1, 2, 3, 4];
const reducer = (accumulator, currentValue) => accumulator + currentValue;

// 1 + 2 + 3 + 4
console.log(array1.reduce(reducer));
// expected output: 10

In this example, reduce() is used to sum up all the elements of the array.

Code Examples

Using map()

const numbers = [1, 2, 3, 4, 5];

// We'll use map to square each number
const squares = numbers.map(number => number * number);

console.log(squares);
// expected output: [1, 4, 9, 16, 25]

Using filter()

const numbers = [1, 2, 3, 4, 5, 6];

// We'll use filter to get only even numbers
const evens = numbers.filter(number => number % 2 === 0);

console.log(evens);
// expected output: [2, 4, 6]

Using reduce()

const numbers = [1, 2, 3, 4, 5];

// We'll use reduce to get the product of all numbers
const product = numbers.reduce((total, number) => total * number, 1);

console.log(product);
// expected output: 120

Summary

In this tutorial, we've explored three powerful array methods: map(), filter(), and reduce(). These methods are crucial for efficiently manipulating and managing data in JavaScript arrays.

To continue learning, you can explore other array methods like find(), some(), every(), includes(), etc.

Practice Exercises

1. Use the map() method to double each number in an array.
2. Use the filter() method to get all numbers greater than 50 from an array.
3. Use the reduce() method to find the maximum number in an array.

Solutions

// Exercise 1
const numbers = [10, 20, 30, 40, 50];
const doubles = numbers.map(number => number * 2);
console.log(doubles); // [20, 40, 60, 80, 100]

// Exercise 2
const numbers = [10, 20, 30, 40, 50, 60, 70, 80, 90, 100];
const greaterThanFifty = numbers.filter(number => number > 50);
console.log(greaterThanFifty); // [60, 70, 80, 90, 100]

// Exercise 3
const numbers = [10, 20, 30, 40, 50, 60, 70, 80, 90, 100];
const maxNumber = numbers.reduce((max, number) => Math.max(max, number), -Infinity);
console.log(maxNumber); // 100

Keep practicing to get more comfortable with these concepts!