JavaScript Operator - Spread & Rest

최신의 JavaScript에서는 ... 으로 표현하는 Spread와 Rest 연산자를 사용할 수 있습니다. 

 

Spread Operator

Spread Operator는 배열에서 elements를 가져오거나 객체에서 속성을 가져올 수 있습니다.

 

배열에 사용한 예시:

const sourceArray = [1, 2, 3];

const newArray = [sourceArray, 4, 5];
console.log(newArray);

const spreadArray = [...sourceArray, 4, 5];
console.log(spreadArray);

newArray에서 spread 연산자를 사용하지 않고 바로 넣을시 [[1, 2, 3], 4, 5]와 같이 2차원 형태로 들어갑니다.

spreadArray에서 처럼 spread연산자를 사용하여 넣을시엔 elements를 펼쳐서 [1, 2, 3, 4, 5]와 같은 형태로 들어갑니다.

 

 

객체에 사용한 예시:

const car = {
  color: 'Red',
  wheels: 4
};

const sportsCar = {
  ...car,
  turbo: true
};

// car 객체의 속성들을 가져와서 sportsCar에 포함
console.log(sportsCar);

새로 만든 객체에 sprad연산자를 사용하여 다른 객체를 포함시킬시엔 아래와 같이 객체의 속성으로 들어갑니다.

[object Object] {
    color: "Red",
    turbo: true,
    wheels: 4
}

 

 

Rest Operator

Rest Operator는 배열, 객체, 함수의 파라미터에서 사용 가능합니다.

 

배열에 사용한 예시:

const sourceArray = [1, 2, 3, 4, 5]

const [newArray, ...restArray] = sourceArray;

console.log(newArray);	// 1
console.log(restArray);	// [2, 3, 4, 5]

배열에 rest연산자를 사용시 따로 선언한 변수 외의 나머지 값들을 따로 배열로 만들어 냅니다.

 

 

객체에 사용한 예시:

const sourceObject = {
  name: 'Hello',
  color: 'blue',
  age: 20
}

const { name, ...secondObject } = sourceObject;
console.log(name);			// Hello
console.log(secondObject);
// [object Object] {
// 	    color: "blue"
//		age: 20
// }

객체에 rest연산자를 사용시 따로 선언한 속성만 제외한 나머지 속성들로 이뤄진 객체를 만들어 냅니다.

 

 

함수의 파라미터에 사용한 예시:

function sumFunc(...rest) {
    return rest.reduce((acc, curr) => acc + curr, 0);
}

console.log(sumFunc(1, 2, 3));			// 6
console.log(sumFunc(1, 2, 3, 4, 5));	// 15

함수에 들어오는 파라미터가 몇개인지 정할 수 없는 경우에 유용하게 사용할 수 있습니다.