[javaScript] map() 함수 (number, string, object arr 예시)

map()

map() 함수는 JavaScript 배열에서 사용할 수 있는 내장 함수 중 하나로, 배열의 모든 요소를 변환하고 새로운 배열을 생성합니다.
map() 함수는 각 배열 요소에 대해 콜백 함수를 호출하고, 콜백 함수가 반환한 값을 새로운 배열에 추가합니다.

이 때 원래 배열은 변경되지 않고, 새로운 배열만 생성됩니다.

arr.map(callback(element, index, array), thisArg)

• callback: 각 배열 요소에 대해 호출할 함수로, 콜백 함수는 다음과 같은 매개 변수를 받습니다.
• element: 현재 처리 중인 배열 요소
• index: 현재 처리 중인 요소의 인덱스
• array: map() 함수가 호출된 배열
• thisArg (선택 사항): 콜백 함수에서 this 키워드가 참조할 객체를 지정합니다.

 

아래는 예시 입니다.

1. 배열의 각 요소를 제곱하는 코드

index, array, thisArg는 생략되었습니다.

const numbers = [1, 2, 3, 4];
const squares = numbers.map(num => num ** 2);
// squares: [1, 4, 9, 16]

 

2. 각 요소에 대해 인덱스를 곱하는 코드

num은 배열의 각 요소, index는 현재 요소의 인덱스, arr은 numbers 배열 자체를 의미합니다.

const multiplied = numbers.map((num, index, arr) => {
  return num * index;
});

 

3. 각 요소에 context 객체의 factor 속성을 곱하는 코드

callback 함수에서 this 키워드를 사용하여 thisArg 객체에 접근할 수 있습니다. 

const context = {
  factor: 10
};

const multiplied = numbers.map(function(num) {
  return num * this.factor;
}, context);

 

number 배열이 아닌 string이나 객체 배열에서도 사용할 수 있습니다.

4. 스트링 매핑

const data = ['a1', 'b1'];
const colList = columnList.map(columnID=> {
  return { columnID };
});
//colList: [{columnID:'a1'}, {columnID:'b1'}]

5. 객체 배열에서 사용

const columnList = [
{field: 'a1', headerName: 'A1'},
{field: 'b1', headerName: 'B1'},
]
const fieldList = columnList.map(column => {
  const { field } = column; // 객체 분해 할당을 사용하여 필드 속성 값 가져오기
  return { columnID: field }; // columnID 속성에 필드 값을 할당하여 반환
});
//fieldList: [{columnID: 'a1'}, {columnID: 'b1'}]

* 객체 분해 할당

https://sumni.tistory.com/137

객체 분해 할당(Object Destructuring Assignment)

 

map() 함수는 배열을 순회하고 각 요소를 처리하기 때문에 일반적으로 for 루프나 forEach() 함수를 사용하는 것보다 간단하고 가독성이 좋습니다.