14.3.1 `reduce` - 배열의 모든 요소를 하나로 모으는 도구

📘 14.3.1 reduce - 배열의 모든 요소를 하나로 모으는 도구

안녕하세요, 여러분. 오늘은 배열의 요소들을 하나로 합쳐주는 특별한 도구, reduce를 만나볼 차례입니다.

마치 여러 개의 퍼즐 조각을 모아서 하나의 완성된 그림을 만드는 것처럼, reduce는 배열의 모든 요소들을 차례대로 모아서 하나의 결과를 만들어내는 유용한 도구랍니다. 우리가 동전을 저금통에 하나씩 넣으면서 총액이 점점 늘어나는 것처럼 말이에요.

🧠 새로운 단어들과 친해지기

reduce를 이해하는 데 필요한 중요한 단어들을 차근차근 설명해드리겠습니다.

단어	의미
reduce	배열의 모든 요소를 하나씩 처리해서 마지막에 하나의 값으로 만드는 도구입니다.
누적값	계산하는 동안 계속 쌓여가는 중간 결과값을 말합니다.
초기값	계산을 시작할 때 가장 먼저 사용하는 기준값입니다.
처리 함수	reduce에게 "어떻게 계산할지"를 알려주는 함수입니다.

reduce는 "줄이다"라는 뜻의 영어 단어에서 나왔습니다. 많은 것들을 줄여서 하나로 만든다는 의미랍니다.

✨ reduce의 핵심 개념

reduce는 자바스크립트에서 가장 강력한 배열 도구 중 하나입니다. 이 도구의 특별한 점은 배열의 모든 요소를 순서대로 하나씩 처리하면서, 계속해서 결과를 쌓아 나간다는 것입니다.

reduce는 마치 동전 저금통과 같습니다. 동전을 하나씩 넣을 때마다 총액이 점점 늘어나듯이, 배열의 각 요소를 처리할 때마다 결과가 계속 쌓여가는 거지요. 마지막에는 배열 전체를 처리한 하나의 완성된 결과를 얻게 됩니다.

reduce를 사용하면 합계 계산, 평균 구하기, 최댓값 찾기, 문자열 연결 등 다양한 작업을 매우 쉽게 할 수 있어요. 특히 복잡한 데이터를 간단한 형태로 정리할 때 정말 유용하답니다.

따뜻한 비유: 요리사의 맛있는 국물 만들기

reduce를 더 쉽게 이해하기 위해 '요리사가 맛있는 국물을 만드는 과정'에 비유해보겠습니다.

요리사가 맛있는 국물을 만들기 위해 여러 재료를 하나씩 넣어가는 모습을 상상해보세요. 처음에는 깨끗한 물로 시작합니다(시작값). 그다음 양파 한 조각을 넣고 끓이면 양파 맛이 우러나온 국물이 됩니다. 여기에 당근을 추가하면 양파와 당근의 맛이 어우러진 더 깊은 국물이 되지요.

이런 식으로 감자, 고기, 향신료를 차례대로 넣을 때마다 국물의 맛은 점점 더 깊어지고 맛있어집니다. 마지막에는 모든 재료의 맛이 하나로 어우러진 완성된 맛있는 국물이 탄생하는 거예요.

reduce도 똑같습니다. 배열의 각 요소(재료)를 하나씩 가져와서, 기존 결과(국물)와 합쳐서 새로운 결과를 만들어내는 과정을 반복하는 거랍니다.

🎯 reduce를 배우는 이유

그렇다면 우리는 왜 reduce를 배워야 할까요? 여러 중요한 이유들이 있습니다.

첫 번째로, reduce는 복잡한 계산을 간단하게 만들어줍니다. 예를 들어 배열의 모든 숫자를 더해서 합계를 구하거나, 가장 큰 값을 찾는 작업을 몇 줄의 코드로 쉽게 해결할 수 있어요.

