[JavaScript] ... Spread Operator = 괄호 벗겨주세요

Spread Operator

- array나 문자열 앞에 ...을 붙여주면, array나 문자열, object의 괄호를 제거한 결과값을 얻을 수 있다

주의 ) ...은 항상 괄호 안에서만 써야함.

 

 

#1. 사용예시

1. array에 사용

>> 대괄호를 제거해줌

var arr = ['hello','world'];
console.log(arr);   // 출력결과 >> (2) ['hello', 'world']
console.log(...arr); // 출력결과 >> hello world
// console.log(...arr) == console.log('hello','world')

 

2. 문자에 사용

>> 문자들을 하나씩 다 펼쳐줌. 

var str = 'hello';
console.log(str) // 출력결과 >> hello
console.log(...str); // 출력결과 >> h e l l o
// console.log(...str) == console.log('h','e','l','l','o');

- 문자도 str[0]와 같은 방식으로 추출할수 있잖아. 이렇게 대괄호가 없어졌다고 생각해도 됨

 

 

#2. 활용법

1. array에 사용하기   >> 대괄호 다 벗겨줌

1) array복사

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

console.log(c);  // 출력결과 >> (3) [1, 2, 3]

2) array 합치기

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

console.log(c);  // 출력결과 >> (5) [1, 2, 3, 4, 5]

3) Deep copy에 유용함

* Deep copy란? 

- var a 에 정의된 array나 object를 var b에 copy하여 사용하고 싶은데, 각각의 값은 공유되지 않고, 독립적인 곳으로 사용하고 싶을때 사용하는 copy를 deep copy라함

- 아래 예시를 보면서 이해해보자.. 

 

1) array를 복사할때 문제점... >> 생각없이 대입했다가 값이 공유되어버림.. ㅜ

- array a의 값을 b에 대입하고 싶다고 가정, 우리는 이런식으로 코드를 짤것이다. 

var a = [1, 2, 3];
var b = a;  // >> var b는 a의 값을 공유해서 사용하고 싶단 말이 되어버림 ㅜ 

console.log(a);  // 출력결과 >> (3) [1, 2, 3]
console.log(b);  // 출력결과 >> (3) [1, 2, 3]

a[3] = 4;

console.log(a);  // 출력결과 >> (4) [1, 2, 3, 4]
console.log(b);  // 출력결과 >> (4) [1, 2, 3, 4]  >>> a에만 입력했는데 왜 b에 4가 추가 됨?

- 하지만 위의 예제에서, a에만 값을 입력했는데 b까지 4라는 값이 들어가 있다. 

-  var b = a;  다음과 같이 그냥 등호로 값을 복사하면, 단순 복사 되는게 아니라, 값을 공유해버린다. (reference data type(array, object)에 해당)

 

2) 그래서 각각 독립적인 값을 가지도록 array와 object를 복사하려면, ...Spread operatior 이용하기!!

var a = [1, 2, 3];
var b = [...a]; // 각각 독립적인 값을 가지도록 spread opearator를 사용하여 복사

console.log(a);  // 출력결과 >> (3) [1, 2, 3]
console.log(b);  // 출력결과 >> (3) [1, 2, 3]

a[3] = 4;

console.log(a);  // 출력결과 >> (4) [1, 2, 3, 4]
console.log(b);  // 출력결과 >> (3) [1, 2, 3]  >> b에는 추가된 값이 없으므로 그대로 출력된다!

 

=> array나 object는 reference data type이므로, 함부러 (var a = b.. 이런식으로..) copy해 버리면 값이 공유되어 버린다.  그러므로, ... Spread Operator를 사용하여 deep copy 해주고, 각각 독립된 값을 갖도록 해주자! 

 

 

2. Object 에 사용하기 >> 중괄호 다 벗겨줌

1) object 복사 / 합치기

var o1 = {a: 1, b: 2};
var o2 = {...o1, c: 3};
console.log(o2); // 출력결과 >> {a: 1, b: 2, c: 3}

- 중괄호도 잘 벗겨줌.

2) object Deep copy

var o1 = {a: 1, b: 2};
var o2 = {...o1};   // var o2 = o1 이렇게 하면 값이 공유된댔지? spread operator 꼭 써줘!! 

console.log(o1); // 출력결과 >> {a: 1, b: 2}
console.log(o2); // 출력결과 >> {a: 1, b: 2}

o1.c = 3;

console.log(o1); // 출력결과 >> {a: 1, b: 2, c: 3}
console.log(o2); // 출력결과 >> {a: 1, b: 2}

 

!! copy하다가 값 중복이 일어나면?  >> 가장 뒤에 있는걸 적용

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

console.log(o2) // 출력결과 >> {a: 1, b: 2}

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

console.log(o2) // 출력결과 >> {a: 2, b: 2}

 

 

3. 함수 파라미터로 array넣을때 사용

- array자료를 파라미터로 넣고 싶을때, spread operator를 사용하면 간단하게 넣을수 있다. 

var arr = [10, 20, 30]

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

plus(...arr);
// plus.apply(undefined, arr);  // spread operate 생기기 전에는 이런식으로 사용했음.

 

* apply / call

- 다른 object에 있는 함수를 적용하고 싶을때 사용하는게 apply / call

- apply / call 비슷한데 apply는 파라미터를 array형태로 집어넣기 가능, call 은 풀어서 

- 위의 예제에서 plus.apply(undefined, arr) 의 형태로 apply를 사용한 이유는 단지, 파라미터로 array를 넣을수 있으니까 그렇게 썼던거임.

var person = {
	name : '김연아',
	gretting : function(){
    	console.log(this.name + '안녕');
    }
}

var person2 = {
	name: '손예진'
}

person.gretting() // 출력결과 >> 김연아안녕

// person2에도 person1에 있는 gretting 함수를 적용하고 싶을때 사용하는게 apply / call
// apply / call 비슷한데 apply는 파라미터를 array형태로 집어넣기 가능, call 은 풀어서 넣어야함
// person.gretting.apply(person2, [1, 2]);
// person.gretting.call(person2, 1,2);

person.gretting.apply(person2);  // 출력결과 >> 손예진안녕
person.gretting.call(person2);   // 출력결과 >> 손예진안녕