Spread Operator 활용법

1. 배열을 벗기고 문자열만 추출하고 싶을 때 join 메서드를 주로 사용했지만 Spread Operator 을 사용하면 메서드를 이용할 필요 없이 간단하게 벗길 수 있다.

 

let a = [1,2,3];
let b = [4,5];
// let c = [1,2,3,4,5]; 가 되도록 하려면?

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

 

2. Spread Operator은 배열을 복사할 때 유용하게 사용된다.

 

a라는 배열을 복사해서 b를 만들고 싶을 때 이렇게 하면 큰일난다.

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


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

 

등호로 복사를 하면 a와 b 변수는 [1,2,3]을 각각 따로 하나씩 가진게 아니라 값 공유가 일어남.

그래서 a라는 배열을 수정하면 b도 똑같이 바뀐다. 

 

(등호쓰면 값을 복사한게 아니라 [1,2,3] 값이 저기있어요~ 라고 가리키는 화살표를 복사한 것.

(보통 이를 같은 값을 바라본다고 하지만 '바라본다'라는 용어는 들을 때마다 넘 난해함 ㅠ)

 

 

Spread Operator를 쓰면 값을 공유하지 않고 각각 독립적인 값을 저장하도록 array를 복사한다.

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

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

//[1,2,3]
//[1,2,3] (이는 위를 '복사'한 값이다)

let o1 = { a : 1, b : 2 };
let o2 = { c : 3, ...o1 };
console.log(o2);

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

이렇게 하면 값 공유가 일어나지 않는다. (a를 수정해도 b에 영향을 주지 않음)

 

let o1 = { a : 1, b : 2};
let o2 = { a : 3, ...o1 };
console.log(o2);

// {a: 1, b: 2}

key 값이 중복될 경우, 마지막에 오는 key 값이 덮어씌워진다.

 

 

고급 응용.

이미 배열로 예쁘게 만들어져 있는 값을 함수 내 파라미터로 사용하고 싶을 때.

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

var arrItem = [10, 20, 30];


 // plus(10, 20, 30);  ??
 // plus(arrItem[0], arrItem[1], arrItem[2]); ????
 
 // plus(...arrItem); ok