Object.entries를 사용하고 그것이 어떻게 작동하는지 궁금한 적이 있습니까? 생각보다 훨씬 간단합니다!

기본 구현은 다음과 같습니다.

function objectEntries(obj) {
  const entries = [];

  for (const key in obj) {
    if (Object.hasOwn(obj, key)) {
      entries.push([key, obj[key]]);
    }
  }

  return entries;
}

그러나 이 코드는 충분하지 않습니다. 객체가 거대하다면 어떻게 될까요? 배열 기반 접근 방식의 성능은 이 기능을 실행하는 전체 프로세스 동안 메모리에 저장되어야 합니다. 그리고 다시 사용한다면? 메모리에 새로운 배열을 구축하고 유지해야 합니다. 현실 세계에서는 이로 인해 심각한 성능 문제가 발생할 수 있으며 어느 시점에서는 성능을 수용해야 합니다. 그러나 이러한 모든 문제를 해결할 수 있는 훌륭한 솔루션이 있으며, 이를 통해 Symbol.iterator가 도움이 됩니다!

업데이트된 스니펫은 다음과 같습니다.

function objectEntries(obj) {
  return {
    [Symbol.iterator]() {
      const keys = Object.keys(obj);
      let index = 0;

      return {
        next() {
          if (index 



반복을 위해 Symbol.iterator를 사용하는 이유는 무엇입니까?

초기 구현에서 objectEntries 함수는 메모리에 모든 항목([키, 값] 쌍)의 배열을 구축합니다. 이는 객체에 많은 수의 속성이 있는 경우 문제가 될 수 있습니다. 모든 항목을 배열에 저장한다는 것은 모든 단일 쌍에 대해 미리 메모리를 할당해야 함을 의미합니다. 이 접근 방식은 작은 개체에는 꽤 괜찮지만, 개체 크기가 커질수록 비효율적이고 속도가 느려집니다.

업데이트된 코드에서는 반복 논리를 보유하는 객체에 [Symbol.iterator]를 정의합니다. 단계별로 분석해 보겠습니다.

• 키 초기화: Object.keys(obj)는 객체 obj에서 키 배열을 가져옵니다. 이 키 목록을 통해 모든 항목을 저장하지 않고도 액세스해야 하는 속성이 무엇인지 정확히 알 수 있습니다.
• 인덱스 포인터 사용: 변수 인덱스는 키 배열에서 현재 위치를 추적합니다. 이것이 루프에서 갖게 될 유일한 상태입니다.
• 다음 메서드 정의: next() 함수는 인덱스를 사용하여 현재 키를 검색하고 증가시킵니다. 각 [key, obj[key]] 쌍을 값으로 반환하고 모든 키를 반복하면 done: true를 설정합니다.
• 이를 통해 전체 항목 배열을 미리 생성하는 데 드는 메모리 비용 없이 objectEntries가 모든 for...of 루프와 호환되도록 할 수 있습니다.

사용자 정의 루프에 Symbol.iterator 적용

이러한 방법으로 루프 동작을 더 효과적으로 제어할 수 있는 방법에 대해 자세히 살펴보겠습니다. 제공된 각 예제는 배열 데이터와 상호 작용하는 고유한 방법을 보여 주며 코드에 많은 유연성을 추가합니다. 각 방법의 의미와 다양한 시나리오에서 어떻게 활용할 수 있는지 살펴보겠습니다.

이 예제에서는 코드를 더 쉽게 읽을 수 있도록 예제 메서드를 사용하여 Array 프로토타입(프로토타입에 대한 자세한 내용은 여기)을 확장하겠습니다. 바로 뛰어들자!

예를 들어, 이 reverseIterator 메소드는 가장 최근 메시지를 먼저 표시하려는 채팅 애플리케이션과 같은 곳에 유용할 수 있습니다. 채팅 애플리케이션은 많은 양의 데이터(이 경우 메시지)를 보유하는 것으로 유명합니다. reverseIterator를 사용하면 메시지 목록을 반복하고 새 역방향 배열을 만들 필요 없이 원하는 순서로 표시할 수 있습니다.

Array.prototype.reverseIterator = function() {
  let index = this.length - 1;
  return {
    [Symbol.iterator]: () => ({
      next: () => {
        if (index >= 0) {
          return { value: this[index--], done: false };
        }
        return { done: true };
      }
    })
  };
};

const numbers = [1, 2, 3, 4, 5];
for (const num of numbers.reverseIterator()) {
  console.log(num); // 5, 4, 3, 2, 1
}

이 고유한 방법을 사용하면 고유한 값만 생성되도록 하면서 배열을 반복할 수 있습니다. 이는 미리 필터링하거나 더 많은 메모리를 사용하지 않고 즉시 중복을 제거하는 데 매우 유용합니다.

Array.prototype.unique = function() {
  const seen = new Set();
  return {
    [Symbol.iterator]: () => ({
      next: () => {
        for (let i = 0; i 



아래 청크 방법은 대규모 데이터 세트를 처리할 때 유용할 수 있으며, 이를 더 작은 청크로 처리하여 메모리 사용량을 줄이고 성능을 향상시킬 수 있습니다. CSV 파일과 같은 파일에서 데이터를 가져오는 경우 더 확장 가능한 세그먼트에서 해당 데이터를 읽고 처리할 수 있습니다. 또한 웹 사용자 인터페이스에서는 청크를 페이지 매김에 사용할 수 있으므로 페이지당 특정 수의 항목을 표시하거나 무한 로더를 더 잘 관리하는 데 도움이 됩니다.


Array.prototype.chunk = function(size) {
  let index = 0;
  return {
    [Symbol.iterator]: () => ({
      next: () => {
        if (index 



결론

이 기사에서는 Symbol.iterator가 논리를 사용자 정의하고 루프의 효율성을 향상시키는 방법을 살펴보았습니다. Array.prototype(또는 그 효과에 대한 다른 반복 가능)에 사용자 정의 반복 가능 메서드를 구현함으로써 메모리 사용량을 효과적으로 관리하고 루프 실행 방법을 제어할 수 있습니다.

objectEntries의 초기 예에서는 대형 객체를 처리할 때 배열 기반 접근 방식이 어떻게 성능 문제로 이어질 수 있는지 보여주었습니다. 그러나 SYmbol.iterator를 사용하여 불필요한 메모리 할당으로 인한 오버헤드 없이 객체 항목을 반복할 수 있는 효율적인 솔루션을 만들었습니다.

또한 Array.prototype을 확장하면 개발자가 매일 처리해야 하는 다양한 실제 시나리오를 어떻게 촉진할 수 있는지에 대한 몇 가지 실제 사례도 살펴보았습니다.

이러한 강력한 도구를 사용하면 앱 성능에 거의 영향을 미치지 않으면서 JavaScript의 복잡한 데이터 처리 시나리오를 해결할 수 있는 능력이 더 높아집니다.