14.1.2 실전 map 활용법 - 데이터 변환의 요리사 되기

📘 14.1.2 실전 map 활용법 - 데이터 변환의 요리사 되기

여러분, 안녕하세요. 지난 시간에 우리는 map()이라는 아름다운 도구로 배열을 간단하게 변화시키는 방법을 배웠죠? 배열의 모든 요소를 한 번에 새로운 모습으로 바꿔주는 그 조용하고 편리한 기능 말이에요.

오늘은 정말 멋진 요리사가 되어보는 시간입니다. 기본 요리법을 익힌 후에는 여러 가지 재료와 기법을 조합해서 정말 맛있는 요리를 만들어내는 것처럼, 우리도 map()을 다른 기능들과 함께 사용해서 더욱 강력한 데이터 처리를 해볼 거예요.

인터넷에서 받은 복잡한 정보들을 우리가 보기 좋은 모습으로 예쁘게 정리하는 실전 기술들... 마치 거친 돌을 다듬어 보석으로 만드는 장인의 손길처럼, 데이터를 다루는 세련된 방법들을 함께 익혀보아요.

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

실전 map을 사용할 때 알아두면 정말 유용한 단어들을 먼저 알아볼까요? 처음엔 낯설어 보일 수 있지만, 우리가 차근차근 풀어서 설명해드릴게요.

단어	쉬운 설명
여러 단계 연결하기	여러 개의 배열 변환 도구를 연결해서 연속으로 사용하는 방법이에요.
정보 바꾸기	하나의 형태의 정보를 다른 형태로 바꾸는 작업을 말해요.
값 쉽게 꺼내기	배열이나 정보 묶음에서 우리가 원하는 값들을 쉽게 꺼내는 방법이에요.
조건에 따라 바꾸기	특정 조건에 따라 서로 다르게 변환하는 방법이에요.

여러 단계 연결하기라는 말은 "체인(사슬)"에서 나온 말로, 여러 개의 고리가 연결된 것처럼 변환 도구들을 하나씩 연결해서 사용하는 것을 의미해요. 마치 공장에서 컨베이어 벨트를 따라 제품이 여러 단계를 거쳐 완성되는 것과 같아요.

✨ 실전 map의 핵심 개념

실전에서 map()을 사용할 때는 단순한 변환을 넘어서 여러 가지 정보를 함께 처리하는 일을 하게 돼요. 예를 들어 인터넷에서 받은 사람 정보를 화면에 보여주기 위해 이름, 나이, 등급을 조합해서 새로운 형태로 만드는 것이죠.

실전 map의 가장 아름다운 특징은 여러 단계의 변환을 자연스럽게 연결할 수 있다는 점이에요. 첫 번째 map()으로 기본 정보를 꺼내고, 두 번째 map()으로 계산을 하고, 세 번째 map()으로 최종 모습을 만드는 식으로 단계별로 처리할 수 있어요.

또한 실전에서는 조건에 따른 변환이 자주 필요해요. 점수에 따라 등급을 매기거나, 나이에 따라 다른 메시지를 보여주는 것처럼, 정보의 값에 따라 결과를 다르게 만드는 경우가 많아요.

재미있는 비유: 학급 명단 정리하는 담임선생님

실전 map을 더 따뜻하게 이해하기 위해 '학급 명단을 정리하는 담임선생님의 하루' 이야기를 들려드릴게요.

선생님 책상에는 학생들의 모든 정보가 담긴 기본 명단이 있어요. 하지만 상황에 따라 다른 형태의 명단이 필요하답니다.

출석을 확인할 때는 "이름만 있는 간단한 명단"이 필요하고, 학부모 상담을 할 때는 "이름 + 성적 + 특이사항"이 필요하며, 체육 시간에는 "이름을 정중하게 부르는 명단"이 필요해요. 생일파티를 할 때는 "이름 + 생일 + 나이"를 조합한 특별한 명단이 필요하죠.

선생님은 기본 명단을 보고 상황에 맞게 새로운 명단을 조용히 만들어요. 1단계에서 필요한 정보를 찾아내고, 2단계에서 계산이나 조합을 하고, 3단계에서 최종 모습으로 정리하는 것이죠.

실전 map도 똑같아요. 원본 정보를 상황에 맞게 단계별로 변환해서 최종적으로 우리가 원하는 모습을 조용히 만들어내는 거랍니다.

