1. for~in 반복문

for~in 반복문은 객체의 속성(키)을 순회하는데 사용됩니다. 각 반복 단계에서 객체의 키가 변수에 할당됩니다.

const person = {
  name: 'John',
  age: 30,
  city: 'New York'
};

for (let key in person) {
  console.log(key + ': ' + person[key]);
}

const array = [10, 20, 30, 40, 50];

for (let index in array) {
  console.log(index + ': ' + array[index]);

위 코드의 실행 결과는 다음과 같습니다.

name: John
age: 30
city: New York

0: 10
1: 20
2: 30
3: 40
4: 50

for~in 반복문은 객체의 모든 열거 가능한 속성을 순회합니다.

2. for~of 반복문

for~of 반복문은 ES6에서 도입된 새로운 반복문으로, 이터러블(iterable) 객체의 값을 순회하는데 사용됩니다. 배열, 문자열, Map, Set 등이 이터러블 객체에 해당합니다.

const fruits = ['apple', 'banana', 'orange'];

for (let fruit of fruits) {
  console.log(fruit);
}

위 코드의 실행 결과는 다음과 같습니다.

apple
banana
orange

for~of 반복문은 배열의 요소를 직접 순회하므로, 인덱스가 필요하지 않습니다.

for~of 반복문은 이터러블 객체를 순회할 수 있어 범용성이 높습니다. 또한 break, continue, return 키워드를 사용하여 반복문의 흐름을 제어할 수 있습니다.

for~infor~of는 객체와 배열을 순회하는데 유용한 반복문입니다. 객체의 속성을 순회할 때는 for~in을, 이터러블 객체의 값을 순회할 때는 for~of를 사용하는 것이 좋습니다. 이 두 반복문을 적재적소에 활용한다면 코드의 가독성과 효율성을 높일 수 있을 것입니다.

3. 지원 브라우저

for~in 반복문은 오래전부터 자바스크립트에 존재해왔습니다. ECMAScript 1부터 포함된 기능이죠. 따라서 모든 브라우저에서 for~in 반복문을 지원합니다.

반면 for~of 반복문은 상대적으로 최신 기능입니다. ECMAScript 2015(ES6)에서 도입되었죠. 다행히도 대부분의 최신 브라우저에서는 for~of 반복문을 지원합니다.

다음은 각 브라우저별 for~of 지원 현황입니다.

"for...of" | Can I use... Support tables for HTML5, CSS3, etc