[JavaScript] Array map()

Baoro·2022년 2월 27일
0

JavaScript 기본개념

목록 보기
1/9

이번에는 array map() 메소드 사용법에 대해 공부해보았다.

정의

array.map(callback(currentValue,[, index[, array]])[, thisArg])
map은 callback함수를 각각의 요소에 대해 한번씩 순서대로 불러서 그 함수의 반환값으로 새로운 배열을 만든다.

매개변수

  • callabck : 새로운 배열 요소를 생성하는 함수. 3가지 인수를 받는다.
  • index Optional : 처리할 현재 요소의 index
  • array Optional : map()을 호출한 배열
  • thisArg Optional : callback을 실행할 때 this로 사용되는 값

반환 값

: 배열의 각 요소에 대해 실행한 callback의 결과를 모은 새로운 배열.

callback 함수란?

: 다른 함수에 매개변수로 넘겨준 함수를 말한다. 예를들어 보면...

function checkGang(count, link, good) {
  count < 3 ? link() : good();
}

function linkGang() {
  console.log('1일 3깡은 기본입니다. 아래 링크를 통해 깡을 시청해주세요');
  console.log('https://youtu.be/xqFvYsy4wE4');
}

function goodGang() {
  console.log('오늘 할당량은 모두 채우셨습니다! :)')
}

checkGang(2, linkGang, goodGang);```

ckeckgang 함수를 호출할 때 매개변수로 count에 숫자값을, linkgang에 link값을, goodGang에 good값을 전달했다. 
**여기서 linkGang,goodgang이 callback함수이다.**


## 예제
### 1. 
```javascript
const array=[0,1,2,3];
let squaredArray = array.map(function(element){
  return element * element;
});	

squaredArray = array.map(element => element * element);// arrow function 적용

consol.log(squaredArray); //[0,1,4,9]

2.

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

let squaredArr = arr.map(function(element, index, array){
    console.log(`${array}${index}번째 인자 : ${element}`);
    return element * element;
});
/*
0,1,2,3의 0번째 인자 : 0
0,1,2,3의 1번째 인자 : 1
0,1,2,3의 2번째 인자 : 2
0,1,2,3의 3번째 인자 : 3
*/

console.log(squaredArr); // [ 0, 1, 4, 9 ]
profile
꾸준히.... 깔끔하게.... 끝까지....

0개의 댓글