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'}]
* 객체 분해 할당
map() 함수는 배열을 순회하고 각 요소를 처리하기 때문에 일반적으로 for 루프나 forEach() 함수를 사용하는 것보다 간단하고 가독성이 좋습니다.
'Frontend > javaScript' 카테고리의 다른 글
[JavaScript] draggable 옵션 및 예제 (0) | 2023.05.04 |
---|---|
객체 분해 할당(Object Destructuring Assignment) (0) | 2023.04.28 |
eslint-disable not working (0) | 2023.04.27 |
[javaScript] 파일 업로드, 다운로드 (파일 깨짐 해결, readAsArrayBuffer, btoa, _arrayBufferToBase64) (0) | 2023.04.25 |
for in vs for of (0) | 2023.04.17 |