UX·UI - FrontEnd Dev. Story

프론트엔드/Javascript

배열전용 내장함수 반복문 forEach() / map() 자바스크립트 JS 공부

클로이겅쥬 2022. 1. 18. 14:25
반응형

 

 

 

 

 

 

 

 

 

 

 

자바스크립트에 미리 포함 된 함수를 내장함수라 한다.

배열에 사용하는 반복문 내장함수에는  forEach() / map() 이 있는데 알아보자.

 

 

 

 

 

forEach() / map() 에는 파라미터(인자)값이 3가지가 들어간다.

 

ex)

forEach( el, idx, arr )

el : 반복 돌고있는 대상

idx : 순서값

arr : 배열자체

 

 

 

 

 

 

1. forEach()

const colors = ["red", "green", "blue"];

colors.forEach((el, idx, arr) => {  //파라미터에는 3가지가 default.(반복도는 대상, 순서값, 배열자체 )
	console.log(el);  //red green blue
   	console.log(idx);  // 0 1 2
   	console.log(arr);
    // "red", "green", "blue" / "red", "green", "blue" / "red", "green", "blue"
});

 

- ES5 문법

- 반복처리 기능만 있다.

- 유사배열(DOM)을 반복 가능

 

 

 

 

 

 

 


 

2. map()

const colors = ["red", "green", "blue"];

colors.map((el, idx, arr) => {  //파라미터에는 3가지가 default.(반복도는 대상, 순서값, 배열자체 )
	console.log(el);  //red green blue
   	console.log(idx);  // 0 1 2
   	console.log(arr);
    // "red", "green", "blue" / "red", "green", "blue" / "red", "green", "blue"
});

 

- ES6 문법

- 반복기능 외에 추가로 반복도는 배열을 새로운 배열로 복사

- DOM을 반복 불가능

 

 

 

 

 

 

 

 

 

반응형