map()과 forEach()에 대한 정의는 패스.
❗ forEach()와 map()의 공통점
forEach, map공통점은 "배열을 이용한다"는 점이다.
배열의 값을 조작해서 원하는 결과값을 도출하는데 의미가 있다.
❗ forEach()와 map()의 차이점
1. 새로운 배열을 반환하는 map()
forEach()가 배열 요소마다 한 번씩 주어진 함수를 실행하는 것과 달리,
map()은 배열 내의 모든 요소 각각에 대하여 주어진 함수(콜백)를 호출한 결과를 모아 새로운 배열을 반환한다는 특징을 가지고 있다.
그리고, forEach()와 map()은
1. currentValue (배열 원소의 값)
2. index (현재 요소의 인덱스)
3. array (현재 배열)
세 개의 인자를 가지고 호출된다.
2. 리턴값을 보내지 않는 forEach()
forEach()는 문밖으로 리턴값을 받지 못한다. 아래의 코드를 살펴보자.
let arr = [1,2,3,4,5];
let a = arr.forEach(function(value){
return value;
});
console.log(a); //undefined
이렇게 undefined가 출력된다.
하지만 같은 경우라도 map을 이용하면 다르다.
let arr=[1,2,3,4,5];
let a = arr.map(function(value){
return value +1;
});
console.log(a); // [2,3,4,5,6]
이 경우에는 [2,3,4,5,6]이 들어있는 배열이 출력된다.
map은 리턴값을 출력할 수 있다.
❗ 정리
forEach()
반환 값: 없음 (undefined)
용도: 배열의 각 요소에 대해 작업을 수행
특징: 원본 배열을 변경하지 않음
map()
반환 값: 새로운 배열
용도: 배열의 각 요소를 변환하여 새로운 배열을 생성
특징: 원본 배열을 변경하지 않음
성능면에서는 map이 forEach보다 빠르고 유리하다.
상황에 따라 맞게 사용하면 될 것이다
출처 및 참조: https://radlohead.github.io/front-end/javascript-forEach-map-reduce.html ,
'자바스크립트 - Vanilla JS' 카테고리의 다른 글
[자바스크립트 / Vanilla JS] 클로저 함수(Closure function)란 ? (0) | 2023.03.28 |
---|---|
[자바스크립트 / Vanilla JS] some()과 includes()의 차이점 (0) | 2023.03.10 |
[자바스크립트 / Vanilla JS] parseInt()와 Number()의 차이점 (0) | 2022.09.22 |
[자바스크립트 / Vanilla JS] 스프레드 연산자 (Spread Operator) (1) | 2022.09.21 |
[자바스크립트 / Vanilla JS] 클래스 (class) 총정리 (2) | 2022.09.19 |