[JS]스프레드 오퍼레이터 - … 연산자

 

Spread Operator - ... 연산자

 

스프레드의 사전적인 뜻은 '펼치다' 정도 이다.

스프레드 오퍼레이터는 자바스크립트 표현식을 확장(펼칠 수 있는)할 수 있는 연산자 이다.

배열이나 객체에서 주로 사용하고 표현은 점3개 ... 로 한다.

 

 

아래는 사용 예이다.

 

array1 배열에 1,2,3 값이 있다.

array2 배열요소 안에 ...array1 이라고 하면 [1,2,3] 값을 일일이 쓸 필요 없이 사용할 수 있다.

array1를 콘솔에 출력해보면 [1,2,3,4,5] 가 나온다.

펼치다(spread)는 것은 객체 혹은 배열의 속성을 가져올 수 있다는 것을 의미한다.

const array1 = [1, 2, 3];
const array2 = [...array1, 4, 5];
console.log(array2); 
// Output: [1, 2, 3, 4, 5]

 

 

객체에서도 사용할 수 있는데 obj1에는 a값과 b값이 있다.

obj2에 ...obj1을 사용하면 a값과 b값을 간편하게 재사용 할 수 있다.

const obj1 = {a: 1, b: 2};
const obj2 = {...obj1, c: 3};
console.log(obj2);
// Output: {a: 1, b: 2, c: 3}

 

배열에서 Spread

배열의

• 복사(myArray.splice())
• 추가(myArray.push())
• 연결(myArray.concat())

에 대해 메소드를 대신하여 사용할 수 있다.

 

복사

const colors1 = ['red', 'blue', 'black', 'yellow'];
const colors2 = [...colors1];

console.log(colors1);
// ['red', 'blue', 'black', 'yellow']
console.log(colors2);
// ['red', 'blue', 'black', 'yellow']
console.log(colors1 === colors2);
// false, colors1와 colors2은 서로 다른 배열

 

추가

let number1 = [1, 2, 3];
let number2 = [4, 5, 6];

number1 = [...number1, ...number2, 7, 8];
// [1, 2, 3, 4, 5, 6, 7, 8]
number2 = [...number2, ...number1];
//  [4, 5, 6, 1, 2, 3, 4, 5, 6, 7, 8]

 

 

객체의 Spread

추가

객체가 소유한 속성에 새로운 속성을 추가한다.

const zoo1 = {
  tiger: '6마리',
  giraffe: '2마리',
  rabbit: '5마리',
};
const zoo2 = { ...zoo1 };

console.log(zoo1);
// {tiger: '6마리', giraffe: '2마리', rabbit: '5마리'}
console.log(zoo2);
// {tiger: '6마리', giraffe: '2마리', rabbit: '5마리'}
console.log(zoo1 === zoo2);
// false, zoo1와 zoo2는 서로 다른 객체

 

병합

객체들을 병합한다.

const zoo1 = {
  lion: '3마리',
  monkey: '6마리',
};
const zoo2 = {
  lion: '2마리',
  elephant: '4마리',
};
const zoo3 = { ...zoo1, ...zoo2 };

console.log(zoo3);
// {lion: '2마리', monkey: '6마리', elephant: '4마리'}

 

 

함수의 Spread

함수의 인자로 배열을 활용할 때 쓰는 Funtion.apply() 보다 간편하게 사용할 수 있습니다.

function FunctionDivision(x, y) {
  return x / y;
}
const arrayNumber = [10, 2];

// apply()
console.log(FunctionDivision.apply(null, arrayNumber));
// 5

// spread syntax
console.log(FunctionDivision(...arrayNumber));
// 5