🎯 실전 map을 사용하는 이유

복잡한 정보 처리에서 실전 map을 사용하는 이유들을 알아보겠어요.

첫째로, 복잡한 변환을 단순하게 만들 수 있어요. 한 번에 모든 변환을 처리하려고 하면 코드가 복잡해지지만, map을 여러 번 연결하면 각 단계가 명확해져서 이해하기 쉬워져요. 마치 복잡한 요리를 단계별 레시피로 나누는 것과 같아요.

둘째로, 다시 사용할 수 있는 코드를 만들 수 있어요. 각 변환 단계를 독립적으로 만들면, 나중에 비슷한 상황에서 일부 단계만 다시 사용할 수 있어요. 예를 들어 "이름 꺼내기" 단계는 여러 곳에서 재활용할 수 있답니다.

셋째로, 문제 찾기가 쉬워져요. 문제가 생겼을 때 어느 단계에서 잘못되었는지 쉽게 파악할 수 있어요. 각 단계의 결과를 확인해보면서 문제가 있는 부분을 빠르게 찾을 수 있답니다.

⚙️ 기본 사용법 살펴보기

실전 map의 다양한 사용 패턴들을 차근차근 알아보겠어요.

// 정보 묶음에서 특정 부분만 꺼내기
let names = students.map(student => student.name);

// 조건에 따른 변환
let results = scores.map(score => score >= 60 ? "합격" : "불합격");

// 여러 부분을 조합해서 새 정보 묶음 만들기
let displayInfo = students.map(student => ({
    display: `${student.name}(${student.age}세)`,
    id: student.id
}));

여러 단계를 연결하는 예시:

let processed = students
    .map(student => student.score)     // 1단계: 점수만 꺼내기
    .map(score => score + 10)          // 2단계: 보너스 점수 추가
    .map(score => score >= 60 ? "합격" : "불합격"); // 3단계: 합격 판정

🧪 예제로 익혀보기

이제 실제 예제를 통해 실전 map의 다양한 활용법을 함께 배워보겠어요.

🔹 예제 1: 학생 정보를 화면 표시용으로 변환하기

첫 번째 예제에서는 복잡한 학생 정보를 화면에 보여주기 좋은 형태로 변환해보겠어요.

// 인터넷에서 받은 학생 정보들 (복잡한 구조)
let studentData = [
    { id: 1, firstName: "김", lastName: "철수", age: 10, grade: 4, score: 85 },
    { id: 2, firstName: "이", lastName: "영희", age: 11, grade: 5, score: 92 },
    { id: 3, firstName: "박", lastName: "민수", age: 9, grade: 3, score: 78 }
];

// 화면에 보여줄 형태로 변환 (단계별 처리)
let displayList = studentData
    .map(function(student) {
        // 1단계: 이름 붙이기와 기본 정보 정리
        return {
            id: student.id,
            fullName: student.lastName + student.firstName, // 성과 이름 붙이기
            age: student.age,
            grade: student.grade,
            score: student.score
        };
    })
    .map(function(student) {
        // 2단계: 화면 표시용 문자열 만들기
        return {
            id: student.id,
            displayName: student.fullName + "님", // 정중한 표현으로 변환
            gradeInfo: `${student.grade}학년 (${student.age}세)`, // 학년과 나이 조합
            scoreInfo: student.score + "점" // 점수에 단위 붙이기
        };
    });

console.log("화면용 학생 정보:", displayList);

이 과정을 차근차근 살펴보면, 첫 번째 map에서는 흩어진 정보들을 정리하고 이름을 붙여요. 두 번째 map에서는 화면에 보여주기 좋은 형태의 문자열들을 만들어요. 각 단계가 명확하게 구분되어 있어서 이해하기 쉽고 수정하기도 편하답니다.

🔹 예제 2: 상품 정보를 가격대별로 처리하기

두 번째 예제에서는 조건에 따라 다르게 변환하는 방법을 배워보겠어요.

// 상품 정보 자료
let products = [
    { name: "연필", price: 500, category: "문구" },
    { name: "노트북", price: 1200000, category: "전자제품" },
    { name: "지우개", price: 300, category: "문구" }
];

