일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
- windows
- IntelliJ
- Visual Studio Code
- 자바스크립트
- javascript
- Files
- input
- Maven
- CSS
- Eclipse
- 이클립스
- date
- table
- 인텔리제이
- 문자열
- list
- CMD
- json
- Button
- Java
- 자바
- vscode
- 이탈리아
- Array
- string
- 테이블
- html
- 배열
- ArrayList
- js
- Today
- Total
어제 오늘 내일
[Javascript] 배열 map() 함수로 변경된 새로운 배열 생성하기 본문
map() 함수는 배열을 다룰 때 매우 자주, 유용하게 사용되는 함수입니다.
배열의 map() 함수는,
배열을 순회하면서
각 element의 값을 변경하여 새로운 배열을 만들어 줍니다.
map() 함수로 새로운 배열 생성하기
arr.map(callback(currentValue[, index[, array]])[, thisArg])
map() 함수는...
배열(arr)의 각각의 element들이 callback 함수의 파라미터로 전달되고,
map() 함수는 이 callback 함수가 return 하는 값으로 새로운 배열을 만들어서 리턴합니다.
파라미터
callback(currentValue, index, array)
새로운 배열을 생성하는 함수이고, 다음 3개의 파라미터를 받습니다.
- currentValue : 현재 처리중인 배열의 element
- index(optional) : 현재 처리중인 배열의 index
- array(optional) : 현재 처리중인 배열
thisArg (optional)
callback을 실행할 때 this로 사용할 객체입니다.
리턴값
callback함수에 의해서 변경된 arr의 새로운 배열이 리턴됩니다.
이때, 원래의 배열인 arr는 변경되지 않습니다.
예제 1
See the Pen 배열 by anna (@hianna) on CodePen.
map() 함수를 사용하여
배열의 모든 값에 1을 더한 새로운 배열을 생성하였습니다.
const arr2 = arr1.map((currValue) => currValue + 1);
map()의 파라미터로 callback 함수를 전달할 때 ES6 문법을 사용할 수도 있습니다.
const arr2 = arr1.map((currValue) => currValue + 1);
const arr3 = arr1.map(function add(currValue) {
return currValue + 1;
})
이 두개의 구문은 같은 동작을 수행합니다.
document.writeln(arr1 + '<br>'); // [1, 2, 3, 4]
원본 배열인 arr1은 변경되지 않습니다.
예제 2
See the Pen 배열 by anna (@hianna) on CodePen.
map() 함수의 callback 함수는,
반드시 새로운 배열의 element가 될 값을 리턴해 주어야 합니다.
const arr2 = arr1.map(function add(currValue) {
currValue = currValue + 1;
})
위와 같이 실수하지 않도록 주의해야 합니다.
callback 함수에서 값을 리턴하지 않으면,
map() 함수에 의해 생성되는 새로운 배열(arr2)의 element는 undefined 값을 가지게 되고,
arr1의 값도 변경되지 않습니다.
'IT > Javascript' 카테고리의 다른 글
[Javascript] 배열 정렬하기 (오름차순, 내림차순, 문자열, 객체) (3) | 2020.08.08 |
---|---|
[Javascript] 배열의 합계, 평균 계산하기 - reduce(), reduceRight() (1) | 2020.08.08 |
[Javascript] 배열의 특정 값 찾기 - find(), filter() (2) | 2020.08.07 |
[Javascript] 배열에 특정 값이 포함되어 있는지 여부 체크하기 (0) | 2020.08.06 |
[Javascript] 배열 특정 값 위치(index) 찾기 - findIndex() (0) | 2020.08.05 |