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

    find·some·every·reduce

    배열에서 찾고, 판정하고, 하나의 값으로 모읍니다.

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

    찾고, 판정하고, 모읍니다

    앞 단원의 둘은 배열을 돌려줬습니다. 이 단원의 넷은 배열이 아닌 것을 돌려줍니다.

    • find — 조건에 맞는 첫 값을 돌려줍니다.
    • some — 하나라도 맞으면 참입니다.
    • every — 모두 맞아야 참입니다.
    • reduce — 값들을 하나로 모읍니다.
    최소 예제 · 편집 가능

    find — 첫 값 하나

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

console.log(scores.find(score => score >= 60));
console.log(scores.find(score => score >= 100));
console.log(scores.findIndex(score => score >= 60));
    출력
    85 undefined 2

    filter 와 다릅니다. filter 는 맞는 것을 모두 담은 배열을, find 는 첫 값 하나를 돌려줍니다. 없으면 undefined 입니다.

    findIndex 는 값 대신 번호를 돌려줍니다. 없으면 -1 입니다.

    상세 사용법

    some 과 every — 참인가 거짓인가

    script.js 
    const stocks = [3, 0, 7];

console.log(stocks.some(stock => stock === 0));
console.log(stocks.every(stock => stock > 0));
console.log(stocks.some(stock => stock > 100));
console.log(stocks.every(stock => stock >= 0));
    출력
    true false false true

    some 은 맞는 것을 만나면 그 자리에서 멈추고, every 는 안 맞는 것을 만나면 멈춥니다. 끝까지 돌지 않습니다.

    상세 사용법

    reduce — 하나로 모으기

    가장 낯선 것이 reduce 입니다. 함수 하나와 시작 값을 받아, 값마다 그 함수를 부르며 결과를 이어 나갑니다.

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

const total = prices.reduce((sum, price) => sum + price, 0);

console.log(total);
    출력
    3500

    sum 은 지금까지 모은 값이고 price 는 이번 값입니다. 돌려준 것이 다음 회차의 sum 이 됩니다. 마지막 0 이 시작 값입니다.

    한 회차씩 보기 
    const prices = [1000, 2000, 500];

const total = prices.reduce((sum, price) => {
	console.log(`${sum} + ${price} = ${sum + price}`);
	return sum + price;
}, 0);

console.log(`합계 ${total}`);
    출력
    0 + 1000 = 1000 1000 + 2000 = 3000 3000 + 500 = 3500 합계 3500
    상세 사용법

    reduce 로 최댓값 구하기

    모으는 것이 합계일 필요는 없습니다. 지금까지 본 것 중 큰 쪽을 이어 나가면 최댓값이 됩니다.

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

const best = scores.reduce((max, score) => score > max ? score : max, 0);
const count = scores.reduce((n) => n + 1, 0);

console.log(best);
console.log(count);
    출력
    91 3

    최댓값은 Math.max 로도 되지만, 모으는 방식을 바꾸면 무엇이든 만들 수 있다는 것이 reduce 의 쓸모입니다.

    흔한 실수

    처음에 자주 걸리는 것

    1. reduce 에서 return 을 빠뜨립니다

    돌려준 값이 다음 회차로 넘어갑니다. 빠뜨리면 두 번째 회차부터 undefined 를 받습니다. 

    prices.reduce((sum, p) => { sum + p; }, 0);   // NaN 이 나옵니다
    2. 시작 값을 적지 않습니다

    시작 값을 빼면 첫 값이 시작 값이 되어 회차가 하나 줄어듭니다. 빈 배열에서는 오류까지 납니다. 언제나 시작 값을 적으세요. 

    TypeError: Reduce of empty array with no initial value
    3. find 와 filter 를 헷갈립니다

    find 는 값 하나, filter 는 배열입니다. 하나를 기대하고 filter 를 쓰면 배열이 나와 그다음 코드가 어긋납니다.

    실습 문제

    직접 해보기

    1. 재고 확인하기 난이도 하

    재고 수 배열에서 품절(0)이 하나라도 있는지, 그리고 모두 재고가 있는지를 각각 출력하세요.

    const stocks = [5, 0, 2]; console.log(stocks.some(s => s === 0)); console.log(stocks.every(s => s > 0));
    2. 평균 구하기 난이도 중

    점수 배열의 평균을 reduce 로 구해 출력하세요. 빈 배열이면 0 입니다.

    합계를 구한 뒤 개수로 나눕니다. 개수가 0이면 먼저 걸러 냅니다.
    function average(scores) { if (scores.length === 0) return 0; const sum = scores.reduce((total, score) => total + score, 0); return sum / scores.length; } console.log(average([90, 80, 70])); // 80 console.log(average([])); // 0
    요약

    이 단원의 정리

    • find 는 첫 값 하나, 없으면 undefined 입니다.
    • some 은 하나라도, every 는 모두 맞아야 참입니다.
    • reduce 는 값들을 하나로 모읍니다. 돌려준 것이 다음 회차로 넘어갑니다.
    • reduce 에는 언제나 시작 값을 적습니다.
    • 모으는 방식을 바꾸면 합계·최댓값·개수 무엇이든 만들 수 있습니다.