JS_기본 문법 (30)_ Spread Operator

JS의 Sperad Operator에 대해서 알아보자.

 

0. Spread Operator

Spread Operator는 점이 3개(...)인 연산자이다.

이 연산자를 이용해서 여러 곳에 활용을 할 수 있다.

 

먼저 예시를 통해서 연산자의 기능에 대해서 알아보면

 

예시

let a = [1, 2, 3];
let b = "Hello";

console.log(...a);
console.log(...b);

 

 

이처럼  array 혹은 문자열 같은 것들을 하나씩 분해해준다.

 

 

---

활용 1. Array 병합 & 복사

첫번째 활용은 array를 합치거나 복사하는 것이다.

 

1) 병합

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

let c = [...a, ...b];
console.log(c);
c = [...b, ...a];
console.log(c);

 

 

이처럼 여러 개의 array를 손쉽게 합칠 수 있다.

 

 

2) 복사(깊은복사)

배열을 깊은 복사(값만을 복사)하고 싶을 때에도 활용할 수 있다.

let d = ['a', 'b'];

let e = [...d];
console.log(e);

e[0] = 'A';
console.log(d);
console.log(e);

 

 

이처럼 깊은 복사가 된 것을 확인할 수 있다.

 

얕은 복사 예시▼

 

 

 

---

활용 2. Object 병합 & 복사

두번째 활용은 object를 합치고 복사하는 것이다.

 

1) 병합

let ob1 = {name: "Kassid"};
let ob2 = {...ob1, age: 25};

console.log(ob2);

 

 

이처럼 병합을 할 수 있다.

 

 

이때 만약 key값이 같은 경우에는 어떨까?

let ob1 = {name: "Kassid"};
let ob2 = {...ob1, name: "Blue"};
let ob3 = {name: "Blue", ...ob1};

console.log(ob2);
console.log(ob3);

 

 

Key 값이 같은 경우, 마지막으로 정의된 값으로 정해진다.

 

 

2) 복사

let ob1 = {name: "Kassid"};
let ob2 = {...ob1};

console.log(ob2);

 

 

 

---

활용3. 함수

세번째는 함수에서의 활용이다.

 

1) 함수 파라미터에 array 분해하여 전달

array의 요소들을 함수 파라미터로 전달할때 인덱스를 이용하지 않고

Spread  Operator로 분해하여 손쉽게 전달할 수 있다.

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

let arr = [1, 2, 3];

func(...arr);

 

 

2) Rest 파라미터

rest 파라미터는 매개변수 앞에 Spread Operator를 붙인 형태이다.

그리고 전달받은 값들을 array로 묶어 반환한다.

function func(...parm){
  console.log(parm);
}

func(1, 2, 3);

 

 

rest 파라미터의 주의할 점은 항상 마지막에 위치해야한다는 점이다!

 

 

 

---

☆참고 apply, call

JS의 내장 함수인 apply와 call에 대해서 알아보자.

 

 

사용법

실행할함수.apply(적용위치, 파라미터);

실행할함수.call(적용위치, 파라미터);

 

 

예시

let infoTemp = {
  sayHi: function(){console.log("Hello " + this.name)}
}

let info = {
  name: "Kassid"
}

infoTemp.sayHi.apply(info);
infoTemp.sayHi.call(info);

 

 

이렇게 현재 객체에 없는 함수를 이용할 수 있다.

(apply, call의 기능은 같다.)

 

이때 apply, call의 차이점이 있다면 파라미터를 전달할때이다.

 

apply는 array의 형태로 전달하면되고, (ex [1, 2, ...] )

call은 하나씩 전달하면 된다. (ex 1, 2, ... )

 

 

이 함수들은 spread operator가 없을 때 그 역할을 대신하였는데 아래와 같이 사용하였다.

let arr = [1, 2, 3];

func(...arr); //spread operator 사용
func.apply(undefinded, arr); //apply 사용