[JavaScript] arr.map() - 배열의 데이터들을 가공하여 새로운 배열을 만들어 사용하기

Array.prototype.map() 메서드는 기존 배열 데이터를 조건에 맞게 가공하여 새로운 배열을 만들어주는 메서드이다.

가장 많이 사용되는 배열 메서드들 중에 하나로 알아두면 좋다.

 

▷ 구문

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

callback : 새로운 배열 요소를 생성하는 함수 (세 가지 인수를 가진다.)

• currentValue : 처리할 현재 요소이다.
• index : 처리할 현재 요소의 인덱스를 의미한다.
• array : map() 메서드를 호출한 배열을 의미한다.

thisArg: callback 함수를 실행할 때 this로 사용되는 값

---

▷ 예제 1) Array.prototype.map() 기본 사용 방법

var arr = [0,1,2,3];

var mineArr = arr.map(function(item){
    return item * item;
});

console.log(mineArr);

 

▷ 예제 2) 문자 배열을 숫자 배열로 반환하기

var mine = "1234567,4534536,123,5";
var splitArr = mine.split(',');
var result = splitArr.map(function(e){
    return Number(e)
});
console.log(splitArr);
console.log(result);

---

이렇게 예제를 통해 보면 알겠지만 Array.prototype.map() 메서드를 통해 새로운 배열이 만들어진것을 확인할 수 있다.

배열 메서드는 이것 말고도 많이 존재하는데

 

Array.prototype.map() 메서드만 가지고도 많은 활용이 가능해보인다.

 

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

Array.prototype.map() | MDN