map() function

JavaScript의 map() 메서드는 부모 배열에 있는 각 요소에 대해 특정 함수를 호출하여 배열로 만든다.

array.map(function(currentValu, index, arr),thisValue)

매개변수 : 이 메소드는 위에서 언급하고 아래에 설명된 대로 두 개의 매개변수를 허용한다.

• function(currentValue, index, arr) : 필수 매개변수이며 배열의 각 요소에서 실행됩니다. 여기에는 아래 나열된 세 가지 매개변수가 포함된다.
  • currentValue : 필수 매개변수이며 현재 요소의 값을 보유한다.
  • index : 선택적 매개변수이며 현재 요소의 인덱스를 보유한다.
  • arr : 선택적 매개변수이며 배열을 보유한다.
• thisValue: 선택적 매개변수이며 함수에 전달된 값을 유지하는데 사용된다.

반환 값: 새로운 배열을 반환하며 배열의 요소는 콜백 함수의 결과이다.
아래 예제는 JS에서 array.map() 메서드를 사용하는 방법을 보여준다.

/* 이 예제는 array map() 메서드를 사용,
   배열 요소의 제곱을 반환한다.*/

let el = document.getElementById('root');
let arr = [2, 5, 6, 3, 8, 9];

let newArr = arr.map(function(val, index){
  retun {key:index, value:val*val}
})

console.log(newArr)

el.innerHTML = JSON.stringify(newArr);

산출:

/*이 예제는 array map() 메서드를 사용하여,
'A'문자를 이름의 모든 문자와 연결한다.*/
let el = document.getElementById('root');
let name = 'Pankaj";

let newName = Array.prototype.map.call(name, function(item) {return item + 'A';})

console.log(newName);

산출:

/*이 예제는 array map() 메서드를 사용하여 배열 요소의 제곱을 반환한다.*/

let el = document.getElementById('root');
el.innerHTML = [6, 7, 4, 5].map((val)=>{return val*val});

산출:

36, 49, 16, 25

원문 출처 | https://www.geeksforgeeks.org/javascript-array-map-method/