update 2021.2.26 비할당 구조 예시

( 비구조화 할당 / 구조분해 할당 )

비구조화 할당

배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 자바스크립트 표현식입니다.

기분 문법 (배열)

[a1 , a2 , ...rest_a] = [1,2,3,4,5,6,7,8]
console.log(a1); // 1
console.log(a2); //2
console.log(rest_a); // [3,4,5,6,7,8]

지정하지 않은 나머지 값들은 배열에 담기게 된다.

[a1 , a2 , ...rest_a , a3] = [1,2,3,4,5,6,7,8,9]
// error
[a1,a2, ...rest_a] = {a1:10 , a2:20}; 
// error

기본 문법(객체)

var {a1 , a2 , ...rest_a } = {a1 : 10 , a2 :20 , a3 :30 , a4 : 40};
console.log(a1); // 10
console.log(a2); // 20
console.log(rest_a); // {a3:30 , a4:40}

var , let , const 적용 가능합니다.

복사 (copy)

var arr = [1,2,3]
var copy1 = arr;
var [...copy2] = arr;
var copy3 = [...arr];

arr[0] = "String";
console.log(arr); // ["String" , 2 ,3 ]
console.log(copy1); // ["String" , 2 ,3]
console.log(copy2); // [1,2,3]
console.log(copy3); // [1,2,3]

자바스크립트도 파이썬과 마찬가지로 얕은복사와 깊은복사가있다.

얕은복사 : copy1
깊은복사 : copy2 , copy3

var prevState = {
  name : "jakdu",
  age : 3
};

var state = {
  ...prevState , 
  age : 4
};

console.log(state);
// { name:"jakdu" , age:4}

...prevState 를 사용하여 기존 객체를 복사함과 동시에 age 키에 새로운 값 (4) 를 할당했습니다.

비할당구조 예제

const { me, logOutLoading } = useSelector((state) => state.user);

대부분 넘어오게 될때 객체로 넘어오게 된다.
state.user 에는 객체가 담겨있고 그중에서 필요한 키값만 뽑아내서 비할당 구조로 담으면된다.

console.log(req.query); // {idx : '8'} 
const { idx } = req.query;