spread operator
... 이렇게 쓰는데, 안에있는거 펼쳐서 늘어놓아 주는 친구다.
spread syntax. 즉 전개문법 이라고도 함.
배열, 혹은 이터러블 객체(for...of 반복문 적용이 가능한)에 사용 가능하다.
for..of 와 같은 방식으로 내부에서 iterator(반복자)를 사용해 요소를 수집한다.
문자열에 spread operator 사용하는 경우
array 처럼 인덱싱을 해서 요소 하나하나를 가져올 수 있다.
배열에 spread operator 사용하는 경우.
대괄호를 제거하고 요소들을 다 나열해준다.
배열을 합치거나 깊은 복사를 할 수 있다.
배열 합치기
let a = [1,2,3];
let b = [4,5];
let c = [...a, ...b] // (5) [1, 2, 3, 4, 5]
배열 복사하기
let a = [1,2,3];
let b = [4,5];
let c = a;
a[3] = 7;
console.log(a); // (4) [1, 2, 3, 7]
console.log(c); // (4) [1, 2, 3, 7]
여기서 복사한 배열 c는 요소를 추가하지 않았는데도, a와 똑같이 추가가 되어버렷다.
지금 이 상황은 얕은 복사이기 때문에 이런 현상이 발생한것. 이래서 깊은 복사가 필요하다.
reference data type(array, object 같은 자료형을 이렇게 부름.) 이런 자료형들은 방금 한것처럼 복사를 하면 그 값을 서로 공유하게 된다.
각각 독립적인 값을 갖도록 array나 object를 복사하려면, spread operator를 사용하면 된다.
object 에 spread operator 사용하는 경우
합치기
var o1 = {a: 1, b: 2};
var o2 = {...o1, c: 3}; // 2개의 object를 합치기
console.log(o2) //{a: 1, b: 2, c: 3}
깊은복사하기
var o3 = {...o1}; //object 깊은 복사 하기. spread operator 활용해서.
o1.d = 5;
console.log(o1); //{a: 1, b: 2, d: 5}
console.log(o3); //{a: 1, b: 2}
복사시 값 중복
만약 복사하다가 값 중복이 생길 경우___ 동일한 값중 가장 뒤에 있는걸 적용한다.
var o7 = {a: 2, ...o1};
console.log(o7); //{a: 1, b: 2, d: 5}
var o6 ={...o1, a: 2};
console.log(o6); //{a: 2, b: 2, d: 5}
spread operator 는
오브젝트 중괄호 안, array 대괄호 안, 함수 소괄호 안 에서만 사용할 수 있다. 밖에다 하면 에러남.
해체한 요소들 다시 붙여주기.
...를 또 쓰면 된다. ...[...spread]
함수의 파라미터로 array에 있는 요소들 넣어주기 (spread operator 이용)
함수이름(...파라미터로 넣을 배열 이름)
function plus(a,b,c){
console.log(a+b+c);
};
let aarray = [22, 44, 66];
plus(...aarray);
'JS (Java Script)' 카테고리의 다른 글
apply() 와 call() / apply() 이용해서 함수의 파라미터에 배열 넣기. (0) | 2023.09.06 |
---|---|
이러터블 객체와 유사배열 (iterable) (array-like) (0) | 2023.09.06 |
템플릿리터럴 / tagged literal / backtick(backquote) (0) | 2023.09.05 |
전역변수 (0) | 2023.09.05 |
변수와 함수의 Hoisting 현상 (0) | 2023.09.05 |