[ES6] 반복문 forEach, for...in, for...of

 

배열.forEach(function( ){ })

forEach() 메서드는 주어진 함수를 forEach 앞에 선언한 배열 요소에 각각 실행할 경우 사용합니다.

forEach() 메서드는 3개의 매개변수를 가집니다.

*강제 선언은 아니며 사용하는 목적에 따라 필요한 매개변수를 선언합니다.

매개변수 이름은 기존 변수명 지정과 동일하게 사용자 지정명으로 자유롭게 설정합니다.(의미있게 사용)

* 접근 배열 대상을 실시간으로 인식할 수 있어 객체에 개별 이벤트와 그에 따른 실행결과를 보고자 할 경우 유용하게 사용합니다.

* ES6 이후부터 Map, Set 에 지원가능합니다.

 

 

매개변수1 == 현재 접근 배열 요소

매개변수2 == 현재 접근 배열의 인덱스 (0부터 시작)

매개변수3 == 배열의 전체 정보

 

 

 

 

 

예1) color 배열을 선언하고 forEach()로 접근한다면?

const color = ['white', 'black', 'gray']
color.forEach(function(value, index, array){
    console.log(value, index, array)
})

 

 

 

예2) 태그 객체를 선언하고 forEach()로 접근한다면?

<div id="box">
  <a href="#">target1</a>
  <a href="#">target2</a>
  <a href="#">target3</a>
</div>

const box_a = document.querySelectorAll('#box a')
box_a.forEach(function(value, index, array){
    console.log(value, index, array)
})

 

 

 

 

 

---

 

 

 

for(let 변수생성 in 접근배열명)

 

 

for(let 변수생성 of 접근배열명)

 

 

for in과 for of는 둘다 배열에 접근한다 라는 의미는 동일하지만

최종 결과로 배열인덱스를 출력하는지 객체를 출력하는지에 따라 차이가 나뉩니다.

 

 

 

 

먼저 바닐라 자바스크립트 for문과 함께 비교해봅시다.

▼ color 배열이 선언되었을 경우 

const color = ['white', 'black', 'gray']

 

▼ color배열의 white/black/gray의 데이터와 배열인덱스를 출력하고 싶습니다.

for(let i=0; i<color.length; i++){
  console.log(i)
  console.log(color[i])
}

 

 

 

위 결과를 인덱스 출력과 객체 출력을 별도로 진행한다면

1. 인덱스출력 == 0 1 2

for (let i in color){
  console.log(i)
}

 

 

 

2. 객체출력 == white/black/gray

for (let i of color){
  console.log(i)
}