JavaScript
map과 filter로 새 목록 만들기
map은 값을 변환하고 filter는 조건에 맞는 항목을 고릅니다.
이럴 때 필요해요
좌석 목록에서 가격을 읽거나 조건에 맞는 좌석을 선택합니다.
어떻게 동작하나요?
배열의 각 값을 새 값으로 바꾸고 싶으면 map을 사용합니다. 콜백이 돌려주는 값들이 새 배열의 항목이 됩니다.
filter는 콜백의 결과가 참인 항목만 새 배열에 포함합니다. 아래에서는 2000 이상인 가격만 고릅니다. 두 메서드는 이 예제의 원본 숫자 배열을 직접 바꾸지 않습니다.
새 배열을 만들었다고 안에 들어 있는 객체까지 깊이 복사되는 것은 아닙니다. 먼저 변환과 선택의 차이를 익힌 뒤 객체 복사와 React의 불변 갱신으로 이어가세요.
코드 예제
동작을 설명하는 읽기 전용 예제입니다.
const prices = [1000, 2000, 3000];
const doubled = prices.map(price => price * 2);
const selected = prices.filter(price => price >= 2000);
console.log(doubled); // [2000, 4000, 6000]
console.log(selected); // [2000, 3000]
console.log(prices); // [1000, 2000, 3000]변환한 배열과 걸러낸 배열을 각각 만들며 원본 숫자 배열은 유지됩니다.
자주 헷갈리는 포인트
- map 콜백에서 반환값을 빠뜨리지 않습니다.
- 새 배열 생성과 내부 객체의 깊은 복사는 다릅니다.
내 말로 설명해 보기
가격이 2000 이상인 항목만 남기려면 map과 filter 중 무엇을 쓸까요?
생각할 단서 예제의 값을 하나 바꿔 보고, 바뀌는 부분과 그대로인 부분을 구분해 보세요.
예시 답변 확인
설명에 들어갈 핵심
- map은 값을 변환하고 filter는 조건에 맞는 항목을 고릅니다.
- 변환한 배열과 걸러낸 배열을 각각 만들며 원본 숫자 배열은 유지됩니다.
예시 답변
항목을 고르는 filter를 사용합니다. map은 항목을 다른 값으로 변환할 때 사용합니다.
문장을 그대로 외우기보다 예제의 값과 실행 흐름을 떠올리며 설명해 보세요.