두 번째로, reduce는 다양한 문제에 응용할 수 있습니다. 숫자 계산뿐만 아니라 문자열을 연결하거나, 복잡한 데이터를 정리하는 일까지 모두 가능해요. 마치 만능 도구와 같답니다.

세 번째로, reduce를 이해하면 프로그래밍 사고력이 크게 좋아집니다. "여러 개의 것을 하나로 합치는" 개념은 프로그래밍에서 자주 나타나는 패턴이거든요.

마지막으로, reduce는 실무에서 정말 많이 사용되는 도구입니다. 데이터 분석이나 통계 계산 등에서 없어서는 안 될 중요한 도구랍니다.

⚙️ 기본 사용법 살펴보기

reduce의 기본적인 사용법을 차근차근 알아보겠습니다.

// 가장 기본적인 reduce 사용법
let 결과 = 배열.reduce(function(누적값, 현재값) {
    return 새로운누적값;
}, 시작값);

// 화살표 함수를 사용한 간단한 형태
let 결과 = 배열.reduce((누적값, 현재값) => 새로운누적값, 시작값);

기본 예시: 숫자들의 합 구하기

let numbers = [1, 2, 3, 4, 5];

let sum = numbers.reduce(function(total, current) {
    return total + current;  // 지금까지의 합계에 현재 숫자를 더하기
}, 0);

console.log(sum); // 15 (1+2+3+4+5)

여기서 중요한 부분들을 설명해드릴게요. total은 지금까지 계산된 합계(누적값)이고, current는 지금 처리하고 있는 배열의 요소입니다. 0은 계산을 시작할 때의 시작값이에요.

🧪 예제로 익혀보기

이제 실제 예제들을 통해 reduce가 어떻게 동작하는지 자세히 살펴보겠습니다.

🔹 예제 1: 점수들의 총합 구하기

우리 반 친구들의 수학 시험 점수를 모두 더해서 총합을 구해보겠습니다.

// 우리 반 친구들의 수학 점수
let mathScores = [85, 92, 78, 96, 88];

// reduce를 사용해서 총점 계산하기
let totalScore = mathScores.reduce(function(sum, score) {
    console.log(`지금까지의 합: ${sum}, 지금 더할 점수: ${score}`);
    return sum + score;  // 지금까지의 합에 현재 점수를 더해서 새로운 합 만들기
}, 0);

console.log("수학 총점:", totalScore); // 439점
console.log("평균 점수:", totalScore / mathScores.length); // 87.8점

이 예제에서는 시작값을 0으로 설정하고, 각 점수를 차례대로 더해가며 최종 총점을 구합니다. 계산 과정을 보면 0 → 85 → 177 → 255 → 351 → 439 순서로 쌓여가요.

🔹 예제 2: 가장 높은 온도 찾기

일주일 동안의 온도 기록에서 가장 높은 온도를 찾아보겠습니다.

// 이번 주 매일의 최고 온도
let temperatures = [23, 31, 17, 28, 35, 19, 33];

// reduce로 최고 온도 찾기
let maxTemp = temperatures.reduce(function(highest, current) {
    console.log(`현재 최고: ${highest}도, 오늘 온도: ${current}도`);

    if (current > highest) {
        return current; // 더 높은 온도 발견!
    } else {
        return highest; // 기존 최고 온도 유지
    }
});

console.log("이번 주 최고 온도:", maxTemp + "도"); // 35도

이 예제에서는 시작값을 따로 설정하지 않았습니다. 그러면 배열의 첫 번째 값(23)이 자동으로 시작값이 되고, 두 번째 값(31)부터 비교를 시작해요.

🔹 예제 3: 인사말 문장 만들기

여러 개의 단어를 연결해서 완성된 인사말을 만들어보겠습니다.

// 인사말을 구성하는 단어들
let greetingWords = ["안녕하세요", "저는", "초등학생", "김철수입니다"];

