자바스크립트 반복문

자바스크립트는 기본적으로 C 스타일의 for(;;) 와 for ... in이 있다. 하지만 ES6에서 반복문으로 for ... of 를 추가하였다. for(;;) 과 for ... in 의 어떤 단점때문에 for ... of 를 사용하는지 알아보자.

for(;;)

for ([initialization]; [condition]; [final-expression])
   statement

우리가 익히 알고있는 for(;;) 에는 단점 두 가지가 존재합니다.

1. 인덱스를 사용해야만 한다.
2. (;;) 의 코드가 길다.

for ... in

for (variable in object) { ... }

for ... in 문은 상속된 열거 가능한 속성들을 포함하여 객체에서 문자열로 키가 지정된 모든 열거 가능한 속성에 대해 반복합니다. (Symbol 로 키가 지정된 속성은 무시합니다.)

이러한 for ... in 은 for(;;) 문의 (;;) 코드를 줄일 수 있지만, 몇 가지 단점이 존재하기 때문에 사용하지 않는 것이 좋습니다.

1. 특정 순서에 따라 인덱스를 반환하는 것을 보장할 수 없습니다.
2. forEach , for ... in 을 사용하는 것보다 성능이 좋지 않습니다.
3. 객체의 프로토타입에 속성이 추가된 경우 해당 속성이 간섭할 수 있습니다. 따라서 객체 자체에 연결된 속성만 고려하고자 하면 hasOwnProperty() 를 사용해야합니다.

var test = {
  a: 1,
  b: 2,
  c: 3
};

if (typeof Object.prototype.sayHi === 'undefined') {
  Object.prototype.sayHi = function() {
    console.log('Hi!');
  }
}

for (var key in test) {
  console.log(`${key}: ${test[key]}`);
  // a: 1
  // b: 2
  // c: 3
  // sayHi: function() { console.log('Hi!'); }
}

for ... of

for (variable of iterable) {
  statement
}

for ... of 문은 Iterable한 객체(Iterable protocol을 따르는 객체 ex. Array , Map , Set ...)에 대해서 반복합니다.

for ... of 문은 앞서 for(;;) 와 for ... in 문의 단점을 보완합니다. 하지만 for ... of 를 사용할때 인덱스를 사용하지 못하는 문제가 있습니다. 이럴때는 forEach 메서드를 사용하면 됩니다.

정리

사실 JS의 Array 배열을 사용할때 forEach , map , reduce 와 같은 함수형 메소드를 사용하기 때문에 for 문을 직접적으로 작성하지는 않지만, 전체를 반복하지 않기를 원하는 경우 for 문을 사용하곤 합니다.

기존에 존재했던 for(;;) , for ... in 문은 몇 가지 단점이 존재하기 때문에 이를 보완하고자 for ... of 문이 ES6에 추가되었습니다.