전개 구문 (Spread 연산자)

배열 리터럴의 spread

**함수 호출

배열을 함수의 인수로 사용하려면 apply()를 써야 했다. spread는 이를 대체한다.

// before
function myFunction(x, y, z) { }
var args = [0, 1, 2];
myFunction.apply(null, args);

// after
myFunction(...args);

 

**new에 적용

new로 생성자를 호출할 때, 배열과 apply를 직접 사용하는 것이 가능해졌다.

var dateFields = [1970, 0, 1];  // 1 Jan 1970
var d = new Date(...dateFields);

 

 

**배열 복사 가능

var arr = [1, 2, 3];
var arr2 = [...arr]; // arr.slice() 와 유사
arr2.push(4);

// arr2 은 [1, 2, 3, 4] 이 됨
// arr 은 영향을 받지 않고 남아 있음

** 복사 기능은 1레벨 깊이에서 유효하다. '배열 내 배열' 같은 다차원 배열에는 적합하지 않다.

 

 

 

 

객체 리터럴의 spread

얕은 복제 또는 객체의 병합은 Object.assign()보다 더 짧은 문법으로 사용 가능해졌다.

( * spread가 assign()처럼 setters를 트리거하지는 않는다.)

var obj1 = { foo: 'bar', x: 42 };
var obj2 = { foo: 'baz', y: 13 };

var clonedObj = { ...obj1 };
// Object { foo: "bar", x: 42 }

var mergedObj = { ...obj1, ...obj2 };
// Object { foo: "baz", x: 42, y: 13 }

 

위처럼 객체를 병합할 때 뒤에 있는 객체가 앞에 있는 객체를 overwriting 한다!

다음은 그 예시다.

const person = {
  firstName: "Lisa",
  lastName: "Simpson",
  homeTown: "Springfield"
};

const overwritten = {
  ...person,
  homeTown: "New York"
};

console.log(overwritten);
/*
{
  firstName: "Lisa",
  lastName: "Simpson",
  homeTown: "New York"
}
*/

 

 

** overwriting 되는 속성때문에, react 함수컴포넌트에서 남은 인자를 할당한 { ...props } 를 선순위에 쓴다.

...props를 후순위에 작성할 경우, 컴포넌트에서 새로 작성한 인자를 overwriting 할 수 있기 때문이다!

function Logo({height, width, logo, ...props}){
  return (
    <Img
      {...props}
      alt="서울대학교 로고"
      height={height}
      src={logo}
      width={width}
    />
  );
}

 

 

 

참고

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Spread_syntax