[JS] 구조 분해(Destructuring), 전개 연산자(...)(spread, rest)

객체의 구조분해

객체 안의 값을 추출해 변수 혹은 상수로 선언 ; 기존 A['a'] or A.a -> a라고 사용 가능

- a대신 e라는 변수명으로 사용

- d의 기본값 'korea'부여

const A={
    a:"a'",
    a:"b'",
    C:"c'"
}
const {a:e,b,c,d='Korea'}=A

 

배열의 구조분해

A배열에서 ,,l,m을 인덱스 순서대로 아이템들을 각각 변수로 부여함 ; 기존 A[2] -> l라고 사용 가능

- , , 로 A배열의 'a','b'는 생략

const A=['a','b','c']
const[,,l,m]=A

- 구조 분해를 이용한 값 바꾸기

let a = 1;
let b = 2;
[a, b] = [b, a];

 

전개 연산자( ... ) ( spread)

...A ; A라는 배열/객체 모든 요소를 가져옴 (그냥 A일 경우 A[0]만 가져옴)

toObject ; 객체로 변환

toObject(a,b,...c) ; a,b에 각각 하나씩 할당하고 나머지는 c에 할당

({a':a,b':b,c'}) ; a는 a'매게변수에 할당, b는 b'매게변수에 할당, 나머지는 c'매게변수에 할당. c'처럼 매게변수 이름만 넣을 수 있음

const newArray=[...oldArray,1,2]
const newObject = {...oldObject, newProp:5}
const filter = (...args) =>  args.filter(el=>el===1); 
console.log(filter(1,2,3)) // [1]