[JavaScript] JS MAP | 자바스크립트 맵 객체

1. Array.map() 이해하기

1-1. 개요

Array.map()은 JavaScript 배열 메서드 중 하나로,

• 배열의 모든 요소를 순회하면서 각 요소에 대해 주어진 콜백 함수를 실행하고,
• 그 결과를 기반으로 새로운 배열을 생성합니다.

이 메서드는 원본 배열을 변경하지 않으며, 데이터 변환 작업에 매우 유용합니다.

1-2. 기본 문법

Array.map() 메서드의 기본 구문은 다음과 같습니다.

array.map((element, index, array) => {
    // 변환 로직
    return 변환된_값;
});

• element: 현재 처리 중인 배열 요소
• index: 현재 요소의 인덱스
• array: map()을 호출한 원본 배열

---

2. 간단한 예제

2-1. 숫자 배열의 각 요소를 2배로 만들기

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8, 10]

2-2. 문자열 배열을 대문자로 변환하기

const fruits = ['apple', 'banana', 'cherry'];
const upperFruits = fruits.map(fruit => fruit.toUpperCase());
console.log(upperFruits); // ['APPLE', 'BANANA', 'CHERRY']

 

---

3. 실용적인 예제

3-1. 객체 배열에서 특정 속성만 추출

const users = [
    { id: 1, name: 'John', age: 30 },
    { id: 2, name: 'Jane', age: 25 },
    { id: 3, name: 'Bob', age: 35 }
];

const userNames = users.map(user => user.name);
console.log(userNames); // ['John', 'Jane', 'Bob']

3-2. 문자열 숫자를 실수형으로 변환

const prices = ['1.99', '2.99', '3.99'];
const numPrices = prices.map(price => parseFloat(price));
console.log(numPrices); // [1.99, 2.99, 3.99]

---

4. 주의사항

4-1. 새로운 배열 반환

• map() 메서드는 항상 새로운 배열을 반환하므로, 원본 배열은 변경되지 않습니다.

4-2. 반드시 return 필요

• 콜백 함수 내에 반드시 return 문이 있어야 하며, 그렇지 않으면 undefined가 배열의 각 요소에 할당됩니다.

4-3. 빈 요소 처리

• 배열 내의 빈 요소는 자동으로 건너뛰기 때문에, sparse 배열의 경우 결과가 예상과 다를 수 있습니다.

---

5. 실제 사용 사례

5-1. 실무 적용 예시

• 예시 GitHub 코드
  GitHub – Laravel Site Monitoring Project (main.blade.php)
  → 해당 파일 하단의 JavaScript 부분에서 Array.map()을 사용하여 HTTP 상태 코드에 따라 아이템 위치를 동적으로 조정하는 로직을 확인할 수 있습니다.
• JavaScript Map 메서드에 관한 참고 자료

---

6. 결론

Array.map() 메서드는

• 간결한 문법과 불변성 유지를 통해 데이터를 변환할 때 매우 유용합니다.
• 실무에서도 다양한 배열 데이터 처리, 객체 배열의 속성 추출, 데이터 타입 변환 등 여러 가지 작업에 활용됩니다.
• 주의사항을 숙지하면, 중복 없는 깔끔한 코드 작성과 유지보수가 용이해져 협업과 개발 생산성에 긍정적인 영향을 미칩니다.