[JavaScript] 자료구조 (forEach, map, filter, reduce)

 

안녕하세요~  경제적 자유입니다.

오늘은 JavaScript의 forEach, map, filter, reduce 배열 메서드를 리뷰해보려고 합니다.

 

OverView

---

JavaScript에서 배열을 다루다 보면 여러 개의 데이터를 하나씩 꺼내서 처리해야 할 때가 많습니다.

예를 들어 학생 이름 목록을 하나씩 출력하거나, 숫자 배열의 값을 두 배로 만들거나, 조건에 맞는 값만 골라내거나, 모든 숫자를 더해야 할 때가 있죠.

 

이럴 때 사용하는 대표적인 배열 메서드가 바로 forEach, map, filter, reduce입니다.

 

이 네 가지는 모두 배열의 요소를 하나씩 순회하면서 작업한다는 공통점이 있습니다.

하지만 목적은 조금씩 다릅니다.

 

• forEach는 배열을 하나씩 돌면서 작업을 실행할 때 사용합니다.
• map은 기존 배열을 바탕으로 새로운 배열을 만들 때 사용합니다.
• filter는 조건에 맞는 요소만 골라 새로운 배열을 만들 때 사용합니다.
• reduce는 배열의 값을 누적해서 하나의 결과로 만들 때 사용합니다.

 

추가로 더 자세히 공부하고 싶다면 아래 MDN 문서를 참고해보세요.

• 참고 링크: MDN - Array.prototype.forEach()
• 참고 링크: MDN - Array.prototype.map()
• 참고 링크: MDN - Array.prototype.filter()
• 참고 링크: MDN - Array.prototype.reduce()

 

 

개념 설명

---

 

 

1. forEach란?

forEach는 배열의 요소를 하나씩 꺼내서, 각 요소마다 원하는 작업을 실행하는 배열 메서드입니다.

쉽게 말하면,
“배열 안에 있는 값을 하나씩 확인하면서 무언가를 실행하고 싶을 때” 사용합니다.

예를 들어 이름 목록이 있을 때, 이름을 하나씩 출력하고 싶다면 forEach를 사용할 수 있습니다.

중요한 점은 forEach는 새로운 배열을 만들어주지 않는다는 것입니다.
반환값은 undefined이고, 주로 출력, 로그 확인, 화면 표시, 특정 작업 실행처럼 “동작”이 필요할 때 사용합니다.

코드로 이해하기

const names = ["sangu", "minsu", "jiyoon"];

names.forEach((name) => {
  console.log(name);
});

 

위 코드는 names 배열 안에 있는 값을 하나씩 꺼내서 출력합니다.

실행 흐름은 이렇게 볼 수 있습니다.

1. 첫 번째로 "sangu"를 꺼냅니다.
2. console.log(name)이 실행되어 "sangu"가 출력됩니다.
3. 두 번째로 "minsu"를 꺼냅니다.
4. "minsu"가 출력됩니다.
5. 세 번째로 "jiyoon"을 꺼냅니다.
6. "jiyoon"이 출력됩니다.

결과는 다음과 같습니다.

sangu
minsu
jiyoon

여기서 중요한 점은 forEach는 배열을 반복할 뿐, 새로운 배열을 만들어주지는 않는다는 것입니다.

const names = ["sangu", "minsu", "jiyoon"];

const result = names.forEach((name) => {
  return name;
});

console.log(result);

결과는 다음과 같습니다.

undefined

return name을 했는데도 결과가 undefined입니다.
왜냐하면 forEach는 반환값을 모아서 새 배열로 만들어주는 메서드가 아니기 때문입니다.

그래서 forEach는 이렇게 기억하면 좋습니다.

 

forEach는 배열을 하나씩 돌면서 작업을 실행할 때 사용한다.

 

 

 

---

 

2. map이란?

 

 

map은 배열의 각 요소를 하나씩 꺼내서, 새로운 값으로 바꾼 뒤 새로운 배열을 만들어주는 배열 메서드입니다.

 

쉽게 말하면, “기존 배열을 바탕으로 모양이 바뀐 새 배열을 만들고 싶을 때” 사용합니다.

 

