자바스크립트에서 ... 의미

let tempMovingItem;
const movingItem = {
  type: "tree",
  direction: 0,
  top: 0, // 위,아래 정보
  left: 0, // 좌,우 정보
};

function init() {
  tempMovingItem = {...movingItem};
  tempMovingItem.top = 4;
  console.log(movingItem);

  for (let i = 0; i < GAME_ROWS; i++) {
    prependNewLine();
  }
}

...이 무슨 의미인가...?

let으로 선언한 tempMovingItem에 상수 변수선언인 const로 movingItem 이라는 블럭객체의 속성값을 담고있는 객체를 선언하였다. 이 const 객체는 처음 선언한 값 그대로를 프로그램 실행 내내 변함없이 가지고 있을 것이라고 예상할 것이다.

하지만,

tempMovingItem = movingItem;
tempMovingItem.top = 4;
console.log(movingItem);
// tempMoving.top의 값 뿐만 아니라 movingItem.top의 값도 4로 변하게 된다.

tempMovingItem = movingItem; 이렇게 선언하는 것은, tempMoving에 movingItem 객체의 주소값을 넘겨주는 것과 같다. tempMoving의 값을 변경하면 당연히 movingItem의 값도 변하게 된다.

의도는 movingItem의 단순한 값만 가져오는 것이기에, ... 이라는 연산자를 이용하여 객체에 속한 값만 들고 오게 할 수 있다.