// reduce로 완성된 문장 만들기
let greeting = greetingWords.reduce(function(sentence, word, index) {
    // 첫 번째 단어면 그대로, 아니면 앞에 공백 추가
    if (index === 0) {
        return word;                      // 첫 번째 단어는 그대로 사용
    } else {
        return sentence + " " + word;     // 기존 문장에 공백과 함께 새 단어 추가
    }
}, "");

console.log("완성된 인사말:", greeting); 
// "안녕하세요 저는 초등학생 김철수입니다"

이 예제에서는 빈 문자열("")을 시작값으로 하고, 각 단어를 공백과 함께 연결해서 완성된 문장을 만듭니다.

🔄 reduce 사용 과정 정리

지금까지 배운 reduce의 사용 과정을 단계별로 정리해보겠습니다.

첫 번째 단계는 시작값 설정입니다. 계산을 시작할 기준점을 정하는 거예요. 합계를 구할 때는 0, 곱셈을 할 때는 1처럼 적절한 값을 선택해야 합니다.

두 번째는 배열 순회 단계입니다. 배열의 각 요소를 순서대로 하나씩 가져와서 처리해요. 마치 줄을 서서 기다리는 사람들을 차례대로 만나는 것과 같습니다.

세 번째는 계산 수행 단계입니다. 지금까지의 누적 값과 현재 요소를 가지고 원하는 계산을 수행해요. 이 부분이 reduce의 핵심입니다.

마지막으로 결과 쌓기 단계입니다. 계산한 결과를 다음 단계로 전달해서 계속 쌓이도록 해요. 이 과정을 모든 요소에 대해서 반복하면 최종 결과를 얻을 수 있습니다.

🧠 자주 하는 실수와 주의할 점

reduce를 사용할 때 초보자들이 자주 하는 실수들을 알아보고, 어떻게 피할 수 있는지 살펴보겠습니다.

❌ 실수 1: 결과를 반환하지 않기

// 잘못된 예시 - return을 깜빡함
let numbers = [1, 2, 3, 4, 5];
let wrongSum = numbers.reduce(function(sum, num) {
    sum + num; // return이 없어요!
}, 0);
console.log(wrongSum); // undefined가 나와요

// 올바른 예시
let correctSum = numbers.reduce(function(sum, num) {
    return sum + num; // return 필수!
}, 0);
console.log(correctSum); // 15

reduce의 함수는 항상 다음 단계로 넘겨줄 값을 return해야 합니다. 이를 잊으면 undefined가 나와요.

❌ 실수 2: 시작값을 설정하지 않아서 생기는 문제

// 빈 배열에서 시작값 없이 reduce 사용
let emptyArray = [];
// let result = emptyArray.reduce((a, b) => a + b); // 에러 발생!

// 안전한 방법 - 시작값 설정
let safeResult = emptyArray.reduce((a, b) => a + b, 0);
console.log(safeResult); // 0

빈 배열에서 시작값 없이 reduce를 사용하면 에러가 발생합니다. 항상 적절한 시작값을 설정하는 것이 안전해요.

❌ 실수 3: 잘못된 시작값 사용하기

// 곱셈인데 시작값을 0으로 설정
let numbers = [2, 3, 4];
let wrongProduct = numbers.reduce((result, num) => result * num, 0);
console.log(wrongProduct); // 0 (모든 것에 0을 곱하면 0)

// 올바른 시작값
let correctProduct = numbers.reduce((result, num) => result * num, 1);
console.log(correctProduct); // 24 (2×3×4)

계산의 종류에 따라 적절한 시작값을 선택해야 합니다. 더하기는 0, 곱하기는 1이 기본이에요.

✏️ 연습문제로 개념 다지기

이제 우리만의 소중한 연습 시간입니다. 마치 새로운 악기를 연주하는 법을 배우는 것처럼, 천천히 손에 익을 때까지 반복해보겠습니다. 실수를 해도 괜찮아요. 그것도 배움의 한 과정이니까요.

배운 내용을 연습문제를 통해 확실히 익혀보겠습니다.

