📘 14.1.1 배열 변환기 map() - 모든 것을 똑같이 바꿔주는 편리한 도구
여러분, 안녕하세요. 오늘은 정말 아름답고 신기한 배열의 능력을 배워보는 시간입니다. 혹시 어린 시절, 투명한 물감통에 여러 색깔의 물감을 넣고 하나씩 섞어가며 새로운 색을 만들어본 적이 있나요? 빨간색 물감에 파란색을 한 방울씩 떨어뜨리면서 보라색이 되어가는 과정을 지켜보는 그 마음...
오늘 배울 map()이라는 기능도 그와 비슷한 경이로움을 가지고 있어요. 마치 부드러운 변환의 손길처럼, 배열 안에 있는 모든 요소들을 똑같은 방법으로 새로운 모습으로 바꿔주는 거죠. 빨간 구슬들을 모두 파란 구슬로, 작은 사탕들을 모두 큰 사탕으로 말이에요. 원본은 그대로 두고, 새로운 세상을 만들어내는 조용한 변환의 기적을 함께 경험해보아요.
🧠 새로운 단어들과 친해지기
배열을 자동으로 변환시키는 데 필요한 새로운 단어들을 먼저 알아볼까요? 처음엔 낯설어 보일 수 있지만, 우리가 차근차근 풀어서 설명해드릴게요.
| 단어 | 쉬운 설명 |
|---|---|
| map() | 배열 안의 모든 것을 똑같은 방법으로 바꿔서 새로운 배열을 만들어주는 기능이에요. 마치 복사기처럼요. |
| 변환하기 | 하나의 모습을 다른 모습으로 바꾸는 것이에요. 마치 애벌레가 나비가 되는 것처럼요. |
| 변환 함수 | map에게 "이렇게 바꿔줘!"라고 알려주는 지시서예요. 마치 요리 레시피 같아요. |
| 원본 배열 | 변환을 하기 전의 원래 배열이에요. 변환을 해도 원본은 그대로 남아있어요. |
map()은 "지도"라는 뜻도 있지만, 프로그래밍에서는 "연결해서 바꾸다"라는 뜻으로 사용해요. 마치 번역가가 한국어를 영어로 바꾸는 것처럼, 배열의 각 요소를 새로운 모습으로 바꿔주는 역할을 한답니다.
✨ map() 기능이 뭔지 알아보기
map()은 배열을 다루는 변환의 예술가라고 생각하면 돼요. 우리가 변환 규칙만 알려주면, 배열 안의 모든 요소들을 그 규칙에 따라 자동으로 바꿔서 새로운 배열을 조용히 만들어줘요.
map() 기능의 가장 아름다운 점은 원본을 절대 망가뜨리지 않는다는 거예요. 마치 사진을 찍을 때 원본은 그대로 두고 복사본만 만드는 것처럼, 원래 배열은 전혀 건드리지 않고 새로운 배열만 만들어서 조용히 건네줘요. 이건 정말 안전하고 믿을 수 있는 기능이에요.
또한 map() 기능은 하나도 빠뜨리지 않고 정확히 똑같은 개수로 만들어줘요. 원본 배열에 요소가 5개 있으면 새로운 배열도 정확히 5개의 요소를 가져요. 개수는 절대 변하지 않고, 단지 각 요소의 모습만 조용히 바뀔 뿐이에요.
재미있는 비유: 조용한 빵집의 하루
map() 기능을 더 따뜻하게 이해하기 위해서 '조용한 빵집의 하루' 이야기를 들려드릴게요.
우리 동네에 정말 특별한 빵집이 있어요. 이 빵집에는 부드럽게 움직이는 컨베이어 벨트가 있답니다. 벨트 위에 [밀가루, 밀가루, 밀가루] 같은 재료들을 가만히 올려놓으면, 가운데 있는 조용한 변환의 손길이 각각을 [따뜻한 빵, 따뜻한 빵, 따뜻한 빵]으로 바꿔줘요.
여기서 가장 아름다운 점은 재료 창고는 그대로 남아있다는 거예요! 밀가루를 사용해서 빵을 만들었지만, 창고의 밀가루는 하나도 줄어들지 않아요. 마치 특별한 복사기처럼 원본은 그대로 두고 변환된 복사본만 조용히 만들어내는 거예요.
변환 규칙도 자유자재로 바꿀 수 있어요. "밀가루를 빵으로", "우유를 아이스크림으로", "과일을 맛있는 주스로" 등 어떤 변환이든 가능해요. 빵집 주인이 "이렇게 바꿔줘"라고 부드럽게 말하기만 하면 되거든요.
map() 기능도 이와 똑같아요. 우리가 원하는 어떤 변환 규칙이든 조용히 알려주면, 배열 안의 모든 것들을 그 규칙대로 부드럽게 바꿔준답니다.
🎯 왜 map() 기능을 사용할까요?
"그런데 선생님, 왜 굳이 이 기능을 사용해야 하나요? 다른 방법도 있지 않나요?" 이런 궁금증이 생길 수 있어요. map() 기능에는 정말 멋진 장점들이 많아요!
첫 번째로 코드가 정말 간단해져요. 반복문을 사용해서 새 배열을 만들려면 여러 줄의 복잡한 코드가 필요하지만, map() 기능을 사용하면 한 줄로 끝낼 수 있어요. 마치 세탁기를 사용하는 것과 손으로 빨래하는 것의 차이 같아요.
두 번째로 정말 안전해요. 원본 배열을 절대 망가뜨리지 않기 때문에 나중에 원본이 필요할 때 그대로 사용할 수 있어요. 실수로 소중한 정보를 잃어버릴 걱정이 전혀 없답니다.
세 번째로 다른 사람이 코드를 보기 쉬워져요. map()을 보면 "아, 이 코드는 배열을 변환시키는구나"라고 바로 알 수 있어요. 마치 간판을 보고 무슨 가게인지 아는 것처럼요.
네 번째로 실수할 가능성이 줄어들어요. 복잡한 반복문을 직접 쓰다 보면 실수하기 쉽지만, map() 기능은 자동으로 모든 일을 처리해주니까 훨씬 안전해요.
⚙️ map() 기능 사용법 배우기
이제 실제로 map() 기능을 어떻게 사용하는지 차근차근 배워볼까요? 사용법은 생각보다 간단해요!
// 기본적인 map 사용법
let 새로운배열 = 원본배열.map(function(각각의물건) {
return 바뀐물건;
});
// 더 간단한 화살표 함수 방법
let 새로운배열 = 원본배열.map(각각의물건 => 바뀐물건);실제 예시:
let 숫자들 = [1, 2, 3];
let 두배로만든숫자들 = 숫자들.map(function(숫자) {
return 숫자 * 2;
});
console.log(숫자들); // [1, 2, 3] (원본 그대로!)
console.log(두배로만든숫자들); // [2, 4, 6] (새로운 배열!)변환 함수가 받을 수 있는 정보들:
첫 번째 (꼭 필요함): 지금 바꾸고 있는 물건
두 번째 (필요하면 사용): 그 물건이 몇 번째에 있는지 (0부터 시작)
세 번째 (필요하면 사용): 전체 배열
🧪 직접 해보면서 배우기
이제 실제 예시를 통해서 map() 기능의 다양한 사용법을 함께 연습해볼게요.
🔹 첫 번째 예시: 점수를 모두 두 배로 만들기
첫 번째로는 시험 점수들을 모두 두 배로 만드는 간단한 변환을 해볼게요.
// 시험 점수들을 모두 두 배로 만들어보자!
let 원래점수들 = [45, 67, 89, 92, 78];
// map 기능을 사용해서 각 점수를 두 배로 변환시키기
let 두배점수들 = 원래점수들.map(function(점수) {
return 점수 * 2; // 각 점수에 2를 곱해서 두 배로 만들기
});
console.log("원래 점수들:", 원래점수들); // [45, 67, 89, 92, 78]
console.log("두 배 점수들:", 두배점수들); // [90, 134, 178, 184, 156]
// 원본이 정말 안전하게 남아있는지 다시 한 번 확인해보자
console.log("원본이 그대로인가요?", 원래점수들); // [45, 67, 89, 92, 78] (그대로!)이 과정을 차근차근 살펴보면, 먼저 map() 기능이 원본 배열에 있는 각 점수를 하나씩 가져와요. 그다음 각 점수에 2를 곱해서 새로운 값을 만들고, 이 새로운 값들로 완전히 새로운 배열을 조용히 만들어줘요. 마지막으로 원본 배열이 전혀 변하지 않았다는 것을 확인할 수 있어요. 정말 안전한 기능이죠!
🔹 두 번째 예시: 과일 이름을 모두 크게 쓰기로 바꾸기
두 번째로는 과일 이름들을 모두 대문자(크게 쓰기)로 바꿔보겠어요.
// 과일 이름들을 모두 대문자로 바꿔보자!
let 과일들 = ["apple", "banana", "orange"];
// 각 과일 이름을 대문자로 변환시키기
let 대문자과일들 = 과일들.map(function(과일) {
return 과일.toUpperCase(); // 각 과일 이름을 대문자로 바꾸기
});
console.log("원래 과일들:", 과일들); // ["apple", "banana", "orange"]
console.log("대문자 과일들:", 대문자과일들); // ["APPLE", "BANANA", "ORANGE"]
// 화살표 함수라는 더 간단한 방법으로도 할 수 있어요
let 대문자과일들2 = 과일들.map(과일 => 과일.toUpperCase());
console.log("화살표 함수 결과:", 대문자과일들2); // ["APPLE", "BANANA", "ORANGE"]이 예시에서는 문자열의 toUpperCase()라는 특별한 기능을 사용해서 각 과일 이름을 대문자로 변환시켰어요. 화살표 함수(=>)를 사용하면 코드를 더욱 간결하게 쓸 수 있어요. 여기서도 중요한 점은 원본 배열의 과일 이름들은 전혀 변하지 않았다는 거예요.
🔹 세 번째 예시: 학생 정보에서 이름만 쏙쏙 뽑아내기
세 번째로는 복잡한 학생 정보가 담긴 배열에서 이름만 골라내는 방법을 배워볼게요.
// 학생들의 자세한 정보가 담긴 배열
let 학생들 = [
{ 이름: "철수", 나이: 10, 좋아하는과목: "수학" },
{ 이름: "영희", 나이: 11, 좋아하는과목: "과학" },
{ 이름: "민수", 나이: 9, 좋아하는과목: "국어" }
];
// 각 학생의 복잡한 정보에서 이름만 쏙쏙 뽑아내기
let 학생이름들 = 학생들.map(function(학생) {
return 학생.이름; // 각 학생 정보에서 이름만 가져오기
});
console.log("학생 이름들:", 학생이름들); // ["철수", "영희", "민수"]
// 이름에 "학생"이라는 말을 붙여서 더 정중하게 만들기
let 정중한이름들 = 학생들.map(function(학생) {
return 학생.이름 + " 학생"; // 이름 뒤에 "학생" 붙이기
});
console.log("정중한 이름들:", 정중한이름들); // ["철수 학생", "영희 학생", "민수 학생"]
// 각 학생의 소개문 만들기
let 소개문들 = 학생들.map(function(학생) {
return "안녕하세요! 저는 " + 학생.이름 + "이고, " + 학생.나이 + "살이에요!";
});
console.log("소개문들:", 소개문들);
// ["안녕하세요! 저는 철수이고, 10살이에요!", "안녕하세요! 저는 영희이고, 11살이에요!", "안녕하세요! 저는 민수이고, 9살이에요!"]이 예시는 map() 기능의 정말 강력한 활용법을 보여줘요. 복잡한 학생 정보에서 필요한 부분만 쏙쏙 뽑아내거나, 기존 정보를 활용해서 완전히 새로운 형태로 만들 수 있어요. 학생 정보를 담은 배열을 이름만 담은 배열로 바꾸는 것도 가능하고, 원하는 형식으로 가공하는 것도 쉬워요.
🔄 map() 기능 사용 과정 정리하기
지금까지 학습한 map() 기능 사용 과정을 자연스럽게 정리해볼게요.
첫 번째 단계는 원본 배열 준비하기예요. 변환시키고 싶은 요소들이 담긴 배열을 준비하는 거죠.
두 번째 단계는 변환 규칙 정하기예요. 각 요소를 어떻게 바꿀 것인지를 함수로 정해요. 마치 "빨간 구슬을 파란 구슬로 바꿔줘"라는 규칙을 정하는 것과 같아요.
세 번째 단계는 map() 기능 사용하기예요. 배열.map(변환규칙함수) 형태로 기능을 사용해서 변환을 시작해요.
네 번째 단계는 각각 하나씩 변환시키기예요. map() 기능이 배열의 각 요소에 변환 규칙을 적용해서 새로운 모습으로 바꿔줘요.
마지막 단계는 새로운 배열 받기예요. 변환된 모든 요소들로 만들어진 완전히 새로운 배열을 받게 돼요. 이 모든 과정에서 원본 배열은 전혀 변하지 않고 안전하게 보호돼요.
🧠 자주 하는 실수와 주의할 점
map() 기능을 사용할 때 초보자들이 자주 하는 실수들을 미리 알아두면 더 완벽한 코딩을 할 수 있어요.
❌ 실수 1: return을 빼먹고 사용하기
// 이렇게 하면 기능이 제대로 안 돼요!
let 숫자들 = [1, 2, 3];
let 결과 = 숫자들.map(function(숫자) {
숫자 * 2; // return을 빼먹었어요!
});
console.log(결과); // [undefined, undefined, undefined] - 이상해요!
// 올바른 방법
let 숫자들2 = [1, 2, 3];
let 올바른결과 = 숫자들2.map(function(숫자) {
return 숫자 * 2; // return을 넣어야 해요!
});
console.log(올바른결과); // [2, 4, 6] - 완벽해요!이런 실수가 발생하는 이유는 함수에서 return이라는 단어가 없으면 JavaScript가 자동으로 undefined(정의되지 않음)을 돌려주기 때문이에요. 계산은 실행되지만 결과가 돌아오지 않아서, map() 기능이 undefined 값들로 새 배열을 만들게 돼요.
❌ 실수 2: 원본 배열을 바꾸려고 시도하기
// 이렇게 하면 안 돼요! map은 원본을 바꾸지 않아요
let 점수들 = [80, 90, 75];
점수들.map(function(점수) {
return 점수 + 10;
}); // 결과를 저장하지 않았어요!
console.log(점수들); // [80, 90, 75] - 원본은 그대로예요!
// 올바른 방법
let 점수들2 = [80, 90, 75];
let 보너스점수들 = 점수들2.map(function(점수) {
return 점수 + 10; // 새로운 배열에 저장해야 해요!
});
console.log(점수들2); // [80, 90, 75] (원본)
console.log(보너스점수들); // [90, 100, 85] (새로운 배열)map() 기능은 항상 새로운 배열을 만들어줘요. 원본을 바꾸지 않으니까 결과를 새로운 변수에 저장해야 해요.
❌ 실수 3: 복잡한 계산에서 실수하기
// 복잡한 계산을 할 때는 차근차근 해야 해요
let 학생들 = [
{ 이름: "철수", 국어: 80, 수학: 90 },
{ 이름: "영희", 국어: 90, 수학: 85 }
];
// 너무 복잡하게 한 줄로 하려고 하면 실수하기 쉬워요
let 평균들 = 학생들.map(학생 => 학생.이름 + ": " + (학생.국어 + 학생.수학) / 2);
// 차근차근 나누어서 하면 실수가 줄어들어요
let 명확한평균들 = 학생들.map(function(학생) {
let 총점 = 학생.국어 + 학생.수학; // 먼저 총점 계산
let 평균 = 총점 / 2; // 그다음 평균 계산
return 학생.이름 + ": " + 평균; // 마지막에 문장 만들기
});
console.log(명확한평균들); // ["철수: 85", "영희: 87.5"]복잡한 계산을 할 때는 한 번에 모든 것을 하려고 하지 말고, 단계별로 나누어서 하면 실수를 줄일 수 있어요.
✏️ 직접 해보기 - 쉬운 연습 문제들
삶 속에서 물이 흐르듯이 자연스럽게 변화하는 모든 것들처럼, 배열의 요소들도 각자의 새로운 모습으로 변해갈 수 있어요. 오늘 우리가 배운 map() 기능으로 그런 변화의 순간을 만들어보는 시간입니다. 온도가 올라가며 따뜻해지고, 단어들이 길이를 재며 자신의 크기를 알아가고, 숫자들이 자신이 짝수인지 홀수인지 깨달아가는... 그런 소중한 변화의 순간들을 함께 경험해보아요. 각각이 제자리에서 조용히 변해가는 모습을 지켜보며, 우리도 함께 성장해가는 마음으로 연습해보세요.
이제 배운 내용을 연습 문제를 통해서 확실히 익혀볼게요.
Ex1) 온도를 모두 5도씩 높여서 "따뜻하게 만들기" 기능을 만들어보자
// 추운 온도들을 따뜻하게 만들어보자!
function 따뜻하게만들기(온도들) {
return 온도들.map(function(온도) {
return 온도 + 5; // 각 온도에 5도씩 더하기
});
}
// 기능 테스트해보기
let 오늘온도들 = [15, 20, 12, 18, 22];
let 따뜻한온도들 = 따뜻하게만들기(오늘온도들);
console.log("원래 온도:", 오늘온도들); // [15, 20, 12, 18, 22]
console.log("5도 더한 온도:", 따뜻한온도들); // [20, 25, 17, 23, 27]이 연습을 통해서 숫자 배열에 같은 값을 더하는 변환을 익힐 수 있어요.
Ex2) 동물 이름의 글자 수를 세어주는 "글자 세기" 기능을 만들어보자
// 동물 이름의 글자 수를 세어보자!
let 동물들 = ["강아지", "고양이", "햄스터", "토끼", "거북이"];
let 글자수들 = 동물들.map(function(동물) {
return 동물.length; // 각 동물 이름의 글자 수 세기
});
// 더 자세한 정보 만들기
let 자세한정보들 = 동물들.map(function(동물) {
return 동물 + "는 " + 동물.length + "글자예요";
});
console.log("동물 이름들:", 동물들); // ["강아지", "고양이", "햄스터", "토끼", "거북이"]
console.log("글자 수들:", 글자수들); // [3, 3, 3, 2, 3]
console.log("자세한 정보:", 자세한정보들);
// ["강아지는 3글자예요", "고양이는 3글자예요", "햄스터는 3글자예요", "토끼는 2글자예요", "거북이는 3글자예요"]이 문제는 문자열 배열을 숫자 배열로 변환시키는 방법을 연습하는 데 도움이 돼요.
Ex3) 나이를 보고 "어른인지 아이인지" 알려주는 기능을 만들어보자
// 나이를 보고 어른인지 아이인지 판단해보자!
let 나이들 = [8, 15, 5, 20, 9, 18];
// 18살 이상이면 어른, 아니면 아이
let 나이판단들 = 나이들.map(function(나이) {
if (나이 >= 18) {
return "어른"; // 18살 이상이면 어른
} else {
return "아이"; // 18살 미만이면 아이
}
});
// 더 자세한 설명 만들기
let 자세한설명들 = 나이들.map(function(나이) {
if (나이 >= 18) {
return 나이 + "살은 어른이에요";
} else {
return 나이 + "살은 아직 아이예요";
}
});
console.log("나이들:", 나이들); // [8, 15, 5, 20, 9, 18]
console.log("나이 판단:", 나이판단들); // ["아이", "아이", "아이", "어른", "아이", "어른"]
console.log("자세한 설명:", 자세한설명들);
// ["8살은 아직 아이예요", "15살은 아직 아이예요", "5살은 아직 아이예요", "20살은 어른이에요", "9살은 아직 아이예요", "18살은 어른이에요"]이 연습문제를 통해 숫자 배열을 조건에 따라 다른 문자열로 변환시키는 방법을 익힐 수 있어요.
🤔 조금 더 어려운 문제로 실력 확인하기
기본 연습을 마쳤다면, 이제 조금 더 깊이 있는 문제들을 통해서 map() 기능에 대한 이해를 확인해볼게요.
Q1. 다음 코드의 결과를 예측하고 왜 그런 결과가 나오는지 설명해보세요.
let 숫자들 = [1, 2, 3];
let 결과 = 숫자들.map(function(숫자) {
숫자 * 2; // 여기에 문제가 있어요!
});
console.log(결과);정답: [undefined, undefined, undefined]가 나와요.
해설: 함수에서 return이라는 단어가 없으면 JavaScript는 자동으로 undefined(정의되지 않음)를 돌려줘요. 숫자 * 2라는 계산은 실행되지만 결과가 돌아오지 않아서, map() 기능이 undefined 값들로 새 배열을 만들게 되는 거예요. 이는 map()을 사용할 때 가장 흔한 실수 중 하나랍니다.
Q2. map() 기능과 일반 반복문의 차이점을 초등학생도 이해할 수 있게 설명해보세요.
정답: map() 기능은 "자동 변환 기계"이고, 반복문은 "손으로 하나씩 만들기"와 같아요.
해설: map() 기능을 사용하면 변환 기계에 원료를 넣고 변환 규칙만 알려주면 자동으로 새 제품들이 나와요. 원본도 그대로 남아있고, 실수할 가능성도 적어요. 반면 반복문은 직접 하나씩 꺼내서 변환시키고 새 리스트에 넣어야 해서 더 복잡하고 실수하기 쉬워요. map() 기능이 훨씬 간단하고 안전한 방법이에요.
📝 이전 단원 복습하기
13단원에서 배운 fetch와 JSON 처리를 복습해볼까요?
복습 문제 1: fetch를 사용해서 데이터를 가져오고 안전하게 처리하는 기본 구조를 만들어보세요.
정답:
async function safeFetchData() {
try {
console.log("데이터를 가져오는 중...");
// 1단계: 서버에 요청
let response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
// 2단계: 응답 상태 확인
if (!response.ok) {
throw new Error("데이터를 가져올 수 없어요: " + response.status);
}
// 3단계: JSON으로 변환
let data = await response.json();
console.log("성공:", data.title);
return data;
} catch (error) {
console.log("문제가 발생했어요:", error.message);
return null;
}
}
safeFetchData();해설: fetch는 Promise를 반환하므로 await가 필요하고, response.ok로 상태를 확인하며, response.json()도 Promise를 반환하므로 다시 await가 필요해요. try/catch로 에러를 안전하게 처리하는 것도 중요해요.
복습 문제 2: 서버에서 받은 사용자 목록 JSON을 처리해서 이름만 뽑아내는 함수를 만들어보세요.
정답:
async function getUserNames() {
try {
let response = await fetch('https://jsonplaceholder.typicode.com/users');
if (response.ok) {
let users = await response.json();
// map을 사용해서 이름만 추출하기
let names = users.map(function(user) {
return user.name;
});
console.log("사용자 이름들:", names);
return names;
} else {
console.log("사용자 정보를 가져올 수 없어요");
return [];
}
} catch (error) {
console.log("에러:", error.message);
return [];
}
}
getUserNames();해설: 이 함수는 이전 단원의 fetch/JSON 처리와 현재 배운 map() 기능을 함께 사용하는 좋은 예시예요. 서버에서 받은 복잡한 사용자 정보 배열에서 map()을 사용해 이름만 간단히 추출할 수 있어요.
지금까지 배열 변환기 map()에 대해 자세히 알아봤어요. map() 기능은 배열을 다룰 때 정말 유용한 도구로, 원본을 안전하게 보호하면서 원하는 모습으로 변환시킬 수 있게 해줘요. 마치 진짜 자동 변환 기계를 가진 것처럼 느껴지지 않나요? 다음 시간에는 map() 기능과 함께 자주 사용되는 다른 배열 기능들도 배워볼 예정이에요. 정말 기대되네요!
✅ 학습 완료 체크리스트
이번 시간에 배운 내용들을 모두 이해했는지 확인해보세요!
| 학습 내용 | 이해했나요? |
|---|---|
| map()의 기본 개념 | ✅ |
| 기본 사용법과 문법 | ✅ |
| 원본 보존 특징 | ✅ |
| 자주 하는 실수들 | ✅ |
| 실전 예제 이해 | ✅ |
🎯 추가 연습 문제들
조금 더 연습하고 싶은 분들을 위한 추가 문제들이에요!
추가 문제 1. 점수 배열을 받아서 모든 점수에 10점씩 더하는 함수를 만들어보세요.
// 답:
function addBonus(scores) {
return scores.map(function(score) {
return score + 10;
});
}
// 테스트
let testScores = [85, 92, 78, 96, 88];
let bonusScores = addBonus(testScores);
console.log("원본 점수:", testScores); // [85, 92, 78, 96, 88]
console.log("보너스 점수:", bonusScores); // [95, 102, 88, 106, 98]추가 문제 2. 단어 배열을 받아서 각 단어의 길이를 담은 배열을 만들어보세요.
// 답:
let words = ["안녕", "자바스크립트", "배열", "함수"];
let wordLengths = words.map(function(word) {
return word.length;
});
console.log("단어들:", words); // ["안녕", "자바스크립트", "배열", "함수"]
console.log("길이들:", wordLengths); // [2, 6, 2, 2]추가 문제 3. 숫자 배열을 받아서 각 숫자가 짝수인지 홀수인지 알려주는 배열을 만들어보세요.
// 답:
let numbers = [1, 2, 3, 4, 5, 6];
let evenOdd = numbers.map(function(num) {
return num % 2 === 0 ? "짝수" : "홀수";
});
console.log("숫자들:", numbers); // [1, 2, 3, 4, 5, 6]
console.log("짝수/홀수:", evenOdd); // ["홀수", "짝수", "홀수", "짝수", "홀수", "짝수"]추가 문제 4. map 메서드의 가장 중요한 특징 2가지를 설명해보세요.
답: 1) 원본 배열을 변경하지 않고 새로운 배열을 반환한다는 점과, 2) 원본 배열의 모든 요소를 동일한 방식으로 변환해서 같은 크기의 새 배열을 만든다는 점입니다.
추가 문제 5. 다음 코드의 결과를 예측하고 이유를 설명해보세요.
let arr = [1, 2, 3];
let result = arr.map(function(x) {
x * 2;
});
console.log(result);답: [undefined, undefined, undefined]가 출력됩니다. 함수에서 return 문이 없어서 각 함수 호출이 undefined를 반환하기 때문입니다.
🔄 단계별 진행 과정 정리
지금까지 배운 내용을 단계별로 다시 한번 정리해볼게요.
1단계 과정: 원본 배열 → map 호출 → 각 요소 2배 → 새 배열 생성 → 원본 보존
2단계 과정: 문자열 배열 → 각 문자열 대문자 변환 → 새 배열 반환
3단계 과정: 객체 배열 → 각 객체에서 속성 추출 → 새 배열 생성
📂 마무리 정보
오늘 배운 14.1.1 내용이 여러분의 자바스크립트 지식에 잘 저장되었나요? 다음 시간에는 더 재미있는 내용으로 만나요!
기억할 점: 오늘 배운 내용을 꼭 연습해보시고, 궁금한 점이 있으면 언제든 다시 돌아와서 읽어보세요.
무료 JavaScript 학습 플랫폼에서 단계별 학습과 실시간 코드 실행을 통해
더욱 효과적이고 재미있게 학습하실 수 있습니다.
'14. 고급 배열 마법사 (고급 배열 메서드) > 14.1 배열 변환의 마법사 (map)' 카테고리의 다른 글
| 14.1.2 실전 map 활용법 - 데이터 변환의 요리사 되기 (0) | 2025.07.20 |
|---|