about Array.map()
기본적인 특징
Mozilla(ko) 바로가기 >
1. 기본적으로map()은 호출된 배열을 변경하지 않습니다.
-> 단callback함수에 의해 변형될 수 있음.
2. 함수를 각각의 요소에 대해 한번씩 순서대로 불러 그 함수의 반환값으로 새로운 배열을 만듭니다.1,2번 둘다 똑같은 소리임. 뭔소리냐면
const arr = [1,2,3,4] const arr2 = arr.map(el => el*2); console.log(arr) // [1,2,3,4] console.log(arr2) // [2,4,6,8]이렇게 arr에 map() 함수를 써도(?) 원래의 arr는 수정되지 않고 새롭게 저장해서 쓰면 되는것임
기본 사용법
const array1 = [1, 4, 9, 16];
console.log(array1)
// output
// (4) [1, 4, 9, 16]// Arrow function
map((element) => { /* ... */ })
map((element, index) => { /* ... */ })
map((element, index, array) => { /* ... */ })
array1.map((element, index, array) => {
console.log(element); // 배열의 요소를 반환
console.log(index); // 배열의 인덱스를 반환
console.log(array); // 호출한 원본 배열을 그대로 반환
});
// 결과 : 아래 이미지
내가 잘 모를것 같은 부분
['1', '2', '3'].map(parseInt);
// 결과를 [1, 2, 3] 으로 기대할 수 있습니다.
// 그러나 실제 결과는 [1, NaN, NaN] 입니다.
// parseInt()는 두개의 인자를 받을 수 있고 map()은 세가지의 인자를 받을 수 있습니다.
// 그래서 세번째 인자는 parseInt()가 무시하지만 두번째는 아닙니다.
['1', '2', '3'].map(element => parseInt(element,10))
//라고 쓸수도 있고,
//이렇게 함수를 만들어서 사용할수도 있고.
function returnInt(element) {
return parseInt(element, 10);
}
['1', '2', '3'].map(returnInt); // [1, 2, 3]
// 위와 같지만 더 간단한 화살표 표현식
['1', '2', '3'].map(str => parseInt(str));
for(), forEach()와 비슷한것 같은데..
내가 여기까지 공부하면서for(),forEach()랑 어떤게 다른건가 싶어서..
단순 반복이라면for()
배열을 순회하려면forEach()
배열을 순회 후 새 배열을 얻고 싶다면map()
근데 이렇게만 말하면 모를거 뻔히 압니다
나중에 다시 볼 나도 그렇고, 누가 볼진 모르겠지만 이걸 볼 누군가도 그렇고.
// map()으로 할수 있는건 forEach()로도 할수 있음. 물론 반대도 ㅇㅋ
// 그럼 똑같은거 아니냐? 할 수 있는데 이거 보고 그 다음거에 알려드림
// Example of forEach()
const arr = [1, 2, 3, 4, 5];
const nArr = [];
arr.forEach(n => {
nArr.push(n * 3);
});
console.log(nArr); // [3, 6, 9, 12, 15]
// Example of map()
const arr = [1, 2, 3, 4, 5];
const nArr = arr.map(n => n * 3);
console.log(nArr); // [3, 6, 9, 12, 15]forEach()는 밖으로 return 값을 내보낼 수 없다.
let arr = [1,2,3,4,5]; let data = arr.forEach(function(value){ return value; }); console.log(data); //undefined하지만 map()은 달라요.
let arr=[1,2,3,4,5]; let data = arr.map(function(value){ return value +1; }); console.log(data); // [2,3,4,5,6]차이점
forEach()와map()의 가장 큰 차이는return값에 있는듯 함.
forEach()는 기존의 Array를 변경하고,
map()은 새로운 Array를 반환합니다.
성능면에서는map()이forEach()보다 빠르고 유리하다고 하네요.
++ 조금 더 깊은 내용에 대한 글을 적으신분
https://7942yongdae.tistory.com/entry/Javascript-Array-map-%EC%82%AC%EC%9A%A9%EB%B2%95
참조
이 벨로그에서는 정보를 습득해가지 마세요 틀렸을수도 ^^;