[JS] 배열메서드 map()

map()이란?
배열 객체에서 매우 유용되게 사용하는 함수 중 하나
기존 배열의 각 요소를 반환하여 새로운 배열을 반환한다

map() 함수

인수로 전달된 함수를 사용하여 배열의 각 요소를 변환
변환된 값들은 새로운 배열에 저장되어 return
변환 함수는 배열의 각 요소 마다 한번 씩 호출되며 이 함수는 3개의 인수를 받는다

1. 현재 요소의 값
2. 현재 요소의 인덱스
3. map() 메서드를 호출한 배열

반환 함수는 요소를 반환하여, 이 반환값이 새로운 배열의 요소가 된다

map()은 원본 배열을 변경하지 않고 대신 변환된 새로운 배열을 return한다

const arr = [1, 2, 3, 4];

const squareArr = arr.map(function(num) {
  return num ** 2;
});

console.log(squareArr); // [1, 4, 9, 16]

위 코드에서 arr 배열의 각 요소를 제곱하여 새로운 배열 squareArr에 저장
이때, map() 함수를 사용하여 각 요소를 제곱하는 함수를 정의하여 해당 함수를
map()함수의 인수로 전달했다

map() 함수는 요소의 값, 인덱스, 배열을 인수로 받으므로, 인자 nun으로 요소의 값을 받아, 해당 요소의 제곱을 반환하도록 정의

map()함수를 화살표 함수로 표현하기

const arr = [1, 2, 3, 4];

const squareArr = arr.map(num => num ** 2);

console.log(squareArr); // [1, 4, 9, 16]

map() 함수의 인수로 화살표함수를 사용하여 요소를 제곱하는 함수를 정의하였다

map을 포괄적으로 사용하기 (querySelectorAll)
아래 예제는 querySelectorAll을 사용해서 수집된 객체들을 순회 처리
이번 경우 체크한 옵션 박스를 콘솔에 프린트

var elems = document.querySelectorAll('select option:checked');
var values = [].map.call(elems, function(obj) {
  return obj.value;
});

결론

map()함수는 배열의 요소를 변경하는 것이 아니므로 원본 배열 변경 X
따라서 map()함수를 사용하여 배열 요소를 변환하더라도 원본 배열은 그대로 유지