for ... of / for ... in

JavaScript for ... of / for ... in

 

for ... of

 : for문으로 반복문을 사용하는 비중이 가장 많습니다. 이 때 초기화, 증감문(i++), length를 반복해서 인덱스를 활용해 배열순회를 많이 합니다. 

let arr = [1, 2, 3, 4, 5, 6];

for(let i = 0 ; i < arr.length ; i++){
  console.log(arr[i]);
}
// 배열 전체를 반복 순회하면서 1부터 6까지 출력됨.

 

 : for ... of문을 사용하면 배열 순회시 간결하게 전체를 순회할 수 있습니다. 변수 i나 증감문 설정 없이 배열의 길이만큼 반복됩니다. 각 요소를 대상으로 반복적인 작업을 수행할 때 유리합니다. 성능에 있어서는 일반 for문보다 느리다는 의견도 있지만 훨씬 간결한 코드 작성법이니 알고 있어야 합니다.

let arr = [1, 2, 3, 4, 5, 6];

for (let el of arr){
  console.log(arr[el]);
}

 

for ... in

 : 객체도 key를 순회해서 값을 찾을 때 반복문으로 순회할 수 있습니다. 이 때 for ... in 문을 사용합니다. 아래의 일반 for문의 경우 undefined가 출력되는데 객체는 인덱스로 값을 찾을 수 없기 때문입니다. 객체는 key를 이용해서 value값을 찾을 수 있습니다.

let numbers = {'1': 1, '2': 2, '3': 3, '4': 4, '5': 5};

for(let i = 0; i < numbers.length; i++) {
    console.log(numbers[i]);
} // undefined

 

 : 객체를 순회하며 key를 받습니다. 만약 아래처럼 인덱스 형태가 아니라 console.log(key);를 했다면 객체 내의 모든 key가 출력됩니다.

let numbers = {'a': 1, 'b': 2, 'c': 3, 'd': 4, 'e': 5};

for (let key in numbers){
  console.log(numbers[key]);
}
// numbers 객체를 순회하면서 key를 반환하겠다는 의미로 아래와 같이 코드는 반복된다.

console.log(numbers['a']); // 1
console.log(numbers['b']); // 2
console.log(numbers['c']); // 3
......

for (let key in numbers){
  console.log(key);
}
// numbers 객체를 순회하면서 key를 반환하겠다는 의미로 키 자체를 순회하며 반환한다.

console.log('a'); // 'a'
console.log('b'); // 'b'
console.log('c'); // 'c'
......

 

for ... in은 배열에 사용하지 말 것

 : 자바스크립트에서는 배열도 객체이기 때문에 for ... in 문을 사용할 수 있습니다. 다만, 객체에 적합하게 만들어진 구문이기 때문에 배열에 사용하지 말 것을 권장합니다. MDN for...in 에 따르면 for ... in 문은 정수가 아닌. 이름을 가진 속성, 상속된 모든 열거 가능한 속성들을 반환하게 되어 있습니다. 이 때, 객체는 순서가 중요하지 않으나 배열은 인덱스 순서가 중요한데, for...in은 특정 순서에 따라 인덱스를 반환하는 것을 보장할 수 없다고 합니다. 또한 배열을 순회할 때 일반 for문보다 for ... of문이 성능이 느리다는 의견도 있기 때문에 배열에서도 굳이 모든 for문을 for ... of 문으로 대체할 필요는 없습니다.

let numbers = [1, 2, 3, 4, 5];

for(let i in numbers) {
    console.log(numbers[i]);
} // 인덱스 조회 및 값이 for ... of 처럼 정상출력됨

정리

• for ... of 는 배열의 순회
• for ... in 은 객체의 순회 ( 키 - 인 의 이 라임으로 잘 외워짐)
• 모든 for문을 굳이 for ... of 로 대체할 필요는 없다. 
• 배열도 객체라 for ... in을 사용할 수는 있으나 권장하지 않는다.

참고

MDN for ... of

MDN for ... in

이터레이션과 for ... of문

TCPSCHOOL.COM 반복문