[Javascript] filter / map / reduce 기능, 구조, 예제코드 (feat.ES6)

척척 프로그래밍, 인프준

 

 

 

 

 

 

 

들어가며

Javascript 내장함수 Filter & Map & Reduce, 모두 2009년 발표된 ES5( ECMAScript 5 )에서 처음 도입되었습니다. 그 이전 버전인 ES3에서는 이러한 함수의 기능들을 모두 직접 구현해야 했지만 ES5의 등장으로 더욱 쉽고 간편하게 사용할 수 있게 되었습니다.

 

그러나 ES6부터는 Arrow Function과 같은 새로운 구문과 함께 더욱 간결하고 가독성 좋은 방법으로 사용할 수 있게 되었습니다.

 

 

 

 

 

 

[Javascript] ECMAScript, ES5와 ES6 비교 / 기능 / 사용법 / 예제코드

 

 

 

 

---

 

 

 

 

Filter Method

filter() 함수는 배열의 각 요소를 검사하여 주어진 조건을 만족하는 요소만 추려내는 함수입니다. 새로운 배열을 반환하며, 원본 배열을 변경되지 않습니다. filter() 함수는 콜백 함수를 인자로 받으며, 이 콜백 함수에서 각 요소의 조건을 검사합니다.

 

 

 

구조

array.filter(callback(element[, index[, array]])[, thisArg])

 

 

변수	설명
array	필터링 할 대상이 되는 배열
callback	각 요소를 시험할 함수 true를 반환하면 요소를 유지하고, false를 반환하면 버립니다. * 아래 세 가지 매개변수를 받습니다.
element	1. 처리할 현재 요소
index ( 선택 )	2. 처리할 현재 요소의 인덱스
array ( 선택 )	3.  filter()를 호출한 배열
thisArg ( 선택 )	callback을 실행할 때 this로 사용하는 값

 

 

 

1) 예제 코드: 배열에서 중복 제거하기

const numbers = [1, 2, 3, 2, 4, 5, 4];
const uniqueNumbers = numbers.filter((number, index, array) => array.indexOf(number) === index);

console.log(uniqueNumbers);
// [1, 2, 3, 4, 5]

// Tip. indexOf() - 배열 내의 요소의 최초의 인덱스. 발견되지 않으면 -1.

 

 

2) 예제 코드: 문자열 배열에서 특정 문자열을 포함하는 요소만 선택하기

const words = ["apple", "banana", "cherry", "durian"];
const filteredWords = words.filter(word => !word.includes("a"));

console.log(filteredWords);
// ["cherry"]

// Tip. includes() - 포함하는 값을 찾는다. 앞에 !를 붙이면 반대인 포함하지 않는 조건이 된다.

 

 

3) 예제 코드: 객체 배열에서 특정 속성을 가진 객체만 선택하기

const users = [
  { name: "Alice", age: 22 },
  { name: "Bob", age: 25 },
  { name: "Charlie", age: 22 },
  { name: "Dave", age: 28 }
];
const youngUsers = users.filter(user => user.age < 25);

console.log(youngUsers);
// [{ name: "Alice", age: 22 }, { name: "Charlie", age: 22 }]

 

 

4) 예제 코드: 배열에서 최댓값을 가진 요소 찾기

const numbers = [4, 2, 7, 1, 9, 5];
const maxNumber = numbers.filter((number, index, array) => number === Math.max(...array));

console.log(maxNumber);
// [9]

 

 

5) 예제 코드: 배열에서 조건에 맞는 요소만 선택하여 합산하기

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.filter(number => number % 2 === 0).reduce((acc, curr) => acc + curr, 0);

console.log(sum);
// 6, 짝수만 추려내서 합산

 

 

 

 

---

 

 

 

 

Map Method

map() 함수는 배열의 각 요소에 대해 특정 작업을 수행하고, 그 결과를 새로운 배열에 담아 반환하는 함수입니다. map() 함수는 콜백 함수를 인자로 받으며, 이 콜백 함수에서 각 요소에 대한 작업을 수행합니다. 작업의 결과는 새로운 배열에 담겨 반환됩니다.

 

 

 

구조

array.map(callback(currentValue[, index[, array]])[, thisArg])

 

 

변수	설명
array	변형 할 대상이 되는 배열
callback	새로운 배열 요소를 생성하는 함수 * 아래 세 가지 인수를 가집니다.
currentValue	1. 처리할 현재 요소
index ( 선택 )	2. 처리할 현재 요소의 인덱스
array ( 선택 )	3. map()을 호출한 배열
thisArg ( 선택 )	callback을 실행할 때 this로 사용되는 값

 

 

 

1) 예제 코드: 배열 요소의 속성 값 추출하기

const items = [
  { name: 'apple', price: 1000 },
  { name: 'banana', price: 1500 },
  { name: 'cherry', price: 2000 }
];
const itemPrices = items.map(item => item.price);

console.log(itemPrices);
// [1000, 1500, 2000]

 

 

2) 예제 코드: 숫자 배열에서 홀수 / 짝수 분리하기

const numbers = [1, 2, 3, 4, 5];
const oddNumbers = numbers.map(number => number % 2 === 1 ? number : null).filter(Boolean);
const evenNumbers = numbers.map(number => number % 2 === 0 ? number : null).filter(Boolean);

console.log(oddNumbers);
// oddNumbers: [1, 3, 5]

console.log(evenNumbers);
// evenNumbers: [2, 4]

// Tip. Boolean을 iterator 로 사용하여 false, 0, -0, 0n, "", null, undefined, NaN를 제거할 수 있다.

 

 

