map 메서드
map 메서드는 배열의 각 요소에 주어진
함수를 적용할 수 있게 합니다. 이때
메서드는 원본 배열을 변경하지 않고,
변경된 새로운 배열을 반환합니다.
메서드는 매개변수로 함수를 받으며, 이 함수는
배열의 각 요소에 대해 실행됩니다.
이 함수가 return을 통해 반환하는 값이
해당 배열 요소의 새로운 값이 됩니다 (예제 참조).
함수에는 3개의 매개변수를 전달할 수 있습니다.
이러한 매개변수가 존재하는 경우 (필수는 아닙니다),
첫 번째에는 자동으로 배열 요소가,
두 번째에는 배열 내 인덱스(위치)가,
세 번째에는 배열 자체가 전달됩니다.
구문
let 새로운배열 = 배열.map(function(요소, 인덱스, 배열) {
코드
return 변경된요소;
});
예제
초기 배열의 각 요소에 해당하는 값이 두 배인 새 배열을 만들어 봅시다:
let arr = [1, 2, 3, 4, 5];
let res = arr.map(function(elem) {
return elem * 2;
});
console.log(res);
코드 실행 결과:
[2, 4, 6, 8, 10]
예제
요소 값에 배열 내 인덱스를 곱한 값으로 이루어진 배열을 만들어 봅시다:
let arr = [1, 2, 3, 4, 5];
let res = arr.map(function(elem, index) {
return elem * index;
});
console.log(res);
코드 실행 결과:
[0, 2, 6, 12, 20]
예제
필요한 경우 세 번째 매개변수로 배열 자체를 전달할 수 있습니다:
let arr = [1, 2, 3, 4, 5];
let res = arr.map(function(elem, index, arr) {
// 여기에서 arr 배열에 접근 가능합니다
});
예제
map 메서드는 다차원 배열을 순회하는 데에도
사용할 수 있습니다. 예를 들어 다음과 같은 배열이 주어졌다고 가정해 봅시다:
let arr = [[1, 2, 3], [4, 5, 6], [7, 8, 9]];
이 배열을 map을 사용하여 순회하고
그 요소들을 콘솔에 출력해 봅시다:
let arr = [[1, 2, 3], [4, 5, 6], [7, 8, 9]];
let result = arr.map(function(elem) {
console.log(elem);
});
결과적으로 console.log는 먼저 [1,
2, 3]을, 그다음 [4, 5, 6]을,
그리고 [7, 8, 9]을 출력할 것입니다.
보시다시피, elem 변수에는 하위 배열들이 담깁니다.
이제 각 하위 배열에 map 메서드를 적용하고
각 요소를 제곱해 봅시다:
let arr = [[1, 2, 3], [4, 5, 6], [7, 8, 9]];
let result = arr.map(function(elem) {
return elem.map(function(num) {
return num * num;
});
});
console.log(result);
