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
반복문은 객체의 모든 열거 가능한 속성을 순회합니다.
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~in
과 for~of
는 객체와 배열을 순회하는데 유용한 반복문입니다. 객체의 속성을 순회할 때는 for~in
을, 이터러블 객체의 값을 순회할 때는 for~of
를 사용하는 것이 좋습니다. 이 두 반복문을 적재적소에 활용한다면 코드의 가독성과 효율성을 높일 수 있을 것입니다.
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