[Javascript] Array.prototype.map 사용법 map() 함수 완벽 정리 | 자바스크립트

자바스크립트 Array.prototype.map

초보자를 위한 Array.prototype.map() 완벽 정리

안녕하세요, JavaScript를 처음 배우는 초보 개발자 여러분! "Array.prototype.map()"이라는 함수를 검색해서 이 글에 오셨다면, 딱 맞는 곳에 오셨어요. JavaScript에서 배열을 다룰 때 가장 자주 사용되는 이 함수는 처음 보면 조금 낯설 수 있지만, 한 번 익히고 나면 정말 강력하고 유용하다는 걸 느끼실 거예요. 이 포스팅에서는 map() 함수가 무엇인지, 어떻게 사용하는지, 그리고 실제 예제와 결과를 통해 쉽게 이해할 수 있도록 자세히 설명드릴게요. 이제 함께 시작해볼까요?

---

Array.prototype.map()란?

Array.prototype.map()은 JavaScript에서 배열의 각 요소를 순회하면서 원하는 작업을 수행한 뒤, 그 결과를 새로운 배열로 반환해주는 메서드예요. 중요한 점은 원래 배열을 수정하지 않는다는 거예요. 즉, 기존 데이터를 건드리지 않고 새로운 결과를 만들어내는 "비파괴적" 함수라는 점이죠. 웹 프론트엔드 개발에서 리스트를 렌더링하거나 데이터를 변환할 때 특히 많이 사용된답니다.

쉽게 말해, map()은 "배열 속 모든 요소를 하나씩 꺼내서 내가 원하는 대로 바꾼 다음, 그걸 새 배열에 담아줘!"라고 명령하는 함수예요.

---

기본 구조 & 파라미터

map() 함수는 다음과 같은 형태로 사용됩니다:

array.map(callback(element[, index[, array]])[, thisArg])

조금 복잡해 보이죠? 하나씩 풀어서 설명드릴게요.

• callback: 배열의 각 요소에 적용할 함수예요. 이 함수가 핵심이에요!
  • element: 현재 처리 중인 배열의 요소 (필수).
  • index: 현재 요소의 인덱스 번호 (선택 사항).
  • array: 원본 배열 전체 (선택 사항, 거의 안 쓰임).
• thisArg: callback 함수 안에서 this로 사용할 값 (선택 사항, 잘 안 쓰임).

보통 초보자라면 element만 사용해도 충분하고, 나중에 익숙해지면 index를 활용하는 경우가 많아요.

---

실습해보기

이제 실제로 map()이 어떻게 작동하는지 예제를 통해 알아볼게요. 초보자도 쉽게 따라 할 수 있는 간단한 예제부터 시작해볼게요!

 

예제 1: 숫자 배열의 각 요소를 두 배로 만들기

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

const doubled = numbers.map(num => num * 2);

 

console.log(doubled); // 결과: [2, 4, 6, 8, 10]

console.log(numbers); // 원본: [1, 2, 3, 4, 5]

• 설명: numbers 배열의 각 요소(num)를 두 배로 곱해서 새로운 배열 doubled에 저장했어요. 원본 배열 numbers는 그대로 유지된 걸 확인할 수 있죠.

 

예제 2: 문자열 배열에 인사말 추가하기

const names = ["지민", "태형", "정국"];

const greetings = names.map(name => `안녕, ${name}!`);

 

console.log(greetings); // 결과: ["안녕, 지민!", "안녕, 태형!", "안녕, 정국!"]

• 설명: 각 이름에 "안녕, "라는 인사말을 붙여 새로운 배열을 만들었어요. 템플릿 리터럴(``)을 사용해서 깔끔하게 작성했답니다.

 

예제 3: 인덱스 활용하기

const fruits = ["사과", "바나나", "오렌지"];

const numbered = fruits.map((fruit, index) => `${index + 1}. ${fruit}`);

 

console.log(numbered); // 결과: ["1. 사과", "2. 바나나", "3. 오렌지"]

• 설명: index 파라미터를 사용해서 각 과일 앞에 번호를 붙였어요. index는 0부터 시작하니까 +1을 해서 1부터 시작하게 했습니다.

---

HTML코드로 렌더링 하려면?

만약 웹 페이지에서 이 결과를 HTML로 렌더링하고 싶다면, React나 vanilla JS로 리스트를 만들 때 map()을 활용하면 됩니다. 예를 들어:

const fruits = ["사과", "바나나", "오렌지"];

const listItems = fruits.map((fruit, index) => `<li>${index + 1}. ${fruit}</li>`);

document.querySelector("ul").innerHTML = listItems.join("");

HTML 결과:

<ul>

<li>1. 사과</li>

<li>2. 바나나</li>

<li>3. 오렌지</li>

</ul>

---

주의할 점

1. 반환값을 꼭 작성하세요: map()은 새로운 배열을 만들기 때문에 callback 함수에서 반드시 값을 반환해야 해요. return을 잊으면 결과가 undefined로 가득 찬 배열이 됩니다.
   const wrong = [1, 2, 3].map(num => { num * 2 }); // 잘못된 예: [undefined, undefined, undefined]

   const right = [1, 2, 3].map(num => num * 2); // 올바른 예: [2, 4, 6]
2. 원본 배열은 바뀌지 않아요: map()은 새 배열을 반환할 뿐, 원래 배열은 그대로예요. 수정하고 싶다면 새 배열을 변수에 저장해서 사용하세요.
3. 화살표 함수로 간단하게: 초보자라면 화살표 함수(=>)를 사용하면 코드가 더 깔끔해져요.

---

마무리

이제 Array.prototype.map()에 대해 확실히 감이 오셨죠? 배열을 다룰 때 정말 자주 쓰이는 함수라서, 이번 기회에 제대로 익혀두시면 JavaScript 실력이 한 단계 업그레이드될 거예요. 간단한 데이터 변환부터 웹 페이지의 동적 리스트 생성까지, map() 하나로 할 수 있는 일이 무궁무진하답니다. 혹시 더 궁금한 점이 있거나 다른 예제가 필요하시면 댓글로 남겨주세요! 다음 포스팅에서도 유용한 JavaScript 팁으로 찾아올게요. 그럼 즐거운 코딩 되세요!

 

 

 

 

 

[Javascript] 문자열 자르기 substr(), substring(), slice() 비교 자바스크립트 함수
https://tkpark86.tistory.com/23

[Javascript] 문자열 자르기 substr(), substring(), slice() 비교 자바스크립트 함수

 

 

 

 

 

 

 

#Javascript #Array.prototype.map #사용법 #map() #함수 #완벽정리 #자바스크립트 #배열 #파라미터 #렌더링