JavaScript(Spread Operator)

■ Spread Operator

Spread Operator란?

 

Spread Operator (...)는 배열의 괄호를 벗겨주는 문법으로

함수의 소괄호, 오브젝트의 중괄호, 어레이의 대괄호 내에서 사용합니다.

var 어레이 = ['hello', 'world'];
console.log(어레이); // ['hello', 'world']
console.log(...어레이); // hello world

 

문자에 사용하면 문자를 하나씩 펼쳐줍니다.

var 문자 = 'hello';
console.log(문자); // hello
console.log(문자[1]); // e - 문자도 인덱싱이 가능

console.log(...문자); // h e l l o

 

Array와 object 합치기

 

Spread Operator을 사용하면 기존 배열을 포함한 새로운 배열을 쉽게 만들 수 있습니다.

const numbers = [1, 2, 3, 4];
const newNumbers = [...numbers, 5, 6];
// [1, 2, 3, 4, 5, 6]

const person = { name: 'John', age: 30 };
const newPerson = { ...person, age: 31, gender: 'Male' };
// { name: 'John', age: 31, gender: 'Male' }

 

Array와 object 복사

 

배열을 복사하고 싶을 때 Spread Operator의 장점이 있습니다.

var a = [1, 2, 3];
var b = a;

a[3] = 4;

console.log(a);  // [1, 2, 3, 4]
console.log(b);  // [1, 2, 3, 4]

위와 같이 배열을 만들었을 때, 자바스크립트에서는 a 와 b의 지속하여 값 공유가 발생하는 것을 볼 수 있습니다.

 

하지만, Spread Operator을 사용하면 초기값만 복사하면서 독립적인 변수를 만들 수 있습니다.

var a = [1, 2, 3];
var b = [...a];

a[3] = 4;

console.log(a);  // [1, 2, 3, 4]
console.log(b);  // [1, 2, 3]

 

object의 key 값 중복

 

Spread Operator로 새로운 오브젝트를 만들었을 때, object의 key 값이 중복된다면 어떻게 될까요?

object의 key 값이 중복될 떄는 뒤에 오는 key 값이 우선됩니다.

var o1 = { a : 1, b : 2};
var o2 = { a : 3, ...o1 };

console.log(o2); // {a: 1, b: 2}

 

파라미터에 자료 넣기

 

함수를 만들었을 때,  함수 안에 들어가는 파라미터 자리에는 Spread Operator를 사용하여 array의 자료를 넣을 수 있습니다. 예전에는 Spread Operator 대신에 apply 함수를 사용했었습니다.

function 더하기(a,b,c){
   console.log(a + b + c)
}
더하기(1,2,3); // 6

var 어레이 = [1, 2, 3];
더하기(...어레이); // 6
더하기.apply(undefined, 어레이);  //6