JS LAB
    JS 3.3 · 3부. 데이터 다루기

    map과 filter

    원본을 두고 새 배열을 만듭니다. 변형과 걸러내기를 다룹니다.

    예상 학습 시간 14분 실행 단추가 있는 예제는 고쳐서 실행해 볼 수 있습니다 난이도 초급
    개념 설명

    새 배열을 만들어 돌려줍니다

    앞 단원의 forEach 는 값마다 무언가를 할 뿐 결과를 돌려주지 않습니다. 배열을 바탕으로 새 배열이 필요할 때가 훨씬 많습니다.

    • map — 값마다 바꿔 같은 개수의 새 배열을 만듭니다.
    • filter — 조건에 맞는 것만 남겨 더 적은 새 배열을 만듭니다.

    둘 다 원래 배열을 바꾸지 않습니다. 이것이 앞 단원의 방법들과 가장 다른 점입니다.

    최소 예제 · 편집 가능

    map — 값마다 바꾸기

    script.js 
    const prices = [1000, 2000, 3000];

const discounted = prices.map(price => Math.floor(price * 0.9));

console.log(discounted);
console.log(prices);
    출력
    [900, 1800, 2700] [1000, 2000, 3000]

    넘긴 함수가 돌려준 값이 새 배열에 담깁니다. return 을 빠뜨리면 undefined 가 담깁니다.

    상세 사용법

    filter — 조건에 맞는 것만

    script.js 
    const scores = [85, 42, 91, 60];

const passed = scores.filter(score => score >= 60);
const failed = scores.filter(score => score < 60);

console.log(passed);
console.log(failed);
console.log(passed.length);
    출력
    [85, 91, 60] [42] 3

    넘긴 함수가 true 를 돌려준 값만 남습니다. 값 자체는 바뀌지 않고 고르기만 합니다.

    상세 사용법

    이어 붙이기

    둘 다 배열을 돌려주므로 그 뒤에 또 붙일 수 있습니다. 왼쪽부터 차례로 실행됩니다.

    script.js 
    const scores = [85, 42, 91, 60];

const result = scores
	.filter(score => score >= 60)
	.map(score => `${score}점`);

console.log(result);
    출력
    ["85점", "91점", "60점"]

    거르는 것을 먼저 두는 편이 낫습니다. 버릴 값까지 바꾸느라 헛일을 하지 않습니다.

    상세 사용법

    번호도 받을 수 있습니다

    script.js 
    const names = ["홍길동", "김철수", "이영희"];

const numbered = names.map((name, i) => `${i + 1}. ${name}`);
const evenOnly = names.filter((name, i) => i % 2 === 0);

console.log(numbered);
console.log(evenOnly);
    출력
    ["1. 홍길동", "2. 김철수", "3. 이영희"] ["홍길동", "이영희"]
    흔한 실수

    처음에 자주 걸리는 것

    1. 중괄호를 쓰고 return 을 빠뜨립니다

    2.2 에서 본 것과 같습니다. 중괄호를 열면 return 이 필요합니다. 없으면 undefined 가 가득한 배열이 나옵니다. 

    prices.map(p => { p * 2; });      // [undefined, undefined, ...]
prices.map(p => p * 2);           // 이렇게 적습니다
    2. 결과를 담지 않습니다

    map 과 filter 는 원래 배열을 바꾸지 않고 새 배열을 돌려줄 뿐입니다. 담지 않으면 아무 일도 일어나지 않습니다. 

    scores.filter(s => s >= 60);      // 결과가 사라집니다
const passed = scores.filter(s => s >= 60);
    3. 화면에 내보내려고 map 을 사용합니다

    돌려줄 값이 없다면 forEach 가 맞습니다. map 을 쓰면 필요 없는 배열이 만들어집니다.

    실습 문제

    직접 해보기

    1. 단위 붙이기 난이도 하

    가격 배열을 "1000원" 형태의 배열로 바꿔 출력하세요.

    const prices = [1000, 2500]; console.log(prices.map(p => `${p}원`));
    2. 짝수만 골라 제곱하기 난이도 중

    1부터 10까지 담긴 배열에서 짝수만 골라 각각 제곱한 배열을 출력하세요. 배열은 직접 적어도 됩니다.

    거르는 것을 먼저 두면 헛일을 줄입니다.
    const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; const result = numbers .filter(n => n % 2 === 0) .map(n => n * n); console.log(result); // [4, 16, 36, 64, 100]
    요약

    이 단원의 정리

    • map 은 값마다 바꿔 같은 개수의 새 배열을 만듭니다.
    • filter 는 조건에 맞는 것만 남깁니다.
    • 둘 다 원래 배열을 바꾸지 않습니다. 결과를 담아야 합니다.
    • 배열을 돌려주므로 이어 붙일 수 있습니다. 거르는 것을 먼저 둡니다.
    • 돌려줄 값이 없다면 forEach 가 맞습니다.