3) 예제 코드: 문자열 배열에서 길이 순으로 정렬하기

const words = ['apple', 'banana', 'cherry', 'durian', 'elderberry'];
const sortedWords = words.map(word => ({ word, length: word.length })).sort((a, b) => a.length - b.length).map(obj => obj.word);

console.log(sortedWords);
// ['apple', 'cherry', 'banana', 'durian', 'elderberry']

// Tip. sort(b, a)로 내림차순 정렬이 가능하다.

 

 

4) 예제 코드: 객체 배열에서 특정 속성값을 변경하기

const users = [
  { name: 'Alice', age: 22 },
  { name: 'Bob', age: 25 },
  { name: 'Charlie', age: 22 },
  { name: 'Dave', age: 28 }
];
const updatedUsers = users.map(user => user.name === 'Bob' ? { ...user, age: 26 } : user);

console.log(updateUsers);
// [{ name: 'Alice', age: 22 }, { name: 'Bob', age: 26 }, { name: 'Charlie', age: 22 }, { name: 'Dave', age: 28 }]

 

 

5) 예제 코드: 배열에서 최댓값을 가진 요소 찾기

const numbers = [4, 2, 7, 1, 9, 5];
const maxNumber = numbers.map((number, index, array) => number === Math.max(...array) ? number : null).filter(Boolean);

console.log(maxNumber);
// [9]

// Tip. Boolean을 iterator 로 사용하여 false, 0, -0, 0n, "", null, undefined, NaN를 제거할 수 있다.

 

 

 

 

---

 

 

 

 

Reduce Method

reduce() 함수는 배열의 각 요소를 순서대로 탐색하여, 하나의 결괏값을 도출하는 함수입니다. 콜백 함수와 초기값을 인자로 받으며, 콜백 함수에서 현재 요소와 누적된 값에 대한 연산을 수행합니다. 콜백 함수가 반환한 값이 다음 콜백 함수의 누적값이 됩니다. 마지막으로 누적된 값을 반환합니다.

 

 

 

구조

array.reduce(callback[, initialValue])

 

 

변수	설명
callback	배열의 각 요소에 대해 실행할 함수 아래 네 가지 인수를 받습니다
accumulator	1. 누산기는 콜백의 반환값을 누적합니다. 콜백의 이전 반환값 또는, 콜백의 첫 번째 호출이면서 initialValue를 제공한 경우에는 initialValue의 값입니다.
currentValue	2. 처리할 현재 요소
currentIndex	3. 처리할 현재 요소의 인덱스 initialValue를 제공한 경우 0, 아니면 1부터 시작합니다.
array	4. reduce()를 호출한 배열
initialValue	callback의 최초 호출에서 첫 번째 인수에 제공하는 값 초기값을 제공하지 않으면 배열의 첫 번째 요소를 사용합니다. 빈 배열에서 초기값 없이 reduce()를 호출하면 오류가 발생합니다.

 

 

 

1) 예제 코드: 배열 요소 중에서 가장 큰 수 구하기

const numbers = [10, 22, 3, 17, 25];
const max = numbers.reduce((accumulator, currentValue) => {
  if (currentValue > accumulator) {
    return currentValue;
  } else {
    return accumulator;
  }
}, numbers[0]);

console.log(max);
// 25

 

 

2) 예제 코드:  객체 배열의 속성 값 누적하기

const orders = [
  { id: 1, price: 100 },
  { id: 2, price: 200 },
  { id: 3, price: 150 },
];
const total = orders.reduce((accumulator, currentValue) => accumulator + currentValue.price, 0);

console.log(total);
// 450

 

 

3) 예제 코드: 배열의 중복 요소 제거하기

const numbers = [1, 2, 3, 2, 1, 4, 5];
const uniqueNumbers = numbers.reduce((accumulator, currentValue) => {
  if (!accumulator.includes(currentValue)) {
    accumulator.push(currentValue);
  }
  return accumulator;
}, []);

console.log(uniqueNumbers);
// [1, 2, 3, 4, 5]

 

 

4) 예제 코드: 객체 배열의 그룹화하기

const people = [
  { name: "Alice", age: 20 },
  { name: "Bob", age: 25 },
  { name: "Charlie", age: 20 },
  { name: "David", age: 25 },
];
const groupedPeople = people.reduce((accumulator, currentValue) => {
  const age = currentValue.age;
  if (!accumulator[age]) {
    accumulator[age] = [];
  }
  accumulator[age].push(currentValue);
  return accumulator;
}, {});

console.log(groupedPeople);
// {
//   20: [
//     { name: "Alice", age: 20 },
//     { name: "Charlie", age: 20 },
//   ],
//   25: [
//     { name: "Bob", age: 25 },
//     { name: "David", age: 25 },
//   ]
// }

 

 

5) 예제 코드: 이차원 배열 합치기

const matrix = [[1, 2], [3, 4], [5, 6]];
const flattened = matrix.reduce((accumulator, currentValue) => accumulator.concat(currentValue), []);

console.log(flattened);
// [1, 2, 3, 4, 5, 6]

 

 

 

---

 

 

 

정리

💡 filter ?  배열의 요소 중에서 조건에 맞는 요소만 추려내어 새로운 배열을 반환
💡 map ?  배열의 각 요소를 변형한 결과를 새로운 배열에 담아 반환
💡 reduce ?  배열의 모든 요소를 순서대로 탐색하여, 하나의 값으로 도출

 

 

 

 

 

 

 

---

 

 

 

 

 

 

 

Reference

ChatGPT, MDN Web Docs