JavaScript 배열 map() 메소드 이해

map() 소개

map() 메서드는 호출 배열의 모든 요소에 대해 제공된 함수를 호출한 결과로 채워진 새 배열을 만듭니다. 배열의 각 요소를 새 요소로 변환하여 원본 배열을 수정하지 않고도 새 배열을 생성할 수 있는 함수형 프로그래밍 기술입니다.

---

구문

let newArray = array.map(function callback(currentValue, index, array) {
    // Return element for newArray
}, thisArg);

또는 화살표 기능을 사용하여:

let newArray = array.map((currentValue, index, array) => {
    // Return element for newArray
});

---

매개변수

• 콜백: 세 가지 인수를 사용하여 새 배열의 요소를 생성하는 함수:
  • currentValue: 현재 처리 중인 요소입니다.
  • index (선택): 현재 요소의 인덱스
  • array (선택 사항): 배열 맵이 호출되었습니다.
• thisArg (선택) : 콜백 실행시 사용할 값.

---

반환값

콜백 함수의 결과인 각 요소가 포함된 새 배열.

---

map() 작동 방식

• 불변성: map()은 원래 배열을 수정하지 않습니다.
• 요소별 변환: 각 요소에 콜백 함수를 적용합니다.
• 새 배열 반환: 결과를 새 배열로 수집합니다.

---

예

아. 매핑 번호

예: 배열의 각 숫자에 2를 곱합니다.

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(number => number * 2);

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

ㄴ. 문자열 변환

예: 문자열 배열을 대문자로 변환합니다.

const fruits = ['apple', 'banana', 'cherry'];
const upperFruits = fruits.map(fruit => fruit.toUpperCase());

console.log(upperFruits); // Output: ['APPLE', 'BANANA', 'CHERRY']

ㄷ. 객체 속성 추출

예: 객체 배열에서 특정 속성을 추출합니다.

const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
];
const names = users.map(user => user.name);

console.log(names); // Output: ['Alice', 'Bob']

디. 객체 배열에 대한 매핑

예: 각 객체를 배열로 변환합니다.

const products = [
  { productId: 1, price: 100 },
  { productId: 2, price: 200 },
];
const discountedProducts = products.map(product => ({
  ...product,
  price: product.price * 0.9,
}));

console.log(discountedProducts);
// Output:
// [
//   { productId: 1, price: 90 },
//   { productId: 2, price: 180 },
// ]

---

map()과 forEach()의 차이점

• 지도():
  • 새 배열을 반환합니다.
  • 각 요소를 변형하여 결과를 수집하고 싶을 때 사용합니다.
• 각각():
  • 정의되지 않은 상태로 반환됩니다.
  • 부작용(예: 로깅, 외부 변수 수정)을 수행하고 새 배열이 필요하지 않을 때 사용됩니다.

forEach()의 예:

let newArray = array.map(function callback(currentValue, index, array) {
    // Return element for newArray
}, thisArg);

---

화살표 함수와 함께 map() 사용

화살표 함수는 콜백 함수 작성을 위한 간결한 구문을 제공합니다.

예:

let newArray = array.map((currentValue, index, array) => {
    // Return element for newArray
});

---

TypeScript의 map()

TypeScript는 JavaScript에 정적 타이핑을 추가하여 컴파일 타임에 오류를 잡는 데 도움이 됩니다.

아. 유형 주석

배열 요소의 유형과 반환 유형을 지정할 수 있습니다.

예:

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(number => number * 2);

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

ㄴ. 일반 유형

모든 유형에서 작동하도록 일반 함수를 정의할 수 있습니다.

예:

const fruits = ['apple', 'banana', 'cherry'];
const upperFruits = fruits.map(fruit => fruit.toUpperCase());

console.log(upperFruits); // Output: ['APPLE', 'BANANA', 'CHERRY']

---

일반적인 사용 사례

• 데이터 변환: 데이터를 한 형식에서 다른 형식으로 변환합니다.
• 값 추출: 개체에서 특정 필드를 추출합니다.
• 데이터 구성: 기존 데이터를 기반으로 새 배열을 생성합니다.
• 계산: 각 요소에 대해 계산을 수행합니다.

---

고급 주제

아. 다른 배열 방법으로 map() 연결

map()을 filter(), Reduce() 등과 같은 다른 배열 메소드와 연결할 수 있습니다.

예:

const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
];
const names = users.map(user => user.name);

console.log(names); // Output: ['Alice', 'Bob']

ㄴ. 비동기 작업 처리

map()은 콜백 내에서 비동기 작업을 처리하지 않습니다. 비동기 작업을 수행해야 하는 경우 map()과 함께 Promise.all()을 사용하는 것이 좋습니다.

예:

const products = [
  { productId: 1, price: 100 },
  { productId: 2, price: 200 },
];
const discountedProducts = products.map(product => ({
  ...product,
  price: product.price * 0.9,
}));

console.log(discountedProducts);
// Output:
// [
//   { productId: 1, price: 90 },
//   { productId: 2, price: 180 },
// ]

---

모범 사례

• 부작용이 있으면 map()을 사용하지 마세요: 새 배열이 필요하지 않으면 대신 forEach()를 사용하세요.
• 원본 배열 수정 방지: map()은 원본 배열이나 해당 요소를 변경해서는 안 됩니다.
• 값 반환: 콜백 함수가 값을 반환하는지 확인하세요. 그렇지 않으면 새 배열에 정의되지 않은 요소가 포함됩니다.
• 간결함을 위해 화살표 함수 사용: 코드를 더 짧고 읽기 쉽게 만듭니다.

---

결론

JavaScript 및 TypeScript에서 효과적인 배열 조작을 위해서는 map() 함수를 이해하는 것이 필수적입니다. 이는 데이터를 깨끗하고 효율적으로 변환할 수 있는 다목적 방법입니다. 지도()를 기억하세요:

• 새 배열을 생성합니다.
• 각 요소에 기능을 적용합니다.
• 원본 배열을 수정하지 않습니다.

map()을 마스터하면 더욱 간결하고 기능적인 코드를 작성하여 유지 관리성과 가독성이 향상됩니다.

읽어주셔서 감사합니다. 이 콘텐츠가 마음에 드신다면 언제든지 커피 한 잔 사주세요:
https://buymeacoffee.com/kellyblaire

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