[JavaScript] 자바스크립트 Spread Operator (... 문법, ...의미)

 

 

 

 

 

어느날 갑자기 등장해서 날 당황스럽게 만든 ...

구글에 자바스크립트 ... 검색해도 내가 원하는 건 없고 각종 자바스크립트 문법만 검색이 되었다

 

답답해 주그는 줄 알았고요

그래서 또 열심히 곤부했지 ㅠ..

 

자바스크립트 ... 문법 (Spread Operator)에 대해 알아보자 !

spread operator = 펼침연산자 = ... (점 3개...) 쓰는 문법

var arr = ['a', 'b'];
console.log(...arr);

 

...은 [] 괄호를 제거해 주는 문법이기 때문에,

위 코드를 출력하면 괄호가 제거된 'a', 'b'만 출력된다

 

문자에 붙이면?

var text = 'abcd';
console.log(...text);

위 코드를 출력하면 괄호가 제거된 'a', 'b', 'c', 'd'가 출력된다

 

그럼 도대체 ...은 언제 쓰나,,?

 

1) Array 합치기..

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

console.log(c);

c를 출력하면 [1,2,3,4,5] 가 출력됨..

... 연산자를 이용해서 괄호를 없앤 a와 b를 합친 것..

 

2)Array 복사..

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

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

= 를 이용해서 a 값을 b에 넣음

 -> 복사 끝.

 

하지만.. 이것은 사실 값 복사가 아니고 위치값을 복사한 것 

이 상태로 a 를 수정하면 b 도 같이 수정되는 문ㅈㅔ가 생김

 

그럼 값을 복사해서 각각의 어레이를 수정하고 싶으면 어케 해야 할까? 

바로 ...을 사용하면 댐..

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

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

 

3) Object 합치기거나 복사할 때도 쓸 수 있음..

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

오브젝트 복사 끝!

긍데 만약 

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

위와 같은 경우라서 키값 a가 겹친다면?

뒤에 오는 a가 이기기 때문에 3 대신 1이 출력되는 것을 볼 수 있다.

 

3) array를 파라미터로 넣을 때도 쓸 수 있음..

예를 들면..

var arr = [10, 20, 30, 40, 50, 60, 70, 80, 90, 100];

function plus(a,b,c,d,e,f,g,h,i,j){
   console.log(a + b + c + d + e + f + g + h + i + j)
}

 

위 arr에 있는 아이들을 모두 더해야 할 때?

<기존>

plus(arr[0], arr[1], arr[2], arr[3], arr[4], arr[5], arr[6], arr[7], arr[8], arr[9], arr[10]);

<...(spread) 사용>

plus(...arr);

 

 

 

요런 식으로 쓸 수 있다.

재밌다.