Ex1) 친구들의 용돈을 모두 더해서 총액을 구하는 "용돈 총액 계산기" 만들어보자

// 친구들이 가지고 있는 용돈
let allowances = [5000, 3000, 8000, 2000, 6000];

// reduce를 사용해서 총액 구하기
let totalAllowance = allowances.reduce(function(total, money) {
    return total + money;  // 지금까지의 총액에 현재 용돈을 더하기
}, 0);

console.log("친구들 용돈 총액:", totalAllowance + "원"); // 24000원

Ex2) 과일 이름들을 연결해서 하나의 문장을 만드는 "과일 좋아요 문장 만들기" 해보자

// 좋아하는 과일들
let fruits = ["사과", "바나나", "딸기", "포도"];

// reduce로 문장 만들기
let fruitSentence = fruits.reduce(function(sentence, fruit, index) {
    if (index === 0) {
        return "저는 " + fruit;                           // 첫 번째 과일은 "저는 ○○"로 시작
    } else if (index === fruits.length - 1) {
        return sentence + "와 " + fruit + "를 좋아해요";    // 마지막 과일은 "와 ○○를 좋아해요"로 끝
    } else {
        return sentence + ", " + fruit;                   // 중간 과일들은 쉼표로 연결
    }
}, "");

console.log(fruitSentence); // "저는 사과, 바나나, 딸기와 포도를 좋아해요"

Ex3) 배열에서 가장 긴 문자열을 찾는 "가장 긴 이름 찾기" 해보자

// 동물 이름들
let animals = ["고양이", "코끼리", "나비", "기린", "햄스터"];

// reduce로 가장 긴 이름 찾기
let longestName = animals.reduce(function(longest, current) {
    if (current.length > longest.length) {
        return current;   // 현재 이름이 더 길면 현재 이름을 새로운 최고로 설정
    } else {
        return longest;   // 기존 최고 이름 유지
    }
});

console.log("가장 긴 동물 이름:", longestName); // "햄스터"

🤔 심화 문제로 실력 확인하기

더 깊이 있는 문제들을 통해 reduce에 대한 이해를 확인해보겠습니다.

Q1. reduce를 친구에게 설명한다면 어떻게 설명하겠나요?

정답: "reduce는 마치 동전 저금통 같아요. 동전을 하나씩 넣을 때마다 총액이 점점 늘어나듯이, 배열의 각 요소를 하나씩 가져와서 계속 모아서 마지막에 하나의 결과를 만드는 거예요."

Q2. 다음 코드의 실행 결과를 예측해보세요.

let numbers = [2, 4, 6];
let result = numbers.reduce((a, b) => a + b);
console.log(result);

정답: 12가 출력됩니다. 시작값이 없어서 첫 번째 값(2)이 시작값이 되고, 4와 6을 차례대로 더해서 2+4+6=12가 됩니다.

📚 13단원 복습 - 비동기 처리 기억하기

14단원을 계속 배우기 전에 지난 시간에 배운 비동기 처리에 대해 간단히 복습해볼까요?

복습 문제 1: 여러 Promise 다루기

// Promise.all과 Promise.race의 차이점을 설명하고 예시를 써보세요

// Promise.all - 모든 Promise가 완료될 때까지 기다림
let promise1 = fetch('/api/data1');
let promise2 = fetch('/api/data2');
let promise3 = fetch('/api/data3');

Promise.all([promise1, promise2, promise3])
    .then(function(results) {
        console.log("모든 데이터 로딩 완료:", results);
    });

// Promise.race - 가장 먼저 완료되는 Promise만 기다림
Promise.race([promise1, promise2, promise3])
    .then(function(result) {
        console.log("가장 먼저 완료된 결과:", result);
    });

// 정답: Promise.all은 모든 Promise가 완료되어야 결과를 반환하지만,
// Promise.race는 가장 빨리 완료되는 하나만 기다립니다.

복습 문제 2: 에러 처리하기

