[Javascript] Spread 연산자 너 누군데

 

컴포넌트 만들 때, props 로 자주 등장하는 "..." 에 대해 더 깊이 알아가보려 합니다

 

 

 

 

ES6에서는  '...'  다소 특이한 형태의 문법이 추가되었습니다.

이 표시는 Spread Operator(스프레드 오퍼레이터, 스프레드 연산자, 전개 구문, 펼침 연산자...)를 나타내는 것으로,

배열, 함수, 객체 등을 다루는 데 있어서 매우 편리하고 재미있는 새로운 기능을 제공합니다.

 

 

Spread Operator 기본 문법

 

스프레드 연산자를 사용하면 배열, 문자열, 객체 등 반복 가능한 객체 (Iterable Object)를 개별 요소로 분리할 수 있습니다.

 

 

 

배열에서의 spread 연산자

 

1️⃣ 배열 병합

기존에는 두 배열을 하나의 배열로 병합하려고 한다면, concat 메서드를 사용하여 병합했습니다.

ex) 

const Ilike = ['apple', 'banana'];
const Ilove = ['grape', 'peach'];

const All = Ilike.concat(Ilove);

console.log(All); 

// ['apple', 'banana', 'grape', 'peach']

 

 

ES6에서는 spread 연산자를 활용해 보다 간편하고 깔끔하게 병합이 가능합니다.

const Ilike = ['apple', 'banana'];
const Ilove = ['grape', 'peach'];

const All = [...Ilike, ...Ilove];

console.log(All); 

// ['apple', 'banana', 'grape', 'peach']

 

 

2️⃣ 배열 복사

JavaScript에서 배열을 새로운 변수에 할당하는 경우 새로운 배열은 기존 배열을 참조합니다.

따라서 새로운 배열을 변경하는 경우 원본 배열 역시 변경됩니다.

 

let arr1 = ['민정','웹파트']; 
let arr2 = arr1; 

arr2.push('YB'); 

console.log(arr2); // [ "민정", "웹파트", "YB" ]


// 원본 배열도 변경된다.
console.log(arr1); // [ "민정", "웹파트", "YB" ]

 

 

 

ES6의 Spread 연산자를 사용하면, 다음과 같이 새로운 복사된 배열을 생성할 수 있습니다.

let arr1 = ['민정','웹파트']; 
let arr2 = [...arr1]; 

arr2.push('YB'); 

console.log(arr2); // [ "민정", "웹파트", "YB" ]

// 원본 배열은 변경되지 않는다.
console.log(arr1); // [ "민정", "웹파트"]

 

 

 

 

우린 객체에서 가장 많이 활용할 것이기 때문에.. 대망의

객체에서의 spread 연산자

 

객체에서도 Spread operator 를 이용하여 복사, 업데이트가 가능합니다.

첫번째 예제는 프로퍼티를 추가한 것이고, 두번째 예시는 프로퍼티 오버라이드를 함으로써 객체가 업데이트되는 것을 이용하였습니다.

let currentState = { name: '민정', part: 'web'};

currentState = { ...currentState, age: 20}; 
console.log(currentState)      

// 값 추가
// 출력 -> {name: "민정", part: "web", age: 20}

currentState = { ...currentState, name: '민정', age: 23}; 
console.log(currentState); 

// 객체 프로퍼티 오버라이드
// 출력 -> {name: "민정", part: "web", age: 23}

 

 

 

 

더 깊은 값을 변경하고 싶다면, 다음과 같은 방법으로 "..." 연산자를 사용합니다.

앞으로 api 로 받은 데이터 객체를 다룰 일이 많기 때문에, 이런 연산자를 잘 익혀두었다가 사용하면 좋을 것 같습니다!

const object = {
    a : {
        b: {
            target : 123,
            c : "cc"
        },
        d : "dd"
    },
    e : "ee"
}

// a,b,c,d,e 는 그대로 두고 target만 변경

const newObject = {
     ...object,
     a : {
         ...object.a,
         b : {
             ...object.a.b,
             target : 456
         }
     }
};