// 가격대에 따라 다른 정보 표시
let productInfo = products.map(function(product) {
    // 가격대 분류하기
    let priceLevel;
    if (product.price < 1000) {
        priceLevel = "저가";
    } else if (product.price < 100000) {
        priceLevel = "중가";
    } else {
        priceLevel = "고가";
    }

    // 가격대별 다른 표시 방식
    let displayPrice;
    if (priceLevel === "저가") {
        displayPrice = product.price + "원"; // 저가는 원단위로 표시
    } else {
        displayPrice = (product.price / 1000) + "천원"; // 중가/고가는 천원단위로 표시
    }

    return {
        name: product.name,
        priceLevel: priceLevel,
        displayPrice: displayPrice,
        category: product.category
    };
});

console.log("가격대별 상품 정보:", productInfo);

이 예제는 조건에 따른 변환의 좋은 예시예요. 상품의 가격에 따라 다른 분류를 하고, 그 분류에 따라 다른 표시 방식을 적용해요. 마치 상황에 맞게 옷을 골라 입는 것처럼, 정보의 특성에 맞게 적절한 형태로 변환하는 것이죠.

🔹 예제 3: 시험 점수를 종합 평가로 변환하기

세 번째 예제에서는 여러 단계의 복합 처리를 통해 최종 결과를 만들어보겠어요.

// 학생별 과목 점수 자료
let examResults = [
    { name: "철수", math: 85, english: 90, science: 88 },
    { name: "영희", math: 95, english: 85, science: 92 },
    { name: "민수", math: 75, english: 80, science: 78 }
];

// 3단계 변환으로 최종 평가 만들기
let finalEvaluation = examResults
    .map(function(student) {
        // 1단계: 평균 점수 계산
        let average = (student.math + student.english + student.science) / 3;
        return {
            name: student.name,
            average: Math.round(average), // 소수점 반올림
            subjects: { math: student.math, english: student.english, science: student.science }
        };
    })
    .map(function(student) {
        // 2단계: 등급 부여
        let grade;
        if (student.average >= 90) grade = "A";
        else if (student.average >= 80) grade = "B";
        else if (student.average >= 70) grade = "C";
        else grade = "D";

        return {
            name: student.name,
            average: student.average,
            grade: grade
        };
    });

console.log("최종 평가 결과:", finalEvaluation);

이 마지막 예제는 복합적인 정보 처리의 완벽한 사례예요. 1단계에서 평균을 계산하고, 2단계에서 등급을 부여해요. 각 단계가 독립적이어서 나중에 등급 기준을 바꾸고 싶으면 2단계만 수정하면 되고, 평균 계산 방식을 바꾸고 싶으면 1단계만 수정하면 돼요.

🔄 실전 map 활용 과정 정리

지금까지 배운 실전 map 활용 과정을 자연스럽게 정리해보겠어요.

첫 번째 단계는 정보 분석이에요. 원본 정보가 어떤 구조인지, 최종적으로 어떤 모습이 필요한지 파악하는 것이죠. 두 번째는 변환 계획 수립이에요. 복잡한 변환을 어떤 단계들로 나눌 것인지 계획을 세워요.

세 번째는 단계별 구현이에요. 각 단계를 독립적인 map으로 만들어서 연결해요. 네 번째는 중간 결과 확인이에요. 각 단계의 결과를 확인해보면서 의도한 대로 변환되었는지 점검해요.

마지막으로 최적화 및 활용이에요. 필요하다면 성능을 개선하고, 완성된 변환 과정을 실제 프로젝트에서 활용해요.

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

세상에는 참 많은 정보들이 있어요. 책들이 서가에 꽂혀 있듯이, 온도들이 하루하루 변해가듯이, 학생들이 각자의 점수를 안고 있듯이... 그런 정보들을 우리가 원하는 모습으로 조용히 바꿔주는 일, 그것이 바로 오늘 우리가 연습할 일이에요. 마치 정원사가 나무를 다듬듯이, 요리사가 재료를 준비하듯이, 차근차근 단계를 밟아가며 정보들을 아름답게 가꿔보는 시간입니다. 각각의 정보가 자신만의 새로운 모습으로 변해가는 과정을 함께 지켜보아요.

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

Ex1) 도서 정보를 "제목 - 저자" 형식으로 표시하는 목록을 만들어보자

