Spread Operator

Spread Operator란?

Array, Object 등, 반복가능한 객체(Iterable Object)를 개별 요소로 분리할 수 있게 해주는 연산자.
즉, 여러개의 요소를 가진 집합을 풀어헤쳐준다.
Reference Data Type의 병합, 복사에 주로 사용된다.

📌 Reference Data Type의 복사

---

Reference Data Type은 Primitive Data Type 처럼 변수에 등호로 할당하여 복사하면 의도대로 되지 않는다.(사본이 독립적인 값을 갖지 않고 원본의 값을 공유하는 현상이 나타난다. > Data Type 게시물 참조)

이때, Spread Operator를 사용하면 독립적인 사본을 만들 수 있다.

Array의 복사

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

a[3] = 4

console.log(a) // 결과 : [1, 2, 3, 4]
console.log(b) // 결과 : [1, 2, 3]

📌 Reference Data Type 간 병합

---

Spread Operator를 사용하면 Array, Object 끼리 병합 또한 가능하다.
Object 병합 시, 중복된 key가 존재할 경우 후에 온 값이 병합 결과에 남는다.

Object간 병합

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

console.log(o2)

// 결과 : { a: 1, b: 2, c: 3 }

병합하려는 대상에 중복된 key값 존재할 경우

var o3 = { ...o1, b: 3 }
console.log(o3)
// 결과 : { a: 1, b: 3, c: 3 } (뒤의 값이 살아 남음)

📌 파라미터에 Array 바로 넣고 싶을 때

function sumAll(a,b,c){
   console.log(a + b + c)
}

var arr = [10, 20, 30];
sumAll(...arr);  //요즘방식

sumAll.apply(undefined, 어레이);  //옛날방식

c.f. apply란?
한 object의 method를 다른 object가 가져다 쓰고 싶을 때 사용. this도 새 object 따라 반영됨

 var person1 = {
    sayHi: function () {
      console.log(this.name + '안녕')
    }
  }
  person1.sayHi()
  var person2 = {
    name: '손흥민'
  }
  person1.sayHi.apply(person2)

📌 사용 시 유의

---

• Spread operator는 주로 Object 중괄호, Array 대괄호, 함수 소괄호 내에서 사용 가능하다. 이외 영역에서 사용하면 에러남

• 스프레드 연산자 사용 시 위 코드에 세미콜론 찍어 구분해주어야 오류 안남

• spread operator와 rest parameter 구별
  함수를 선언할 땐 ...은 rest 파라미터
  함수를 사용할 땐 ...은 spread 연산자