자바스크립트는 동적이고 유연한 언어이며, 대부분의 개발자들이 이 언어를 사용하여 웹 개발 및 애플리케이션 개발을 하고 있습니다. 이러한 이유로 자바스크립트를 잘 이해하고 활용하는 것은 중요한 스킬입니다.

이번 포스트에서는 반복자(Iterator) 에 대해 다뤄보고자 합니다. 반복자는 자바스크립트에서 컬렉션을 순회하고 요소에 접근하는 데 사용되는 객체입니다. 자바스크립트 반복자를 이해하면 반복문을 사용하는 대신 간결하고 효율적인 코드를 작성할 수 있습니다.

반복자(Iterator)란 무엇인가요?

반복자는 값을 차례로 가져올 수 있는 객체를 나타냅니다. 이는 순회 가능한 컬렉션(예: 배열, 문자열)에서 값을 반복적으로 가져올 때 유용합니다. 반복자는 next() 메서드를 사용하여 다음 값을 반환하고, done 속성을 통해 반복이 완료되었는지 여부를 확인합니다.

const myIterator = {
  data: [1, 2, 3, 4, 5],
  index: 0,
  next() {
    if (this.index < this.data.length) {
      return { value: this.data[this.index++], done: false };
    } else {
      return { value: undefined, done: true };
    }
  }
};

반복자 사용하기

이제 반복자 객체를 사용하여 값에 접근해 보겠습니다. next() 메서드를 호출하여 다음 값을 가져옵니다. 반복이 완료되면 done 속성은 true로 설정됩니다.

const iterator = myIterator.next();

while (!iterator.done) {
  console.log(iterator.value);
  iterator = myIterator.next();
}

결과는 다음과 같이 출력됩니다:

1
2
3
4
5

ES6의 Symbol.iterator

ES6부터 자바스크립트는 Symbol.iterator라는 내장된 심볼을 통해 객체의 반복 동작을 정의할 수 있습니다. Symbol.iterator는 객체에 next() 메서드를 구현한 Iterator 객체를 반환해야 합니다.

다음은 Symbol.iterator를 사용하여 반복자를 구현하는 예입니다.

const myIterable = {
  data: [1, 2, 3, 4, 5],
  [Symbol.iterator]() {
    let index = 0;

    return {
      next: () => {
        if (index < this.data.length) {
          return { value: this.data[index++], done: false };
        } else {
          return { value: undefined, done: true };
        }
      }
    };
  }
};

이제 for...of 문을 사용하여 반복자를 사용할 수 있습니다.

for (const value of myIterable) {
  console.log(value);
}

결과는 이전과 마찬가지로 다음과 같이 출력됩니다:

1
2
3
4
5

결론

반복자는 자바스크립트에서 컬렉션을 순회하고 요소에 접근하는 유용한 객체입니다. 반복자를 사용하면 반복문을 사용하는 대신 간결하고 효율적인 코드를 작성할 수 있습니다.

반복자는 ES6부터 새롭게 도입된 Symbol.iterator를 사용하여 구현할 수 있습니다. 이를 활용하여 순회 가능한 객체를 만들고 for...of 문을 사용하여 값을 반복적으로 가져올 수 있습니다.

자바스크립트에서 반복 동작을 다루는 여러 가지 기능을 알아보고 실제 프로젝트에서 사용해 보는 것이 좋습니다. 이를 통해 더욱 효율적이고 간결한 코드를 작성할 수 있을 것입니다.