Spread Operator

스프레드 오퍼레이터는 간단히 '괄호 제거' 연산자라고 생각하면 편합니다.

1번째 기능은 괄호를 제거하고 값을 나열해줍니다.

let arr = ['hello', 'world'];

console.log(arr);
//[ 'hello', 'world' ]console.log(...arr);
//hello world

2번째 기능은 배열을 합쳐줍니다.

let a = [1,2,3];
let b = [4,5];

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

스프레드 연산자의 핵심은 단순 보기 좋게 만드려는게 아니라, '깊은 복사'가 가능하다는 점입니다.

아래 코드를 볼게요

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

a[3] = 4;
//이렇게 a의 3번째 인덱스에 값을 넣어주면 a는 1,2,3,4가 되겠죠?//그럼 b의 값은 어떨까요?console.log(a);//[ 1, 2, 3, 4 ]console.log(b);//[ 1, 2, 3 ]//독립적으로 값을 가지고 있는겁니다. 만약 b = a를 했다면 b값도 변해버립니다.//Array, Object는 레퍼런스 데이터 타입이기 때문에 값을 공유해버리니까요

오브젝트 또한 합칠 수 있습니다.

let obj1 = {a : 1, b : 2};
let obj2 = {...obj1, c : 3};

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

3번째 용도는 함수에 파라미터를 넣을 때 자주 사용합니다.

let plus = function(a, b, c) {
    return a+b+c;
}
let arr = [100, 200, 300];
//만약 plus라는 덧셈 함수가 있고 매개변수로 배열안에 있는 값을 전달해주고 싶다?//그럼 아래처럼 arr의 인덱스에 직접 접근해서 줘야했었어요(또는 apply함수)console.log(plus(arr[0], arr[1], arr[2]));//600//이제 스프레드 오퍼