자바스크립트 문법정리 7 [구조 분해 할당 (Destructuring) ]

 

Destructuring이란?

 

자리맞추기라고 생각하면됍니다.

 

예제를 통해 살펴봅시다.

 

아주 중요한 자료들을 전부 변수에 담으려면?

var arr= [2,3,4];

var [a,b,c] = [2,3,4];//변수 세개를 만드는데 2랑 3이랑 4라는데이터를 집어넣어주세요

arr destructuring 할때 몇개를 빼먹는다면?

var [a,b,c = 10] = [2,3];//등호로 기본값 지정가능

//이렇게하면 c는 10이나옴 or 아예 아무것도 할당을안하면 [] 이렇게 undifined라고뜸

obj 데이터를 꺼내 변수에 담으려면?

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

var name = obj.name;
var age = obj.age;

자리맞추기라고했는데 어떤거냐면

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

var { name, age =31 } = {name: 'kim'};//default도 지정가능

이렇게 똑같은 형식으로 넣는거라고 이해하면됍니다.

 

 

반대로 변수들을 object에 집어넣고 싶은경우

 

var name = 'kim';
var age = 30;

var obj = {name : name, age :age};
//es6부터는 이게 이렇게 바뀝니다
var obj = {name, age}//name 이라는 key값에는 name이라는 변수가들어감

함수 파라미터 변수 만들 때

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

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

함수([1,2])

 

 

함수 파라미터로 array 내의 데이터들을 집어넣고 싶으면 

 

function 함수( name, age ){
  console.log(name);
  console.log(age);
}

var array = [ 'Kim', 30 ];
함수(array[0], array[1]);

보통 이렇게 하는데

Destructuring하게되면

function 함수( [name, age] ){
  console.log(name);
  console.log(age);
}

var array = [ 'Kim', 30 ];
함수( ['Kim', 30] );

이렇게 바뀝니당.

 

예제두개를 통해 더살펴봅시다.

 

1.이런 긴코드를 짧게만들고 싶습니다

var [number, address] = [ 30, 'seoul' ];
var {address : a , number = 20 } = { address, number };

디스트럭팅!

var {address : a , number = 20 } = { address : 'seoul', number : 30 };

 Object에서 데이터를 뽑아서 변수를 만들고 싶습니다

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

 

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

let {
  body: {
    height, 
    weight
  },
  size: [ 상의, 하의 ]
} = 신체정보;

추가로보면 좋은 자료들

https://ko.javascript.info/destructuring-assignment