이전에 글을 쓰면서 나는 map() 함수를 사랑한다고 한적이 있는데
오늘은 자바스크립트를 하며 많이 사용하고 찾게 되는 배열 순회 함수를 소개한다.
많이들 보았겠지만 map()과 forEach()가 대표적이다.
let array = [1, 4, 9, 15];
let obj = [{name:"lee", age: 13}, {name:"kim", age: 15}, {name:"park", age: 12}, {name:"choi", age: 14},];
let arrayMap = array.map((x) => x + 2);
let arrayFor = array.forEach((x) => x + 2);
let objMap = obj.map((p) => console.log(p.name));
let objFor = obj.forEach((p) => console.log(p.name));
console.log(arrayMap, arrayFor);
샘플로 만든 array 숫자 배열과 객체 배열인 obj를 map()과 forEach()를 통해 콘솔에 찍어보면 비교가 쉽다.
우선 사용하는 방법은 둘다 동일하다.
array.map() 또는 forEach()안에 (배열의 원소) => 실행될 함수 방식으로 써주면 된다. (꼭 arrow function 아니여도 됨)
둘의 가장 큰 차이점은 10번줄에 찍힌 로그를 보면 확인할 수 있는데
객체 배열의 name을 콘솔에 찍은 것은 둘다 똑같지만 (단순 실행)
map을 사용한 arrayMap[]은 결과가 배열로 리턴된 것을 볼 수 있고 그것과 달리 forEach를 사용한 arrayFor는 undefined가 나온다..!
결론 => map()은 실행과 함께 결과 값도 저장(리턴)
forEach()는 just 실행이에요
'Javascript' 카테고리의 다른 글
| [Javascript] Javascript 배열 / 문자열 거르기 1탄 array.filter() (0) | 2023.11.08 |
|---|---|
| [Javascript] 복수 선택자(querySelectorAll, getElementsbyClassName)에 이벤트 바인딩하기(addEventListener) (0) | 2023.11.05 |
| [Javascript] 클립보드 복사하기 navigator.clipboard (0) | 2023.10.30 |
| [Javascript] Swiper-js 클릭한 슬라이드 가운데 정렬하기 (0) | 2023.10.19 |
| [Javascript] xml to Json (공공데이터 api json 변환하기) (0) | 2023.10.12 |