JavaScript 배열의 map() 메소드 이해: 간단한 안내서

map() 메소드는 원래 배열의 각 요소에 제공된 함수(callbackFn)를 적용하여 새 배열을 생성합니다. 원본 배열을 수정하지 않고 데이터를 변환하는 데 적합합니다.

---

구문

array.map(callbackFn, thisArg)

• callbackFn: 다음 인수를 사용하여 각 배열 요소에서 실행되는 함수입니다.
  • 요소: 현재 요소.
  • index: 현재 인덱스.
  • array: 순회되는 배열입니다.
• thisArg (선택): 콜백 함수에서 this로 사용할 값.

---

주요 기능

1. 새 배열 반환: 원래 배열은 변경되지 않은 상태로 유지됩니다.
2. 빈 슬롯 건너뛰기: 희소 배열의 할당되지 않은 요소에 대해서는 콜백이 호출되지 않습니다.
3. 일반 사용법: 배열과 유사한 객체(예: NodeList)에서 작동합니다.

---

예

1. 기본 예: 숫자 변환

const numbers = [1, 4, 9];
const roots = numbers.map((num) => Math.sqrt(num));
console.log(roots); // [1, 2, 3]

2. 객체 재형식화

const kvArray = [
  { key: 1, value: 10 },
  { key: 2, value: 20 },
];
const reformatted = kvArray.map(({ key, value }) => ({ [key]: value }));
console.log(reformatted); // [{ 1: 10 }, { 2: 20 }]

3. 지도와 함께 parsInt 사용하기

// Common mistake:
console.log(["1", "2", "3"].map(parseInt)); // [1, NaN, NaN]

// Correct approach:
console.log(["1", "2", "3"].map((str) => parseInt(str, 10))); // [1, 2, 3]

// Alternative:
console.log(["1", "2", "3"].map(Number)); // [1, 2, 3]

4. 정의되지 않은 결과 방지

콜백에서 아무것도 반환하지 않으면 새 배열에 정의되지 않은 상태가 됩니다.

const numbers = [1, 2, 3, 4];
const result = numbers.map((num, index) => (index < 3 ? num : undefined));
console.log(result); // [1, 2, 3, undefined]

원치 않는 요소를 제거하려면 filter() 또는 flatMap()을 사용하세요.

5. 부작용(안티패턴)

변수 업데이트와 같은 부작용이 있는 작업에는 map()을 사용하지 마세요.

const cart = [5, 15, 25];
let total = 0;

// Avoid this:
const withTax = cart.map((cost) => {
  total += cost;
  return cost * 1.2;
});

// Instead, use separate methods:
const total = cart.reduce((sum, cost) => sum + cost, 0);
const withTax = cart.map((cost) => cost * 1.2);

6. 다른 배열 요소에 액세스하기

세 번째 인수(배열)를 사용하면 변환 중에 이웃에 액세스할 수 있습니다.

const numbers = [3, -1, 1, 4];
const averaged = numbers.map((num, idx, arr) => {
  const prev = arr[idx - 1] || 0;
  const next = arr[idx + 1] || 0;
  return (prev + num + next) / 3;
});
console.log(averaged);

---

일반적인 사용 사례

1. 데이터 변환: 각 요소에 함수를 적용합니다.
2. 객체 재구성: 데이터 구조를 변경합니다.
3. NodeList 매핑: NodeList와 같은 DOM 요소를 배열로 변환합니다.

   const elems = document.querySelectorAll("option:checked");
   const values = Array.from(elems).map(({ value }) => value);

---

지도()를 피해야 할 때

• 반환 값 필요 없음: 대신 forEach() 또는 for...of를 사용하세요.
• 데이터 변경: 원본 개체를 변경하는 대신 새 개체를 만듭니다.

   const products = [{ name: "phone" }];
   const updated = products.map((p) => ({ ...p, price: 100 }));

---

최종 팁

• 순수 함수만: 콜백에 부작용이 없는지 확인하세요.
• 인수 이해: map()이 콜백에 요소, 인덱스 및 배열을 전달한다는 점을 알아두세요.
• 희소 배열 방지: 빈 슬롯은 비어 있는 상태로 유지됩니다.

배열을 효율적으로 변환할 때 map()을 사용하여 코드를 단순화하세요!

위 내용은 JavaScript 배열의 map() 메소드 이해: 간단한 안내서의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!