예를 들어 숫자 배열의 모든 값에 2를 곱해서 새로운 배열을 만들고 싶다면 map을 사용할 수 있습니다.

 

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

const doubledNumbers = numbers.map((number) => {
  return number * 2;
});

console.log(doubledNumbers);

결과는 다음과 같습니다.

[2, 4, 6, 8]

실행 흐름은 이렇게 볼 수 있습니다.

 

1. 첫 번째 값 1을 꺼냅니다.
2. 1 * 2를 계산해서 2를 반환합니다.
3. 두 번째 값 2를 꺼냅니다.
4. 2 * 2를 계산해서 4를 반환합니다.
5. 세 번째 값 3을 꺼냅니다.
6. 3 * 2를 계산해서 6을 반환합니다.
7. 네 번째 값 4를 꺼냅니다.
8. 4 * 2를 계산해서 8을 반환합니다.

 

그리고 반환된 값들을 모아서 새로운 배열 [2, 4, 6, 8]을 만들어줍니다.

 

 

이번에는 사람 이름 배열을 사용해보겠습니다.

 

const names = ["sangu", "minsu", "jiyoon"];

const greetingNames = names.map((name) => {
  return `${name}님 안녕하세요`;
});

console.log(greetingNames);

 

결과는 다음과 같습니다.

["sangu님 안녕하세요", "minsu님 안녕하세요", "jiyoon님 안녕하세요"]

 

 

map은 기존 배열을 직접 바꾸는 것이 아니라, 새로운 배열을 만들어줍니다.

 

const numbers = [1, 2, 3];

const newNumbers = numbers.map((number) => {
  return number + 10;
});

console.log(numbers);
console.log(newNumbers);

결과는 다음과 같습니다.

[1, 2, 3]
[11, 12, 13]

 

기존 배열 numbers는 그대로 있고, newNumbers라는 새로운 배열이 만들어졌습니다.

그래서 map은 이렇게 기억하면 좋습니다.

 

map은 배열의 각 요소를 변형해서 새로운 배열을 만들 때 사용한다.

 

 

 

---

 

3. filter란?

 

filter는 배열의 요소 중에서 조건에 맞는 요소만 골라서 새로운 배열을 만들어주는 배열 메서드입니다.

 

쉽게 말하면, “배열에서 원하는 조건에 맞는 값만 걸러내고 싶을 때” 사용합니다.

 

예를 들어 숫자 배열에서 짝수만 골라내고 싶다면 filter를 사용할 수 있습니다.

 

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

const evenNumbers = numbers.filter((number) => {
  return number % 2 === 0;
});

console.log(evenNumbers);

결과는 다음과 같습니다.

[2, 4, 6]

실행 흐름은 이렇게 볼 수 있습니다.

 

1. 1을 꺼냅니다.
2. 1 % 2 === 0은 false입니다.
3. 그래서 1은 제외됩니다.
4. 2를 꺼냅니다.
5. 2 % 2 === 0은 true입니다.
6. 그래서 2는 새 배열에 들어갑니다.
7. 같은 방식으로 4, 6도 조건을 통과합니다.

 

filter는 조건식의 결과가 true인 값만 남깁니다.

 

 

이번에는 사람 객체 배열을 예시로 들어보겠습니다.

const users = [
  { name: "sangu", age: 28 },
  { name: "minsu", age: 17 },
  { name: "jiyoon", age: 22 }
];

const adultUsers = users.filter((user) => {
  return user.age >= 20;
});

console.log(adultUsers);

결과는 다음과 같습니다.

[
  { name: "sangu", age: 28 },
  { name: "jiyoon", age: 22 }
]

나이가 20살 이상인 사람만 골라서 새로운 배열을 만든 것입니다.

 

여기서 중요한 점은 filter도 map처럼 새로운 배열을 반환한다는 것입니다.

하지만 map은 값을 바꾸는 데 많이 사용하고, filter는 조건에 맞는 값만 골라내는 데 사용합니다.

 

그래서 filter는 이렇게 기억하면 좋습니다.

 

 

