map, filter, reduce

map

• create a new array by applying a function to each element of the original array.

• not modify the original array.

🔸 Key Points:

• Transforms each element of the array.
• Returns a new array of the same length.
• Does not change the original array.

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(num => num * 2);

console.log(doubled); // Output: [2, 4, 6, 8, 10]
console.log(numbers); // Output: [1, 2, 3, 4, 5]

filter

• create a new array with all elements that pass the test implemented by the provided function.

• not modify the original array.

🔸 Key Points:

• Filters elements based on a condition.
• Returns a new array with only the elements that pass the test.
• Does not change the original array.

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

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

reduce

• apply a function against an accumulator and each element in the array to reduce it to a single value.

🔸 Key Points:

• Reduces the array to a single value.
• Takes a callback function with an accumulator and current value as arguments.
• The initial value of the accumulator can be specified.

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);

console.log(sum); // Output: 15
console.log(numbers); // Output: [1, 2, 3, 4, 5]

reduce() 함수 호출에서 initialValue를 제공한 경우, accumulator는 initialValue와 같고 currentValue는 배열의 첫 번째 값과 같다.

initialValue를 제공하지 않았다면, accumulator는 배열의 첫 번째 값과 같고 currentValue는 두 번째와 같다.

배열이 비어있는데 initialValue도 제공하지 않으면 TypeError가 발생한다.

배열의 요소가 (위치와 관계없이) 하나 뿐이면서 initialValue를 제공되지 않은 경우, 또는 initialValue는 주어졌으나 배열이 빈 경우엔 그 단독 값을 callback 호출 없이 반환한다.

Reference

MDN
code4Web