프로그래밍 JS

배열 메서드(map, filter, reduce, forEach)

오늘은 배열의 map, filter, reduce, forEach를 공부해보도록 하겠습니당

map

map은 배열의 각 원소를 변환하여 새로운 배열을 생성합니다.

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

출력: [2, 4, 6]

왜 다들 map을 쓸까요?

Js뿐만 아니라 다른 언어에서도 map을 선호하는 이유는 <무엇을(What)할 것인가>에 집중하기 때문입니다.

map 장점으로는 원본 데이터를 건드리지 않고 새로운 데이터를 만들어주고, for 루프처럼 인덱스를 관리할 필요가 없어 가독성이 좋습니다. map().filter().reduce()처럼 여러 기능을 엮어서 사용하기에도 편리해 map을 자주 사용합니다!

filter

filter()란?
filter은 말 그대로 거름망입니다. 배열의 각 요소를 하나씩 살펴보며, 내가 정한 조건에 맞는(True) 요소들만 모아 새로운 배열을 만듭니다.

filter또한 원본 데이터를 건드리지 않고 조건에 맞는 게 없다면 에러가 아닌 빈 배열([])을 출력합니다.

숫자 배열 예제로 한 번 보자면

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

출력 : [2, 4]

⚠️find()와 헷갈리지 마세요
filter() : 조건을 만족하는 모든 요소를 찾아 배열로 반환합니다.
find() : 조건을 만족하는 가장 첫 번째 요소 하나만 찾아 값(객체)으로 반환합니다.

데이터를 삭제하거나 검색 기능을 구현할 때는 꼭! filter를 사용하시는 것을 추천드립니다!!!

reduce

reduce는 배열의 하나의 값으로 축소합니다. 대부분 사람들은 합계, 평균 구하기 할 때 사용합니다.
reduce로 합계, 평균 구하기? 식은 죽 먹기입니다.

reduce(("누적 값","현재 값"))

const numbers = [1, 2, 3];
const sum = numbers.reduce((acc, num) => acc + num, 0);
console.log(sum); 

출력 : 6

초기값을 설정하세요! 두 번째 인자인 0이나 {}, []를 빼먹으면 배열의 첫 번째 요소가 초기값이 됩니다.

forEach

forEach는 배열의 각 원소를 반복적으로 처리하지만, 새로운 배열을 생성하지는 않습니다.

map이나 filter처럼 무언가 거창한 결과를 만들어내기보다, 배열의 요소를 하나씩 꺼내서 "그냥 일을 시킬 때" 가장 많이 쓰이는 녀석이죠.

배열을 새로 만들지 않습니다. 단순히 반복문(for)을 대체하는 용도에도 가깝게 느껴집니다.

기본적인 사용법입니다.

const numbers = [1, 2, 3];

// 각 원소를 하나씩 꺼내서 출력만 하고 끝!
numbers.forEach((num, index) => {
  console.log(`${index}번째 숫자는 ${num}입니다.`);
});

출력:
0번째는 숫자는 1입니다.
1번째 숫자는 2입니다.
2번째 숫자는 3입니다.

⚠️forEach 사용 시 주의할 점!
1. break or continue는 못 쓴다.

일반 for문과 달리 중간에 **멈출 수 없습니다**. forEach는 끝까지 다 돌아야 합니다.

2. map과 헷갈리면 안 됩니다!!

값을 변환해서 새로운 배열을 얻고 싶으면 map

작업만 수행하고 싶으면 forEach

도움이 되셨나요? 드디어 배열 메서드 4대장 시리즈가 끝났습니다!
궁금한 점이나 틀린 부분은 댓글 환영입니당!!!