[JS] for, for in, for of 반복문 사용법 및 차이점

자바스크립트(JavaScript)는 for 문으로 기본형인 for 반복문 이외에도 for in 문과 for of 문을 사용할 수 있습니다.

 

1. for 문

우선 for 문입니다.

for (초기값; 조건식; 증감식) { ... }

for 문은 다른 일반적인 언어들과 유사하게 초기값, 조건식, 증감식 형태로 사용합니다.

 

뒤에서 살펴볼 for in 문이나 for of 문과 다르게 for 문의 경우 반복을 제어할 변수를 let으로 지정을 해줘야 한다는 점을 유의하셔야 합니다..!

 

for (let i = 0; i < 3; i++) {
  console.log(`${i}번 반복하였습니다.`);
}

 

 

 

2. for in 문

for (const item in 배열 or 객체) { ... }

for in 문은 파이썬의 for in문의 사용 방법과 흡사하다고 보시면 됩니다.

 

반복 변수(위 코드에서 item을 의미)를 let이 아니라 const를 사용한다는 점을 유의하시고,

 

괄호 안에서 in을 기준으로 오른쪽에 반복해서 불러올 변수 혹은 객체를 넣어주면, for in문이 한 번씩 반복될 때마다 반복 변수에 하나씩 값의 인덱스가 들어갑니다.

 

fruits = ['apple', 'banana', 'chestnut'];

for (const item in fruits) {
  console.log(`item이 가지고 있는 값: ${item}`);
  console.log(fruits[item]);
  console.log('');
}

파이썬을 혹시 배우신 분들이라면 '파이썬에서는 인덱스가 아니라 값 자체가 item에 들어가는데요..!'라고 이야기 하실 수 있습니다.

 

그래서 만들어진 것이 for of문입니다.

 

 

 

3. for of 문

for (const item of 배열 or 객체) { ... }

for of 문도 for in문과 사용법은 동일하며, 단지 in이 of로 변경되었을 뿐입니다.

 

반복 변수를 const로 지정하는 것도 동일합니다.

 

그리고 앞에서 언급했듯이 item에 반복된 순서에 맞는 값이 들어가 있습니다.

 

fruits = ['apple', 'banana', 'chestnut'];

for (const item of fruits) {
  console.log(`item이 가지고 있는 값: ${item}`);
  console.log('');
}