JavaScript(7) Map함수

김재홍·2022년 5월 6일
0

Array.prototype.map()

1) 구문

arr.map(callback(currentValue[, index[, array]])[, thisArg])

매개변수

callback
새로운 배열 요소를 생성하는 함수. 다음 세 가지 인수를 가집니다.

  • currentValue
    처리할 현재 요소.
  • index Optional
    처리할 현재 요소의 인덱스.
  • array Optional
    map()을 호출한 배열.
  • thisArg Optional
    callback을 실행할 때 this로 사용되는 값.

반환 값

배열의 각 요소에 대해 실행한 callback의 결과를 모은 새로운 배열.

예시

const array1 = [1, 4, 9, 16];

// pass a function to map
const map1 = array1.map(x => x * 2);

console.log(map1);
// expected output: Array [2, 8, 18, 32]

2) 설명

map은 callback 함수를 각각의 요소에 대해 한번씩 순서대로 불러
그 함수의 반환값으로 새로운 배열을 만듭니다.
callback 함수는 (undefined도 포함해서) 배열 값이 들어있는 인덱스에 대해서만 호출됩니다.
즉, 값이 삭제되거나 아직 값이 할당/정의되지 않은 인덱스에 대해서는 호출되지 않습니다.

callback 함수는 호출될 때 대상 요소의 값, 그 요소의 인덱스, 그리고 map을 호출한 원본 배열 3개의 인수를 전달받습니다.

thisArg 매개변수가 map에 전달된 경우 callback 함수의 this값으로 사용됩니다. 그 외의 경우 undefined값이 this 값으로 사용됩니다.
callback 함수에서 최종적으로 볼 수 있는 this 값은 함수 내 this를 정하는 일반적인 규칙에 따라 결정됩니다.

map은 호출한 배열의 값을 변형하지 않습니다. 단, callback 함수에 의해서 변형될 수는 있습니다.

map이 처리할 요소의 범위는 첫 callback을 호출하기 전에 정해집니다. map이 시작한 이후 배열에 추가되는 요소들은 callback을 호출하지 않습니다. 배열에 존재하는 요소들의 값이 바뀐 경우 map이 방문하는 시점의 값이 callback에 전달됩니다. map이 시작되고, 방문하기 전에 삭제된 요소들은 방문하지 않습니다.

var numbers = [1, 4, 9];
var roots = numbers.map(Math.sqrt);
// roots는 [1, 2, 3]
// numbers는 그대로 [1, 4, 9]

map을 사용하는 방법은 callbackfn을 통해 주어진 3개의 인자(요소 값, index, 순회하는 대상 객체)를 사용해 새로운 값을 만드는 함수를 등록하는 것입니다.

const numbers = [1]; 
numbers.map((number, index, source) => { 
// number: 요소값 
// index: source에서 요소의 index 
// source: 순회하는 대상 

console.log(number); // 1 
console.log(index); // 0 
console.log(source); // [1] 

return number / number; });

참고

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map#example_mapping_an_array_of_numbers_to_an_array_of_square_roots

https://7942yongdae.tistory.com/entry/Javascript-Array-map-사용법 [프로그래머 YD]

0개의 댓글

관련 채용 정보