1. 일반적인 for문

let seasons = ["봄","여름","가을","겨울"]
for (let i = 0 ; i<seasons.length ; i++){
  console.log(i);
  console.log(seasons[i]);
}

0
봄
1
여름
2
가을
3
겨울

2. for ... of 문

for문을 사용한 반복은 인덱스 값을 기준으로 반복하지만 ES6에는 인덱스는 사용하지 않고 값을 기준으로 반복합니다.

예를 들어 for ... of문을 사용해 3개 값이 있는 배열을 순회한다면 값이 끝날 때까지 차례로 반복합니다. 여러 값을 차례로 순회할 때 인덱스 값이 필요 없다면 ES6에서는 for ... of문을 사용합니다

let seasons = ["봄","여름","가을","겨울"]
for (let i of seasons){
  console.log(i);
}

봄
여름
가을
겨울

3. for-in

객체를 순회하는 세번째 방법은 for-in 문입니다. 반복문인 for문과 같은 종류의 문법이지만, 객체와 배열을 위해 특별히 존재하는, ES6 에서 추가된 문법입니다. 이건 객체 순회 외에도, 일반적인 배열을 순회할때도 아주 유용할 수 있습니다.

let seasons = ["봄","여름","가을","겨울"]
for (let i = 0; i < seasons.length; i ++) {
  console.log(i)
  console.log(seasons[i])
}

앞서 예시로 등장했었던 배열의 반복문입니다. for문을 그동안 많이 써본 분들이라면, 배열에 대한 for문 선언시 쓰는 for(let i = 0; i < seasons.length; i ++) 이런 문법이 아주 자주 사용되는 문법이라는걸 알고계실텐데요. 이걸 간단하게 축약한 문법이 바로 다음과 같습니다.

for (let i in seasons) {
  console.log(i)
  console.log(seasons[i])
}

i를 0으로 초기화하고, 배열의 길이와 비교하고, i를 1씩 증가시키는 등의 코드를 생략할수 있게 만든 ES6 문법입니다. 이 for-in 문은 인덱스의 값으로 무엇을 할당하고, 반복문이 몇번 돌아야 할 지를 자바스크립트 엔진 내부에서 자동으로 결정하게 됩니다.

for-in 문은 배열뿐 아니라 객체에서도 작동하도록 만들어졌는데요.

const obj = {
  name: 'melon',
  weight: 4350,
  price: 16500,
  isFresh: true
}
for (let i in obj) {
  const value = obj[i]
  console.log(i)
  console.log(value)
}

이렇게 객체를 가지고 for-in 문을 사용하면, for-in 문의 인덱스에 해당하는 변수가, 숫자가 아닌 객체의 각각의 키에 해당하는 문자열을 할당받게 됩니다.