filter는 조건에 맞는 요소만 걸러서 새로운 배열을 만들 때 사용한다.

 

 

 

---

4. reduce란?

 

reduce는 배열의 요소를 하나씩 꺼내서 누적한 뒤, 최종적으로 하나의 결과값을 만드는 배열 메서드입니다.

 

처음 보면 네 가지 중에서 가장 어렵게 느껴질 수 있습니다.

하지만 핵심은 단순합니다. “배열을 하나의 값으로 줄인다” 라고 생각하면 됩니다.

 

예를 들어 숫자 배열의 모든 값을 더해서 합계를 구하고 싶을 때 reduce를 사용할 수 있습니다.

 

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

const total = numbers.reduce((acc, cur) => {
  return acc + cur;
}, 0);

console.log(total);

결과는 다음과 같습니다.

 

10

 

여기서 중요한 단어가 두 개 나옵니다.

 

• acc: accumulator의 줄임말로, 누적값을 의미합니다.
• cur: currentValue의 줄임말로, 현재 배열에서 꺼낸 값을 의미합니다.

 

마지막 결과는 10입니다.

여기서 0은 초기값입니다.

}, 0);

 

이 초기값은 acc가 처음에 어떤 값으로 시작할지를 정해줍니다.
합계를 구할 때는 보통 0으로 시작합니다.

이번에는 나이 합계를 구해보겠습니다.

const users = [
  { name: "sangu", age: 28 },
  { name: "minsu", age: 17 },
  { name: "jiyoon", age: 22 }
];

const totalAge = users.reduce((acc, user) => {
  return acc + user.age;
}, 0);

console.log(totalAge);

 

결과는 다음과 같습니다.

67

 

각 사람의 나이를 하나씩 더해서 최종 합계 67을 만든 것입니다.

reduce는 합계뿐만 아니라 평균, 객체 만들기, 배열 가공 등 다양한 곳에서 사용할 수 있습니다.
하지만 처음에는 너무 어렵게 생각하지 말고, “누적해서 하나의 결과를 만든다” 정도로 이해하면 충분합니다.

그래서 reduce는 이렇게 기억하면 좋습니다.

 

reduce는 배열의 값을 누적해서 하나의 결과값을 만들 때 사용한다.

 

 

---

1. 그냥 하나씩 실행만 하고 싶다

이럴 때는 forEach를 사용합니다.

const names = ["sangu", "minsu", "jiyoon"];

names.forEach((name) => {
  console.log(`${name}님 환영합니다.`);
});

---

2. 값을 바꿔서 새 배열을 만들고 싶다

이럴 때는 map을 사용합니다.

const numbers = [1, 2, 3];

const result = numbers.map((number) => {
  return number * 2;
});

console.log(result);

---

3. 조건에 맞는 값만 고르고 싶다

이럴 때는 filter를 사용합니다.

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

const result = numbers.filter((number) => {
  return number > 3;
});

console.log(result);

---

4. 하나의 결과값으로 합치고 싶다

이럴 때는 reduce를 사용합니다.

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

const result = numbers.reduce((acc, cur) => {
  return acc + cur;
}, 0);

console.log(result);

 

마무리

---

 

오늘은 JavaScript의 대표적인 배열 메서드인 forEach, map, filter, reduce에 대해 정리해봤습니다.

처음에는 전부 비슷해 보이지만, 목적을 기준으로 나누면 생각보다 쉽게 이해할 수 있습니다.

• 단순히 반복 실행하고 싶다면 forEach
• 값을 바꿔서 새 배열을 만들고 싶다면 map
• 조건에 맞는 값만 고르고 싶다면 filter
• 배열을 하나의 결과로 줄이고 싶다면 reduce

이렇게 구분하면 됩니다.

특히 map, filter, reduce는 JavaScript에서 데이터를 다룰 때 정말 자주 등장합니다.
처음부터 완벽하게 외우려고 하기보다는, 작은 예제를 직접 만들어보면서 익숙해지는 것이 가장 좋습니다.

오늘도 하나씩 천천히 쌓아가 보겠습니다.