JavaScript(Destructuring)

Destructuring

Destructuring(구조 분해 할당)구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 표현식.

Array안에 있는 데이터를 변수에 담는 방법

하드코딩방식

var array = [2,3,4];
var a = array[0]; 
var b = array[1];
var c = array[2];

destructuring방식

기본할당

let 배열 = [2,3,4];
var [a,b,c] = 배열;

선언없는 할당

var [a,b,c] = [2,3,4];

디폴트값 지정 가능
(값이 할당되지 않아 undefined가 출력되는 변수를 방지하여 기본값 지정, 단 c변수에 값이 할당되어 있다면 디폴트값이 아닌 할당값이 우선순위)

var [a,b,c = 5] = [2,3];

rest문법 가능

var a, b, rest;
[a, b, ...rest] = [10, 20, 30, 40, 50];
console.log(a); // 10
console.log(b); // 20
console.log(rest); // [30, 40, 50]

Object 안에 있는 데이터를 변수에 담는 방법

하드코딩방식

var obj = { name : 'Kim', age : 30 };
var name = obj.name;
var age = obj.age;

destructuring방식
(단, 변수명을 key명과 똑같이 작성해야 한다.)

기본 할당

var obj = { name : 'Kim', age : 30 };
var {name, age} = obj;

선언 없는 할당

var {name, age} = { name : 'Kim', age : 30 };

변수명을 변경하고 싶다면?
(value값 지정하듯이 작문한 변수명을 작성)

var { name : a, age : b } = { name : 'Kim', age : 30 };

디폴트값 지정 가능

var { name : a, age : b = 20} = { name : 'Kim'};

rest문법 가능

({a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40});
console.log(a); // 10
console.log(b); // 20
console.log(rest); // {c: 30, d: 40}

변수를 object로 담고 싶은 경우

하드코딩방식

var name = 'Kim';
var age = 30;
var obj = { name : name, age : age }

destructuring방식
(key값과 value값이 동일하다면 생략가능)

var name = 'Kim';
var age = 30;
var obj = { name, age }

일부 반환값 무시하기

let 배열 = [1,2,3,4];
var [a,b, ,d] = 배열;
console.log(a,b,d) // 1,2,4

function f() {
  return [1, 2, 3];
}
var [a, , b] = f();
console.log(a); // 1
console.log(b); // 3

함수 파라미터에도 적용가능

하드코딩방식

function 함수( name, age ){
  console.log(name);
  console.log(age);
}
var array = [ 'Kim', 30 ];
함수(array[0], array[1]);

function 함수(name, age){
  console.log(name);
  console.log(age);
}
var obj = { name : 'Kim', age : 20 }
함수(obj.name, obj.age);

destructuring방식
(파라미터 역시 변수와 같은 성질)

function 함수( [name, age] ){
  console.log(name);
  console.log(age);
}
var array = [ 'Kim', 30 ];
함수( ['Kim', 30] );

function 함수( { name, age }){
  console.log(name);
  console.log(age);
}
var obj = { name : 'Kim', age : 20 };
함수(obj);

응용

다음과 같은 객체 존재.

let 신체정보 = {
  body: {
    height: 190,
    weight: 70
  },
  size: ["상의 Large", "바지 30인치"],
};

키, 몸무게, 상의사이즈, 하의사이즈 정보를 각각 뽑아서 4개의 변수만들기

let {
  body: {
    height:키, 
    weight:몸무게
  },
  size: [ 상의사이즈, 하의사이즈 ]
} = 신체정보;

참고:https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#%EC%9D%BC%EB%B6%80_%EB%B0%98%ED%99%98_%EA%B0%92_%EB%AC%B4%EC%8B%9C%ED%95%98%EA%B8%B0