유사 배열 객체 만들기

Array-like Object

유사 배열 객체는 말 그대로 배열과 유사한 객체이며, 배열처럼 인덱스를 통해 요소에 접근할 수 있습니다.

유사 배열 객체 만들기

유사 배열 객체를 만드는 방법은 간단합니다. 객체 리터럴인 {} 안에 인덱스를 프로퍼티로 하여 값을 적어주고, 이러한 값의 개수만큼 length 프로퍼티만 추가하면 됩니다. 바로 다음과 같이 말이죠.

const arrlike = {
  0: 1,
  1: 2,
  2: 3,
  3: 4,
  4: 5,
  length: 5,
};

for (let i = 0; i < arrlike.length; i++) {
  // 1 2 3 4 5
  console.log(arrlike[i]);
}

몇 안 되는 프로퍼티만으로 유사 배열 객체를 만들어 봤는데 어떤가요? 정말 간단하죠? 이처럼 유사 배열 객체는 for문을 통해 요소를 순회할 수 있습니다. 하지만 for-of와 비구조화 할당, 그리고 전개 연산자(...) 등은 사용할 수 없습니다. 이는 객체가 이터러블(Iterable)하지 않기 때문인데, 이터레이션 프로토콜을 준수하여 객체를 만들어 주면 유사 배열 객체이지만 앞서 언급한 연산을 모두 사용할 수 있습니다.

이터레이션 프로토콜이란 순회 가능한 자료구조를 만들기 위한 규칙을 정의한 것입니다. 👏

이터러블한 객체 만들기

이터러블한 객체를 만들기 위해서는 이터레이션 프로토콜에 따라 객체 내부에 몇 가지 작업을 해야 합니다. 가장 먼저 [Symbol.iterator]라는 심볼명을 가진 메소드를 정의하고, 이 안에서 이터레이터(Iterator)를 반환해야 합니다. 이터레이터는 객체 내부에 상주하며, 현재 어느 지점을 참조 중인지 알려주는 포인터 역할을 합니다. 또한 next라는 이름의 메소드도 정의해야 하는데, 이 메소드는 반복할 요소가 남아있는지에 대한 유무를 체크해서 결과를 객체 형태로 반환합니다.

말만 거창하지 별로 어렵지 않으니 이어지는 코드를 확인하시기 바랍니다.

const arrlike = {
  [Symbol.iterator]() {
    this.i = 0;
    return this;
  },
  next() {
    return { value: this[this.i], done: ++this.i > this.length };
  },
  0: 1,
  1: 2,
  2: 3,
  3: 4,
  4: 5,
  length: 5,
};

for (const value of arrlike) {
  console.log(value); // 1 2 3 4 5
}

const [a, b] = arrlike;
console.log(a, b); // 1 2

console.log(...arrlike); // 1 2 3 4 5

next 메소드는 순회 정보를 value와 done을 가진 객체에 담아 반환해야 합니다. 각 프로퍼티는 현재 참조 중인 값과 더 순회 가능한지에 대한 값을 갖습니다. for-of와 같은 순회 관련 문법은 계속해서 next 메소드를 호출하게 되고, done이 true가 될 때 순회를 종료합니다.

흔히 접하게 되는 유사 배열 객체

자바스크립트로 코딩을 하다 보면 생각보다 자주 유사 배열 객체를 만나게 됩니다.

• 문자열(string)
• 함수의 매개변수 객체(arguments)
• 각종 DOM 객체(HTMLCollection, NodeList 등)

const text = '안녕하세요!';
for (let i = 0; i < text.length; i++) {
  // 안 녕 하 세 요 !
  console.log(text[i]);
}

function foo() {
  // [Arguments] { '0': 'hello', '1': 'jerry', '2': 123 }
  console.log(arguments);
}
foo('hello', 'jerry', 123);

문자열은 원시형 데이터이지만, 객체처럼 접근하여 length 프로퍼티를 확인할 수 있습니다. 원시형 데이터를 객체처럼 사용할 수 있도록 임시 변환하는 작업을 박싱(Boxing)이라 하는데, 이렇게 변환된 문자열 객체도 유사 배열 객체이기 때문에 순회 가능합니다. 웹사이트 개발을 하다 보면 언급한 것들보다 훨씬 더 많은 유사 배열 객체를 만나볼 수 있습니다.

그렇기 때문에 자유롭게 활용할 수 있도록 익숙해질 필요가 있습니다. 😆

References

• What is Array Like Object in JavaScript
• Iteration protocols (MDN)