티스토리 뷰
반응형
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
반응형
'Coding > typescript' 카테고리의 다른 글
[typescript] React와 사용할 때 (0) | 2023.09.25 |
---|---|
[typeScript] 함수 rest 파라미터, destructuring (1) | 2023.08.08 |
[typescript] object에 타입 interface 키워드 (0) | 2023.08.04 |
[typescript] class에 타입지정 (0) | 2023.07.23 |
[typescript] HTML 변경, 조작할 때 narrowing (0) | 2023.07.19 |