[Node] Node.js 스프레드 연산자(Spread Operator)

1. 스프레드 연산자(Spread Operator)

• ES6에서는 "..." 와 같이 다소 특이한 형태의 문법이 추가됨
• 점 3개가 연달아 붙어있는 이 표시를 스프레드 연산자 혹은 전개 구문이라 함
• 배열, 함수, 객체 등에서 주로 사용되며, 편리한 기능을 제공한다.
• 배열, 함수, 객체 등의 연결, 복사 등의 용도로 꽤 활용도가 높은 편이다.
• 스프레드 연산자를 사용하는 것에 대표적으로 배열 병합, 배열 복사, 구조 분해 이 세가지가 있다.
  - 배열 병합(Array Concatenation)
  - 배열 복사(Copying Arrays)
  - 구조 분해(Destructing)

2. 기본 문법

// Array
var arr1 = [1, 2, 3, 4, 5];
var arr2 = [...arr1, 6, 7, 8]
console.log(arr2); // [1, 2, 3, 4, 5, 6, 7, 8]

// String
var str1 = "paper block";
var str2 = [...str1];
console.log(str2); // ["p", "a", "p", "e", "r" .....]

3. 배열 병합(Array Concatenation)

- 기존에 배열 끼리의 병합 방식으로는 배열.concat(배열) 방식을 이용했다.

- ES6가 되면서 ... 스프레드 방식을 사용하여 [... 배열, ...배열] 방식으로 병합 가능하다.

 

- 그리고 push를 이용해서 배열에 하나하나씩 넣을 수 있는 방식도 있다.

- 이 또한 push(...배열, ...배열)을 이용해 병합 가능하다.

// 배열 병합
    exam01: () => {
        // ES5 배열 병합 기존 방식
        var arr1 = [1, 2, 3];
        var arr2 = [4, 5, 6];

        var arr3 = arr1.concat(arr2);
        
        console.log("==================> arr3");
        console.log(arr3);

        // ES6 spread operator
        var arr4 = [...arr1, ...arr2];
        console.log("==================> arr4")
        console.log(arr4);

        // push를 이용한 기존 방식
        var arr5 = []
        arr5.push(arr1[0])
        arr5.push(arr1[1])
        arr5.push(arr1[2])
        arr5.push(arr2[0], arr2[1], arr2[2])
        console.log("====================> arr5")
        console.log(arr5)

        var arr6 = []
        arr6.push(...arr1, ...arr2);
        console.log("====================> arr6")
        console.log(arr6)

        // [0, 1, 2, 3, 7, 8]
        var arr7 = []
        arr7 = [0].concat(arr1)
        arr7.push(7, 8)
        console.log()
        console.log("====================> arr7")
        console.log(arr7);

        var arr8 = [0, ...arr1, 7, 8]
        console.log("====================> arr8")
        console.log(arr8);
    },

==================> arr3
[ 1, 2, 3, 4, 5, 6 ]
==================> arr4
[ 1, 2, 3, 4, 5, 6 ]
====================> arr5
[ 1, 2, 3, 4, 5, 6 ]
====================> arr6
[ 1, 2, 3, 4, 5, 6 ]

====================> arr7
[ 0, 1, 2, 3, 7, 8 ]
====================> arr8
[ 0, 1, 2, 3, 7, 8 ]

4. 배열 복사(Copying Arrays)

- 배열을 복사할 때 배열을 새로운 변수에 그냥 삽입한다면 복사가 아니라 가리키게 되는 것이다.

- 그래서 새로운 변수에 새로운 것을 추가하게 되면 원래 있던 배열에도 똑같이 복사가 되어버린다.

- 그렇기 때문에 다양한 복사 방법이 존재한다.

 

- 첫번째로 slice(), 두번째로 map, 세번째로 ... 스프레드 연산자가 있다.

- 밑에 예시처럼 사용하게 되면 기존의 배열에는 아무런 변화 없이 복사를 할 수 있다.

// 배열 복사
    exam02: () => {
        // 자바스크립트 배열 복사 => 원본 배열이 주소로 복사되어 arr2를 변경해도
        // arr1도 변경된다.
        
        // 이 부분은 arr2가 arr1을 가리키게 되는 것이다.(복사가 아니라)
        var arr1 = ["철수", "영희"];
        var arr2 = arr1;

        arr2.push("바둑이")
        console.log("==================> arr2에만 '바둑이'를 추가했는데")
        console.log(arr2)
        console.log("==================> arr1도 변경이 되었다.")
        console.log(arr1)

        // Javascript array 값 복사
        var arr3 = ["철수", "영희"];
        var arr4 = arr3.slice();

        arr4.push("바둑이")
        console.log("==================> arr4에만 '바둑이'를 추가했는데...")
        console.log(arr4)
        console.log("==================> arr3는 그대로 유지된다.")
        console.log(arr3)

        // Array 오브젝트의 map을 이용한 값 복사
        var arr5 = ["철수", "영희"];
        var arr6 = arr5.map(item => {return item + "님"})
        
        arr5.push("바둑이")
        console.log("==================> arr5에만 '바둑이'를 추가했는데...")
        console.log(arr5)
        console.log("==================> arr6는 그대로 유지된다.")
        console.log(arr6)

        // ES6 문법인 spread operator 이용한 값 복사
        var arr7 = ["이순신", "김유신"]
        var arr8 = [...arr7]

        arr7.push("바둑이")
        console.log("==================> arr7에만 '바둑이'를 추가했는데...")
        console.log(arr7)
        console.log("==================> arr8는 그대로 유지된다.")
        console.log(arr8)
    },

==================> arr2에만 '바둑이'를 추가했는데
[ '철수', '영희', '바둑이' ]
==================> arr1도 변경이 되었다.
[ '철수', '영희', '바둑이' ]
==================> arr4에만 '바둑이'를 추가했는데...
[ '철수', '영희', '바둑이' ]
==================> arr3는 그대로 유지된다.
[ '철수', '영희' ]
==================> arr5에만 '바둑이'를 추가했는데...
[ '철수', '영희', '바둑이' ]
==================> arr6는 그대로 유지된다.
[ '철수님', '영희님' ]
==================> arr7에만 '바둑이'를 추가했는데...
[ '이순신', '김유신', '바둑이' ]
==================> arr8는 그대로 유지된다.
[ '이순신', '김유신' ]

5. 구조 분해(Destructing)

- 기존의 변수를 할당할 때 하나하나 꺼내서 해줘야 됬지만 기존의 배열을 여러 가지 변수를 한번에 할당할 수 있다.

// 구조 분해(Destructing)
    exam03: () => {
        // 기존의 변수 할당 방식
        var score1 = {eng: 100, kor: 90, math: 70}
        // var eng = score1.eng;
        // var kor = score1.kor;
        // var math = score1.math;
        // console.log(eng, kor, math)

        // 구조 분해 할당 방식
        var {eng, kor, math} = score1;
        console.log(eng, kor, math);

        // 구조 분해를 이용한 복사
        var score2 = {...score1}
        console.log(score2)

        score2.eng = 10;
        console.log(score1)
        console.log(score2)

        var score3 = {...score1, total: 80}
        console.log(score1)
        console.log(score3)
    }

100 90 70
{ eng: 100, kor: 90, math: 70 }
{ eng: 100, kor: 90, math: 70 }
{ eng: 10, kor: 90, math: 70 }
{ eng: 100, kor: 90, math: 70 }
{ eng: 100, kor: 90, math: 70, total: 80 }