이터러블

📌 Collection 객체를 반복할 때, Object 객체를 반복할 때, callback 함수가 필요한 배열을 반복할 때 각각 어떤 문 또는 메서드를 가지고 최적화를 할 것인지 이유와 함께 말해주세요.

• Collection 객체

  • for of 구문을 사용하기 위해선 Collection 객체가 [Symbol.iterator] 속성을 가지고 있어야만 합니다.

  • for of는 이터러블한 객체의 순회를 도와주는 반복문이다. (객체에는 사용불가)

  • 내부에 [Symbol.iterator]를 가진 객체라면 어떤 객체든 순회할 수 있다.

  • 하지만 iterable하지 않은 일반 Object에는 사용할 수 없다.

• Object 객체

  • Object의 enumerable한 non-Symbol key(속성)들을 반복하는데 사용된다.
  • for in은 열거 가능한 값이 true로 설정되어 있어 key만 반복할 수있고, Nonenumerable(비열거형)인 value에는 접근할 수 없다.

• 배열을 반복하면서 콜백 함수가 필요한 경우

  • forEach는 Array의 prototype을 상속받은 객체가 사용할 수 있는 함수이다.

  • 반복문이 아니라 '함수'이다. 인자로 함수를 받아 각 배열의 요소에 해당 함수를 적용한다.

• for ... in은 다른 반복문으로 충분히 대체 가능한데 그럼 for ... in은 왜 쓰는 것일까?

  • 키-값 쌍이 선호되는 데이터의 경우나 특정 값을 가진 키가 있는지 확인하려는 경우에는 for in이 유용하다.

📌 for...of, for...in 루프와 forEach() 메서드의 차이는 무엇인가요?

• for...of 루프:

  • for...of 루프는 주로 반복 가능한(iterable) 객체를 순회하는 데 사용됩니다. 이는 배열, 문자열, 맵(Map), 셋(Set), 제너레이터(Generator) 등과 같은 객체에서 사용할 수 있습니다.
  • for...of 루프는 값 자체에 직접 접근할 수 있으며, 값을 수정하지 않습니다.
  • 예시:

  Copy code
  const iterable = [1, 2, 3];
  for (const value of iterable) {
    console.log(value); // 1, 2, 3
  }

• for...in 루프:

  • for...in 루프는 객체의 열거 가능한(enumerable) 프로퍼티를 반복하는 데 사용됩니다. 이는 객체의 프로퍼티를 순회할 때 사용됩니다.
  • for...in 루프는 프로퍼티의 이름 또는 키에 접근하며, 값에 직접 접근할 수는 없습니다.
    주의: for...in 루프는 상속된 프로퍼티도 열거하므로 이를 필요에 따라 필터링해야 합니다.
  • 예시:

    Copy code
    const obj = { a: 1, b: 2, c: 3 };
    for (const key in obj) {
      console.log(key); // "a", "b", "c"
      console.log(obj[key]); // 1, 2, 3
    }

• forEach() 메서드:

  • forEach() 메서드는 배열의 각 요소에 대한 반복을 위해 사용됩니다. 배열 메서드로, 콜백 함수를 이용하여 각 요소에 대한 작업을 수행합니다.
  • forEach() 메서드는 값과 인덱스에 동시에 접근할 수 있으며, 배열을 수정하지 않는 한 가장 적합한 방법입니다.
  • 예시:

  Copy code
  const arr = [1, 2, 3];
  arr.forEach((value, index) => {
    console.log(`Value at index ${index}: ${value}`);
  });

• 요약하면, for...of는 반복 가능한 객체 순회용, for...in은 객체 프로퍼티 순회용, forEach()는 배열 요소 반복용입니다. 각각의 선택은 사용하려는 데이터 구조 및 요구사항에 따라 달라질 것입니다.

📌 이터러블, 이터레이터 프로토콜에 대해서 말씀해주세요.

• 이터러블 프로토콜:

  • Symbol.iterator를 프로퍼티 키로 사용한 메서드를 구현하거나 프로토타입 체인을 통해 상속 받은 Symbol.iterator 메서드를 호출하면 이터레이터 프로토콜을 준수한 이터레이터를 반환합니다.
  • 이터러블 객체는 for...of 루프로 순회할 수 있으며, 스프레드 문법 및 배열 디스트럭처링 할당의 대상으로 사용할 수 있습니다.

• 이터레이터 프로토콜:

  • 이터러블 객체의 Symbol.iterator 메서드를 호출하면 이터레이터 프로토콜을 준수한 이터레이터가 반환됩니다.
  • 이터레이터는 next 메서드를 가지며, next 메서드를 호출하면 이터러블을 순회하며 value와 done 프로퍼티를 가진 이터레이터 리절트 객체를 반환합니다.
  • 이러한 규약을 이터레이터 프로토콜이라 하며, 이터레이터는 이터러블의 요소를 탐색하기 위한 포인터 역할을 합니다.

• 이터레이터 프로토콜을 준수한 객체를 이터레이터로, 이터러블 프로토콜을 준수한 객체를 이터러블로 부른다

📌이터러블, 이터레이터, 제너레이터에 대해 설명해주세요.

• 제너레이터 함수는 일반 함수와 비슷하게 정의되지만 함수 내부에서 실행 흐름을 일시적으로 중단하고 이어서 실행할 수 있는 특별한 객체를 반환합니다. 이러한 중단과 재개는 개발자가 제어할 수 있으며, 이를 통해 비동기 코드를 더 쉽게 관리하고 복잡한 순회 작업을 수행할 수 있습니다.

• 제너레이터 함수는 다음과 같은 특징을 가집니다:

  • function* 키워드를 사용하여 정의됩니다.
  • yield 문을 사용하여 중간 결과를 반환하고 함수 실행을 일시 중단시킵니다.
  • 호출된 제너레이터는 이터레이터 객체를 반환하며, next() 메서드를 사용하여 다음 값을 얻고 함수 실행을 다시 시작할 수 있습니다.

📌 유사 배열 객체를 이터러블로 사용하는 방법에 대해서 설명해 주세요.

• 유사 배열 객체인 arguments,NodeList, HTMLCollection 객체에 Symbol.iterator 메서드를 구현하여 이터러블로 사용 가능

• 이 메서드는 이터레이터 객체를 반환하고, 이 이터레이터 객체는 next 메서드를 가지고 있어 각 요소를 차례로 반환합니다.

• 이렇게 구현된 객체를 for...of 루프나 다른 이터레이션 메커니즘을 사용하여 순회할 수 있습니다.