배열의 map 메서드

안녕하세요, 프로독학러 입니다.

이번 포스팅에서는 자바스크립트 배열의 메서드 중 map 메서드에 대해서 알아보겠습니다.

표현식은 다음과 같습니다.

var new_array = arr.map(function callback(currentValue[, index[, array]]) { // new_array의 새 요소 반환 }[, thisArg])

map메서드의 첫 번째 인자로는 콜백함수가 옵니다.

콜백함수의 첫 번째 인자는 배열의 각 원소(item)가, 생략이 가능한 두, 세 번째 인자는 해당 원소의 index값과 전체 배열이 들어옵니다.

map메서드의 두 번째 인자는 callback함수를 실행할 때 this로 들어오는 값을 지정하는 것입니다. 생략 가능하며, 기본 값은 Window객체 입니다.

map메서드를 이용하면 기존의 배열과 같은 길이의 배열을 리턴합니다.

각각의 원소는 map메서드의 콜백함수의 리턴값과 같습니다.

이해를 돕기위해 아래의 예제를 보겠습니다.

var arr = [1, 2, 3, 4, 5];
 
var newArr = arr.map(function(item){
    return item*2
});
console.log(newArr);
// (5) [2, 4, 6, 8, 10]

arr라는 배열은 1, 2, 3, 4, 5를 원소로 가지고 있는 length 5짜리 배열입니다.

newArr라는 변수에 arr배열과 같은 길이를 가진 배열을 만드는데, 각각의 원소는 원래 arr의 배열의 원소에다 2를 곱한 값입니다.

(5) [2, 4, 6, 8, 10]

map메서드는 배열의 길이를 유지하면서 기존의 배열을 활용한 새로운 배열을 만드는데 유용한 메서드 입니다.

감사합니다.

** 참고자료

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

*다녀가셨다는 표시는 공감으로 부탁드릴게요! (로그인 하지 않으셔도 공감은 가능합니다 ㅎㅎ)