객체 자료형, 이터러블 객체, 유사 배열의 관계

JavaScript에서 객체 자료형, 이터러블 객체, 유사 배열은 모두 다양한 형태의 데이터 구조를 나타내지만, 각기 다른 특징과 사용 방법을 가지고 있습니다.

이 세 가지 개념의 관계를 이해하면 JavaScript의 데이터 구조를 더 잘 활용할 수 있습니다.

 

객체 자료형 (Object)

객체는 JavaScript의 기본 데이터 구조 중 하나로, 키-값 쌍의 집합을 나타냅니다.

모든 JavaScript 객체는 프로토타입 체인(prototype chain)을 통해 속성(property)과 메서드(method)를 상속받습니다.

javascript
const obj = {
  name: 'Alice',
  age: 30,
  greet: function() {
    console.log('Hello!');
  }
};

 

 특징
- 키는 문자열 또는 심볼이어야 하며, 값은 어떤 타입이든 가능합니다.
- 이터러블 프로토콜을 따르지 않습니다 (기본적으로 `Symbol.iterator`가 없음).
- `for...in` 루프를 사용하여 객체의 속성을 반복(iterate)할 수 있습니다.

이터러블 객체 (Iterable)

이터러블 객체는 반복 가능한 프로토콜을 구현하여, `for...of` 루프, 스프레드 연산자, 구조 분해 할당 등 다양한 문법에서 사용될 수 있는 객체를 말합니다.

이터러블 객체는 `Symbol.iterator` 메서드를 구현해야 합니다.

const iterable = {
  [Symbol.iterator]: function() {
    let step = 0;
    return {
      next: function() {
        step++;
        if (step === 1) {
          return { value: 'Hello', done: false };
        } else if (step === 2) {
          return { value: 'World', done: false };
        } else {
          return { value: undefined, done: true };
        }
      }
    };
  }
};

for (const word of iterable) {
  console.log(word);
}
// Output: Hello
// Output: World

특징
- `Symbol.iterator` 메서드를 구현하여 이터레이터를 반환합니다.
- 이터러블 프로토콜을 따릅니다.
- `for...of` 루프를 사용하여 값을 반복(iterate)할 수 있습니다.

유사 배열 객체 (Array-like Object)

유사 배열 객체는 배열처럼 인덱스를 사용하여 요소에 접근할 수 있고, `length` 속성을 가지지만, 실제 배열은 아닙니다.

이들은 `Array`의 메서드를 상속받지 않으므로 배열 메서드를 직접 사용할 수는 없습니다.

const arrayLike = {
  0: 'a',
  1: 'b',
  2: 'c',
  length: 3
};

// Array 메서드를 사용하려면 Function.prototype.call을 통해 사용해야 합니다.
const array = Array.prototype.slice.call(arrayLike);
console.log(array); // ['a', 'b', 'c']

특징
- 인덱스와 `length` 속성을 가집니다.
- 배열 메서드를 상속받지 않으므로 직접 사용할 수 없습니다.
- 주로 DOM 요소 컬렉션(NodeList), `arguments` 객체 등이 유사 배열 객체입니다.

 

관계 요약

- 객체 자료형 (Object) : 모든 객체는 기본적으로 이터러블 프로토콜을 따르지 않지만, 키-값 쌍을 저장합니다. 이터러블 객체나 유사 배열 객체의 상위 개념입니다.
- 이터러블 객체 (Iterable) : `Symbol.iterator` 메서드를 구현하여 이터레이터를 반환하는 객체입니다. 배열, 문자열, `Map`, `Set` 등이 이터러블 객체입니다.
- 유사 배열 객체 (Array-like Object): 인덱스와 `length` 속성을 가지지만, 배열 메서드를 상속받지 않는 객체입니다. 주로 DOM 컬렉션과 `arguments` 객체가 이에 해당합니다.

이러한 구조들을 이해하면 JavaScript의 다양한 데이터 구조를 효과적으로 다루고, 각 구조의 특성에 맞게 적절히 활용할 수 있습니다.