[기본] Array.map()에 대해서, 그리고 for(), forEach()와의 차이점

zaelook·2022년 6월 18일
0

javascript

목록 보기
3/3

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

참조

profile
이 벨로그에서는 정보를 습득해가지 마세요 틀렸을수도 ^^;

0개의 댓글