// 도서 정보를 표시용으로 변환하기
let books = [
    { title: "해리포터", author: "J.K.롤링", pages: 300, price: 15000 },
    { title: "반지의 제왕", author: "톨킨", pages: 500, price: 20000 },
    { title: "어린왕자", author: "생텍쥐페리", pages: 100, price: 8000 }
];

let bookDisplayList = books.map(function(book) {
    return book.title + " - " + book.author;  // 제목과 저자를 연결해서 새로운 형태 만들기
});

console.log("도서 목록:", bookDisplayList);
// ["해리포터 - J.K.롤링", "반지의 제왕 - 톨킨", "어린왕자 - 생텍쥐페리"]

이 연습을 통해 정보 묶음의 여러 부분을 조합해서 새로운 문자열을 만드는 방법을 익힐 수 있어요.

Ex2) 온도 자료를 섭씨에서 화씨로 바꾸고 단위를 붙여서 보여주자

// 온도 변환하기 (섭씨 → 화씨)
let celsiusTemps = [0, 20, 30, 100];

let fahrenheitTemps = celsiusTemps.map(function(celsius) {
    let fahrenheit = (celsius * 9/5) + 32;  // 섭씨를 화씨로 변환하는 공식
    return fahrenheit + "°F";               // 변환된 온도에 단위 붙이기
});

console.log("화씨 온도:", fahrenheitTemps);
// ["32°F", "68°F", "86°F", "212°F"]

이 문제는 수식을 사용한 변환과 문자열 조합을 함께 연습하는 데 도움이 돼요.

Ex3) 학생 점수를 받아서 합격/불합격과 함께 이름을 보여주는 정보 목록을 만들어보자

// 시험 결과 처리하기
let testResults = [
    { name: "철수", score: 85 },
    { name: "영희", score: 45 },
    { name: "민수", score: 72 }
];

let evaluations = testResults.map(function(student) {
    return {
        name: student.name,                                    // 이름은 그대로 가져오기
        score: student.score,                                  // 점수도 그대로 가져오기
        result: student.score >= 60 ? "합격" : "불합격"        // 점수에 따라 합격/불합격 판정
    };
});

console.log("시험 평가:", evaluations);

이 연습문제를 통해 조건에 따른 변환과 새로운 정보 구조 만들기를 익힐 수 있어요.

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

기본 연습을 마쳤다면, 이제 조금 더 깊이 있는 문제들을 통해 실전 map에 대한 이해를 확인해보겠어요.

Q1. 다음 코드에서 문제점을 찾고 개선 방법을 설명해보세요.

let users = [{ name: "철수" }, { name: "영희", age: 11 }];
let userInfo = users.map(user => `${user.name}(${user.age}세)`);

정답: age 속성이 없는 정보 묶음이 있어서 "철수(undefined세)"같은 결과가 나와요.

해설: 모든 정보 묶음이 같은 속성을 가지고 있다고 가정하면 안 돼요. 존재하지 않을 수 있는 속성에 대해서는 기본값을 설정하거나 조건을 확인해야 해요. 개선된 코드는 다음과 같아요:

let userInfo = users.map(user => {
    let age = user.age || "나이 미상";  // age가 없으면 "나이 미상"으로 대체
    return `${user.name}(${age}세)`;
});

Q2. map을 여러 단계로 연결해서 사용하는 장점을 초등학생도 이해할 수 있게 설명해보세요.

정답: map을 여러 단계로 연결하는 것은 "단계별 요리 레시피"와 같아요. 복잡한 요리를 한 번에 하려고 하면 실수하기 쉽지만, "1단계: 재료 준비, 2단계: 조리, 3단계: 플레이팅"처럼 나누면 쉽고 정확하게 할 수 있어요.

해설: 여러 단계로 연결하는 장점은 복잡한 변환을 단순한 단계들로 나누어서 각각을 이해하기 쉽게 만드는 것이에요. 또한 중간 결과를 확인할 수 있어서 문제가 생겼을 때 어느 단계에서 잘못되었는지 쉽게 찾을 수 있어요.

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

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

복습 문제 1: setTimeout 사용하기

// 다음 코드의 실행 결과를 예측해보세요
console.log("시작");
setTimeout(function() {
    console.log("3초 후 실행");
}, 3000);
console.log("끝");

// 정답: "시작" → "끝" → (3초 후) "3초 후 실행"
// 해설: setTimeout은 비동기로 동작하므로 다른 코드가 먼저 실행되고 시간이 지난 후 콜백함수가 실행됩니다.

