16.Spread Operator - ES6

---

spread operator 개념

• JS 에서 뭔가 펼쳐 놓고 싶을 때 사용하는 문법 … (점 3개를 연속으로 하면 spread operator 라고 함)

• 뭔가 내용물을 빼고 싶을 때 사용하면 됩니다.

1.Array에 붙이면 대괄호를 제거해줍니다

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

console.log(arr)
console.log(...arr)

2.문자에 붙이면 문자를 펼쳐 줍니다

let str = 'hello'
console.log(...str)

spread operator 활용

1.Array 를 합치거나 복사할때 사용

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

let c = [...a, ...b] // 2개를 합치거나 복사할때 유용

console.log(c)

• 📌 보기 편해서가 아니라 깊은복사 (Deep copy) 할 때 자주 쓰임

• 🔷 예시: a에 잇는 값을 b에 복사하고 싶을때 a를 할당함

let a = [1, 2, 3];
let b = a // 그냥 복사를 하면 그 값을 공유함
let c = [...a] // a를 풀었다가 다시 c라는 변수를 만드는거기 때문에 Deep copy 깊은 복사가 되는것임

a[3] = 4;

console.log(a)
console.log(b)
console.log(c)

2.object 를 합치거나 복사할때 사용

• 📌 Object 를 합칠때도 많이 쓰임니다 (Deep copy)

let obj1 = {
  a: 1,
  b: 2
}

let obj2 = {
  ...obj1,
  c: 3
}

console.log(obj2)

• 즉, spread operator 는 대괄호[], 중괄호{}를 둘다 벗겨 낸다고 생각하면 쉽게 이해 할 수 있습니다.

• 🔶 주의 !! object 에서 copy 하다가 만약 key 값이 중복이 되면, JS 가 자동으로 가장 뒤에 있는 value 값을 적용해서 사용합니다.

let obj1 = {
  a : 1,
  b : 2
}

let obj2 = {
  a : 3,
  ...obj1
}

console.log(obj2)

🔶 spread oprator 는 중괄호, 대괄호, 소괄호(함수 안에) 서만 사용이 가능합니다. 즉, 괄호 밖에서는 사용 할 수 없습니다.

3.함수 parameter 안에 넣을 때

• array 내의 모든 데이터를 parameter로 집어 넣고 싶은 경우의 코드입니다.

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

const arr = [10, 20, 30]

sum(...arr)
sum.apply(undefined, arr) // undefined 는 그냥 실행 해 달라는 거임 apply 를 사용되는 

apply(), call()

• apply()는 그냥 함수를 옮겨와서 실행해주세요 라는 의미입니다. call() 도 apply 와 거의 비슷한데 뒤에 parameter 값을 추가 할때 apply() 는 arr 형태로 써야 하고 call() 은 그냥 쓰면 됩니다.

// person1 의 함수를 person2 에도 적용하고 싶을때 apply() 함수를 사용
const person1 = {
  greeting: function () {
    console.log('Hi' + " "+this.name)
  }
}


const person2 = {
  name: 'Kim'
}

person1.greeting.apply(person2, [1, 2]) // 
person1.greeting.call(person2, 1, 2) // 

🔶 🔷 📌 🔑

Reference

• poiemaweb - https://poiemaweb.com/es6-extended-parameter-handling