자바스크립트 기본 문법 – 배열 – 배열 메서드 – 1 – map
소제목: 배열 메서드 중 map 메서드란 무엇인가요?
배열 메서드 중에서 map 메서드는 자바스크립트에서 많이 사용되는 유용한 함수입니다.
예시:
const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map((number) => number * 2);
console.log(doubledNumbers); // [2, 4, 6, 8, 10]map 메서드에 대한 비유적인 설명:
map 메서드는 배열의 각 요소를 순회하면서 특정 작업을 수행하고 그 결과를 새로운 배열로 반환합니다. 비유적으로 말하자면, 원래 배열을 여행하는 것처럼 각 요소를 방문하여 일종의 변환 작업을 수행하고, 그 작업의 결과를 담은 새로운 배열을 가져오는 것이라고 생각할 수 있습니다. 마치 여러분이 여행을 하면서 볼 건물들을 사진으로 찍어서 새로운 앨범을 만드는 것과 비슷합니다.
자세한 설명:
- map 메서드는 기존 배열의 모든 요소에 대해 주어진 콜백 함수를 호출합니다.
- 콜백 함수는 다음과 같은 형식을 갖습니다:
(현재값, 인덱스, 배열) => {}- 현재값: 처리 중인 요소의 값
- 인덱스: 처리 중인 요소의 인덱스
- 배열: map 메서드가 호출된 배열
- 콜백 함수에서 반환하는 값은 새로운 배열의 해당 요소의 값으로 대체됩니다.
- map 메서드는 원본 배열을 변경하지 않고 새로운 배열을 반환합니다.
위의 예시에서는 numbers 배열의 각 요소를 2배로 만들어 doubledNumbers라는 새로운 배열을 생성하였습니다. 콜백 함수 (number) => number * 2에서는 각 요소를 받아들여서 그 값을 2배로 만들고, 그 결과를 새로운 배열에 넣습니다. 따라서 [1, 2, 3, 4, 5] 배열이 [2, 4, 6, 8, 10]로 변환된 것을 확인할 수 있습니다.
map 메서드는 유용한데, 예를 들어 배열의 모든 요소에 대해 특정한 변환 작업을 수행해야 하는 경우 사용할 수 있습니다. 여러분이 학급의 학생들의 성적을 가지고 있고, 그 성적을 100점 체계에서 10점 체계로 변환하고자 한다면, map 메서드를 사용해서 간단하게 처리할 수 있습니다.
주의해야 할 점:
- map 메서드는 새로운 배열을 반환하므로, 원본 배열을 직접 변경하지 않습니다. 하지만 원본 배열의 요소가 객체이고 해당 객체의 속성을 변경하는 경우, 원본 배열의 객체는 그대로 유지되므로 주의해야 합니다.
- 콜백 함수 내에서 부수 효과(side effects)를 발생시키는 작업(예: 외부 변수 수정, 네트워크 요청 등)을 수행하지 않도록 주의해야 합니다. map 메서드는 순수 함수(pure function)로서 입력값에 대해서만 의존성을 가지고 있어야 합니다.
- map 메서드는 배열의 모든 요소에 대해 순차적으로 콜백 함수를 실행하므로, 배열의 크기가 클 경우 성능에 영향을 줄 수 있습니다. 이럴 때는 다른 배열 메서드를 고려해 볼 수 있습니다.
자바스크립트의 map 메서드는 배열을 다룰 때 많이 사용되며, 각 요소에 대한 변환 작업을 쉽게 수행할 수 있습니다. 콜백 함수를 사용해 원하는 작업을 정의하고, map 메서드가 새로운 배열을 생성해주는 편리한 기능을 활용해보세요!