티스토리 뷰

반응형
Spread Operator

 

 

괄호를 제거해주는 연산자로 

' ... ' 점 3개만 붙이면 spread operator 문법이다

 

 

 

<array>

var arr = ["hello", "world"];
console.log(...arr); // hello world

대괄호가 제거되고 hello world 만 출력된다.

 

 

 

 

<문자>

var word = "가나다라";
console.log(...word); // 가 나 다 라

문자가 한글자씩 출력된다.

 

 

 

 

spread operator 문법은 array, object 합칠 때, 복사할 때 매우 자주 사용된다.

 

 

 

 

array 합치기

 

 

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

두 배열을 합치고 싶을 때 spread operator를 사용하면 쉽게 합칠 수 있다.

 

 

 

 

원래 있던 배열을 복사하고 싶을 때

var aa = [1,2,3];
var bb = aa

 

위의 코드처럼 배열을 그대로 변수에 넣으면 안된다.

aa, bb가 값을 따로 가지는게 아니라 배열이 공유되어

aa를 수정하면 bb도 똑같이 수정되는 버그가 일어나서 직접 수정하지 않아도 값을 공유해버림

 

 

 

var aa = [1,2,3];
var bb = [...aa]

spread operator를 사용해서 복사해줘야 공유되지 않고

aa, bb 각각 독립적인 값을 가질 수 있다.

 

 

 

 

object 합치기

 

 

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

object도 spread operator 사용해서 합치기 가능하다.

 

 

 

 

만약 합치다가 값 중복이 일어나면?

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

가장 뒤에 있는 값이 적용된다.

위의 코드에선 a 속성이 중복되는데 a:3이 가장 뒤에 있으므로 a의 값은 3

 

 

 

반응형
댓글
반응형
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/02   »
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28
글 보관함