JavaScript 베이스캠프

반복문(for in과 for of)

1. for in 반복문

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

const person = { name: 'licat', age: 10, city: 'Jeju' }; 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]); }

for in 반복문은 객체의 모든 열거 가능한 속성을 순회합니다. 위 코드를 통해 우리는 배열의 속성이 인덱스라는 것을 알 수 있습니다. 그러나 for in 반복문은 배열을 순회할 때 사용하기에 적합하지 않습니다. 만약 위와 같이 인덱스와 요소를 동시에 순회하고 싶다면 배열의 forEach 메서드를 사용하는 것이 좋습니다. for in 반복문은 속성을 순회할 때 사용해주세요.

2. for of 반복문

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

이터러블 객체는 내부적으로 next라는 메서드를 가지고 있어 다음 값을 꺼낼 수 있는 객체를 의미합니다. 배열은 이터러블 객체이므로 for of 반복문을 사용할 수 있습니다. 이 용어도 자주 사용되는 용어이니 잘 기억해두세요. 꼭 자바스크립트가 아니더라도 다른 언어에서도 이터러블 객체라는 용어를 자주 사용합니다. 한국어로는 '반복 가능한 객체', '순회 가능한 객체'로 변역되는 경우가 많습니다.

const fruits = ['apple', 'banana', 'orange']; for (let fruit of fruits) { console.log(fruit); }

for of 반복문은 배열의 요소를 직접 순회하므로, 인덱스가 필요하지 않습니다. 다만 for of 반복문은 배열의 요소를 순회할 때 사용하며, 객체의 속성을 순회할 때는 사용할 수 없습니다.

const person = { name: 'licat', age: 10, city: 'Jeju' }; for (let value of person) { console.log(value); }

위 코드는 에러가 발생합니다.

정리를 하자면 배열의 인덱스를 순회할 때는 for 반복문, 객체의 속성을 순회할 때는 for in 반복문, 객체의 값만 순회할 때는 for of 반복문을 사용하는 것이 좋습니다.

또한 인텍스와 요소를 동시에 순회하고 싶다면 배열의 forEach 메서드를 사용하는 것이 좋습니다.

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

Chrome: 버전 38부터 지원 (2014년 10월)
Firefox: 버전 13부터 지원 (2014년 6월)
Safari: 버전 7.1부터 지원 (2014년 9월)
Opera: 버전 25부터 지원 (2014년 10월)
Edge: 버전 12부터 지원 (2015년 7월)
Internet Explorer: 지원하지 않음

그러나 오래된 브라우저, 특히 Internet Explorer에서는 for of 반복문을 지원하지 않습니다. 따라서 이런 브라우저까지 고려해야 하는 프로젝트(특히나 공공기관 프로젝트라면)라면 for of 사용에 주의해야 합니다.