ES6 Spread Operator

Spread Operator는 간단히 말해 '괄호를 제거해주는 연산자' 다.
주로 함수 소괄호, object 중괄호, array 대괄호 내에서 사용한다.

🫗 Spread Operator의 특징

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

var 어레이 = ['hello','world'];
console.log(...어레이);
// 출력: hello world

console.log('hello','world');랑 동일

2. 문자에 붙이면 문자를 하나씩 펼쳐준다

var 문자 = 'hello';
console.log(...문자);
// 출력: h e l l o

console.log('h','e','l','l','o');랑 동일

🍽️ Spread Operator 활용 방법

1. Array 합치기

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

 var c = [...a, ...b];
// c = [1, 2, 3, 4, 5]

2. Array Deep copy

Shallow copy

  var a = [1, 2, 3];
  var b = a;

  a[3] = 4;

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

✨ Array와 Object는 reference data type이기 때문에 그냥 등호로 복사하면 값을 공유하게 된다.
그래서 b에는 직접 값을 수정한 적이 없음에도 4가 추가된다.

Deep copy

각각 독립적인 값을 가지도록 복사하는 것

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

  a[3] = 4;

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

3. Object 합치기

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

// o2 = { a: 1, b: 2, c: 3 }

대괄호 뿐만 아니라 중괄호도 벗길 수 있음.

4. Object Deep Copy

Object가 각각 독립적인 값을 가지도록 복사해준다.

⚠️ 만약 복사 중 key값 중복이 발생하면 js가 가장 뒤에 오는걸 적용한다.

var o1 = { a: 1, b: 2 };
var o2 = { a: 2, ...o1 };
// o2 = { a: 1, b: 2 }

5. 함수 파라미터 넣기

function 더하기(a, b, c) {
  console.log(a + b + c);
}

var 어레이 = [10, 20, 30];
더하기(...어레이);

더하기(어레이[0], 어레이[1], 어레이[2]);를 하지 않아도 됨.

※ Spread 연산자가 없던 시절에는 아래와 같은 방법을 사용함

function 더하기(a,b,c){
   console.log(a + b + c)
}

var 어레이 = [10, 20, 30];
더하기.apply(undefined, 어레이);  // 옛날 방식

그냥 어레이를 더하기 함수에 넣어서 실행해달라는 뜻
굳이 apply를 쓴 이유 ➡️ apply를 쓰면 파라미터로 array 집어넣기가 가능하기 때문

---

💄 Apply 함수

간단히 말해 '함수를 옮겨와서 실행해주세요' 라는 뜻

var person = {
   인사: function () {
     console.log(this.name + "안녕");
   },
};

var person2 = {
  name: "Kim",
};

// person.인사를 person2에 적용하고 싶을 때
person.인사.apply(person2);

person2.인사(); // Kim안녕

📞 Call 함수

apply 함수와 비슷한데 한 가지 차이점이 있음.

✨ apply 함수는 파라미터를 array 형태로 집어넣기가 가능하지만 call 함수는 불가능

※ 여기서 파라미터는 apply/call 앞에 작성하는 함수에 집어넣을 요소들을 뜻함. 따라서 아래 코드에서 [1, 2]는 person.인사([1,2])를 뜻함.

person.인사.apply(person2, [1, 2]); ✅

person.인사.call(person2, [1, 2]); ❌
person.인사.call(person2, 1, 2); ✅