// async/await에서 에러를 처리하는 방법을 보여주세요

async function getUserData(userId) {
    try {
        let userResponse = await fetch(`/api/user/${userId}`);

        if (!userResponse.ok) {
            throw new Error("사용자 데이터를 가져올 수 없습니다");
        }

        let userData = await userResponse.json();
        console.log("사용자 정보:", userData);
        return userData;

    } catch (error) {
        console.log("에러 발생:", error.message);
        return null;
    }
}

// 정답: try-catch 블록을 사용해서 await에서 발생할 수 있는 에러를 안전하게 처리합니다.

🧚‍♀️ 이야기로 다시 배우기: 계산기 선생님의 특별한 수업

마지막으로 reduce를 하나의 재미있는 이야기로 정리해볼까요?

우리 학교에 계산기 선생님이라는 별명을 가진 수학 선생님이 계셨습니다. 이 선생님은 여러 개의 숫자를 하나의 결과로 만드는 특별한 능력을 가지고 있었답니다.

어느 날, 학생들이 자신들의 시험 점수를 모두 더해서 총점을 계산하고 싶어했어요. 계산기 선생님은 칠판에 0을 쓰고(시작값), 학생들의 점수를 하나씩 더해가며 설명했습니다. "첫 번째 점수 85점, 0에 더하면 85점!" 이런 식으로 모든 점수를 더하고 나니 총 439점이라는 결과가 나왔어요.

다른 수업에서는 학생들이 이번 주 중 가장 더운 날을 찾고 싶어했습니다. 계산기 선생님은 첫 번째 온도를 기준으로 잡고, 나머지 온도들과 하나씩 비교해서 더 높은 것을 계속 찾아갔어요. 마침내 35도라는 최고 온도를 찾아냈어요.

또 다른 시간에는 학생들이 자기 이름을 하나의 긴 문장으로 만들고 싶어했습니다. 계산기 선생님은 빈 종이를 준비하고, 각 학생의 이름을 차례대로 적으면서 공백으로 연결했어요. "철수 영희 민수 지혜"라는 완성된 명단이 탄생했어요.

이처럼 계산기 선생님(reduce)은 여러 개의 것들을 받아서 항상 하나의 완성된 결과를 만들어주는 뛰어난 능력을 가지고 있었답니다. 여러분도 이제 이 방법을 배웠으니, 언제든지 배열의 요소들을 하나로 모을 수 있게 되었어요!

지금까지 reduce의 모든 특성과 활용법을 자세히 알아보았습니다. reduce는 배열의 요소들을 하나로 모아주는 강력한 도구로, 여러분의 프로그래밍 실력을 한 단계 높여줄 것입니다.

✅ 학습 완료 체크리스트

이번 시간에 배운 내용들을 모두 이해했는지 확인해보세요!

학습 내용	이해했나요?
reduce의 기본 개념	✅
기본 사용법과 문법	✅
주요 특징과 차이점	✅
자주 하는 실수들	✅
실전 예제 이해	✅

📂 마무리 정보

오늘 배운 14.3.1 내용이 여러분의 자바스크립트 지식 상자에 잘 저장되었나요? 다음 시간에는 더 재미있는 내용으로 만나요!

기억할 점: 오늘 배운 내용을 꼭 연습해보시고, 궁금한 점이 있으면 언제든 다시 돌아와서 읽어보세요.

🚀 더 체계적인 JavaScript 학습을 원하신다면?

이 포스팅에서 다룬 내용을 실제로 실습해보세요!
무료 JavaScript 학습 플랫폼에서 단계별 학습과 실시간 코드 실행을 통해
더욱 효과적이고 재미있게 학습하실 수 있습니다.

📝 실시간 코드 실행 📊 학습 진도 관리 👥 체계적 커리큘럼

📚 171개 체계적 학습레슨 · 📋 855개 4지선다 연습문제 · 🆓 완전 무료 · ⚡ 즉시 시작

💻 무료로 학습하러 가기

---