[카테고리:] JavaScript

스프레드 연산자를 적용할 수 있는 클래스 AA가 있다고 할때 활용 예는 다음과 같다.

const aa = new AA();

aa.addItem(1);
aa.addItem(2);
aa.addItem(3);

console.log(...aa)

콘솔에 1 2 3이 찍힌다. 바로 … 연산자가 스프레드 연산자이다. 이처럼 스프레드 연산자를 적용할 수 있도록 하기 위해서 AA 클래스는 다음처럼 작성되어야 한다.

class AA {
  constructor() {
    this.items = []; // 이터러블한 내용을 저장할 배열
  }

  // 아이템을 추가하는 메소드
  addItem(item) {
    this.items.push(item);
  }

  // Symbol.iterator를 구현하여 이터러블하게 만듭니다.
  [Symbol.iterator]() {
    let index = 0;
    let data  = this.items;
    return {
      next: () => {
        if (index < data.length) {
          return { value: data[index++], done: false };
        } else {
          return { done: true };
        }
      }
    };
  }
}

참고로 스프레드 연산자는 매우 유용한 문법으로, 배열이나 이터러블 객체의 요소를 개별 요소로 확장하거나, 함수 호출 시 인수로 사용하거나, 객체 리터럴에서 속성을 복사할 때 사용된다. 예를들어 아래의 코드의 예시가 있다.

사례1

let arr1 = [1, 2, 3];
let arr2 = [...arr1, 4, 5]; // [1, 2, 3, 4, 5]

사례2

function sum(x, y, z) {
  return x + y + z;
}

let numbers = [1, 2, 3];
console.log(sum(...numbers)); // 6

사례3

let obj1 = { foo: 'bar', x: 42 };
let obj2 = { ...obj1, y: 1337 }; // { foo: 'bar', x: 42, y: 1337 }

스프레드 연산자는 얕은 복사를 수행한다는 점을 유념하자. 위의 예제를 보면 알겠지만 스프레드 연산자는 코드를 더욱 간결하고 가독성을 높여주며 데이터 구조를 쉽게 조작할 수 있게 해준다. 하지만 얕은 복사라는 점을 다시 한번 더 유념하자.