[자바스크립트] map, filter, reduce 정리

반복문

자바스크립트에서 여러 데이터 값을 관리할 때 배열이나 객체를 많이 사용한다.

이러한 데이터를 관리할 때, 유용하게 쓰이는 반복문인 map, filter, reduce에 대해 정리해보자!

 

---

 

 

map, filter, reduce에 대해 알아보기 전에 기본적인 for문을 가볍게 짚고 넘어가 봅시다!

 

for문

const practice = [
  { name: "개발자", value: 150, active: false },
  { name: "퉁이리", value: 200, active: true },
  { name: "프론트엔드", value: 110, active: true },
  { name: "티스토리", value: 300, active: true },
  { name: "깃허브", value: 250, active: true },
];

for (let i = 0; i < practice.length; i++) {
  console.log(practice[i].name);
}

 

 

다음과 같이 정상적으로 반복문이 실행되어 console.log가 찍히는 것을 확인할 수 있다.

또 다른 반복문으로는 while문이 있다.

 

 

 

while문

const practice = [
  { name: "개발자", value: 150, active: false },
  { name: "퉁이리", value: 200, active: true },
  { name: "프론트엔드", value: 110, active: true },
  { name: "티스토리", value: 300, active: true },
  { name: "깃허브", value: 250, active: true },
];

let i = 0;
while (i < practice.length) {
  console.log(practice[i].name);
  i++;
}

 

 

while문도 마찬가지로 i를 활용하여 카운팅을 하고 practice 길이만큼만 반복하게 하였다.

역시 같은 결과가 정상적으로 출력되었다.

 

 

 

---

 

 

이제 본격적으로 map, filter, reduce에 대해서 알아보자!

 

그전에 진짜 마지막으로 딱 한 개만 더!ㅋㅋ

forEach에 대해서 살펴보아요.

 

forEach

const practice = [
  { name: "개발자", value: 150, active: false },
  { name: "퉁이리", value: 200, active: true },
  { name: "프론트엔드", value: 110, active: true },
  { name: "티스토리", value: 300, active: true },
  { name: "깃허브", value: 250, active: true },
];

practice.forEach((data) => console.log(data.name));

 

 

forEach는 아주 단순한 반복문으로 별다른 부가기능은 없다는 특징이 있다.

가장 기본적인 반복문이다.

 

그렇지만 for문보다 코드가 더 예뻐 보인다.

그 이유는 아래와 같다!

1. 임시 변수(i)를 사용하지 않아도 된다.
2. 길이를 따로 설정하지 않아도 된다.

 

이제 시작!!!

 

 

map

const practice = [
  { name: "개발자", value: 150, active: false },
  { name: "퉁이리", value: 200, active: true },
  { name: "프론트엔드", value: 110, active: true },
  { name: "티스토리", value: 300, active: true },
  { name: "깃허브", value: 250, active: true },
];

const practiceNames = practice.map((data) => data.name);

console.log(practiceNames);

 

 

map은 어떤 배열을 다른 형태의 배열로 재생산할 때 사용된다.

기존 배열을 수정하는 것이 아니라 새 배열을 반환하는 것이다!

 

map은 배열의 재탄생을 도와준다.

 

 

 

filter

const practice = [
  { name: "개발자", value: 150, active: false },
  { name: "퉁이리", value: 200, active: true },
  { name: "프론트엔드", value: 110, active: true },
  { name: "티스토리", value: 300, active: true },
  { name: "깃허브", value: 250, active: true },
];

const practice220 = practice.filter((data) => data.value < 220);

console.log(practice220);

 

 

 

filter는 배열 안에서 특정 조건을 가진 요소만 뽑아내는 반복문이다.

filter도 map과 같이 필터링을 통과한 값에 대해 새 배열을 반환한다.

 

위 코드는 value의 값이 220 미만인 값에 대해 필터링을 진행 후 필터를 통과한 값으로 이루어진 배열을 반환하였다. 검색 기능에서 많이 활용된다.

 

 

reduce

const practice = [
  { name: "개발자", value: 150, active: false },
  { name: "퉁이리", value: 200, active: true },
  { name: "프론트엔드", value: 110, active: true },
  { name: "티스토리", value: 300, active: true },
  { name: "깃허브", value: 250, active: true },
];

const practiceSum = practice.reduce((pre, cur) => pre + cur.value, 0);

console.log(practiceSum);

 

 

practice에 있는 모든 value 값들의 합을 구하고 싶을 때, reduce를 사용한다.

누적 합을 구할 때 reduce를 많이 사용한다.

 

• pre는 누산 값
• cur은 현재 값
• 0은 초기 값

 

reduce 메서드 역시 하나의 결괏값을 반환한다.

 

 

---

 

map + filter + reduce

const practice = [
  { name: "개발자", value: 150, active: false },
  { name: "퉁이리", value: 200, active: true },
  { name: "프론트엔드", value: 110, active: true },
  { name: "티스토리", value: 300, active: true },
  { name: "깃허브", value: 250, active: true },
];

const practiceSum = practice
  .filter((data) => data.active)
  .map((data) => data.value)
  .reduce((pre, cur) => pre + cur, 0);

console.log(practiceSum);

 

 

지금까지 알아본 map, filter, reduce를 전부 응용하여 직접 하나의 값을 만들어보았다.

 

filter를 사용하여 active가 true인 값만 필터링하여 새 배열 반환

-> map을 사용하여 value만으로 이루어진 새 배열 반환

-> reduce를 사용하여 value를 전부 더한 값 반환

 

 

 

적재적소에 map, filter, reduce를 사용하면 위 응용과 같이 더 나은 개발을 할 수 있다!

 

 

 

좋아요는 로그인하지 않아도 누를 수 있습니다!