복습 문제 2: Promise 이해하기

// Promise의 기본 상태 3가지를 말해보세요
// 정답: 
// 1. pending (대기): 아직 결과가 나오지 않은 상태
// 2. fulfilled (이행): 성공적으로 완료된 상태
// 3. rejected (거부): 실패한 상태

// 간단한 Promise 예제
let myPromise = new Promise(function(resolve, reject) {
    setTimeout(function() {
        resolve("성공!");
    }, 1000);
});

myPromise.then(function(result) {
    console.log(result); // "성공!" 출력
});

지금까지 실전 map 활용법에 대해 자세히 알아보았어요. 실전에서는 단순한 변환을 넘어서 복잡한 정보를 단계별로 처리하는 것이 중요해요. 다음 시간에는 map과 함께 자주 사용되는 다른 배열 처리 도구들도 배워보겠어요.

✅ 학습 완료 체크리스트

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

학습 내용	이해했나요?
실전 map의 기본 개념	✅
여러 단계 연결 방법	✅
조건에 따른 변환	✅
자주 하는 실수들	✅
실전 예제 이해	✅

🎯 추가 연습 문제들

조금 더 연습하고 싶은 분들을 위한 추가 문제들이에요!

추가 문제 1. 책 정보 배열에서 "제목 - 저자" 형식의 문자열 배열을 만들어보세요.

// 답:
let books = [
    { title: "해리포터", author: "J.K.롤링", pages: 300 },
    { title: "반지의 제왕", author: "톨킨", pages: 500 },
    { title: "어린왕자", author: "생텍쥐페리", pages: 100 }
];

let bookList = books.map(function(book) {
    return book.title + " - " + book.author;
});

console.log("책 목록:", bookList);
// ["해리포터 - J.K.롤링", "반지의 제왕 - 톨킨", "어린왕자 - 생텍쥐페리"]

추가 문제 2. 온도 배열(섭씨)을 화씨로 변환하고 "00°F" 형식으로 만들어보세요.

// 답:
let celsius = [0, 20, 30, 100];

let fahrenheit = celsius.map(function(temp) {
    let fahrenheitTemp = (temp * 9/5) + 32;
    return fahrenheitTemp + "°F";
});

console.log("화씨 온도:", fahrenheit);
// ["32°F", "68°F", "86°F", "212°F"]

추가 문제 3. 학생 배열에서 합격/불합격을 판정하는 새 배열을 만들어보세요. (60점 이상 합격)

// 답:
let students = [
    { name: "철수", score: 85 },
    { name: "영희", score: 45 },
    { name: "민수", score: 72 }
];

let results = students.map(function(student) {
    return {
        name: student.name,
        result: student.score >= 60 ? "합격" : "불합격"
    };
});

console.log("시험 결과:", results);
// [
//   { name: "철수", result: "합격" },
//   { name: "영희", result: "불합격" },
//   { name: "민수", result: "합격" }
// ]

추가 문제 4. map 체이닝을 사용하는 장점을 2가지 설명해보세요.

답: 1) 각 변환 단계가 명확하게 구분되어 코드를 이해하기 쉽고, 2) 중간 결과를 저장할 임시 변수가 필요 없어서 코드가 깔끔해집니다.

추가 문제 5. 다음 코드에서 문제점을 찾고 개선해보세요.

let users = [{ name: "철수" }, { name: "영희", age: 11 }];
let info = users.map(user => `${user.name}(${user.age}세)`);

답: age 속성이 없는 객체가 있어서 "철수(undefined세)"같은 결과가 나옵니다. 개선된 코드:

let info = users.map(user => {
    let age = user.age || "나이 미상";
    return `${user.name}(${age}세)`;
});

🔄 단계별 진행 과정 정리

지금까지 배운 내용을 단계별로 다시 한번 정리해볼게요.

1단계 과정: 원본 데이터 → 필요한 형태로 변환 → 화면 표시 준비 완료

2단계 과정: 상품 정보 → 가격 형식 변환 → 할인 적용 → 새로운 구조 생성

3단계 과정: 원본 점수 → 평균 계산 → 등급 부여 → 최종 결과

📂 마무리 정보

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

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

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

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

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

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

💻 무료로 학습하러 가기

---