자바스크립트 Javascript : Destructuring 문법

Destructuring 문법

Destructuring 구조 분해 할당은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 표현식입니다. 이를 통해 데이터를 쉽게 추출하고 변수에 할당할 수 있습니다.

 

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

[2,3,4] 라는 array가 있고 여기안에 있는 3개의 데이터들을 전부 밖으로 꺼내서 변수에 담고 싶으면 어떻게 합니까.

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

저희는 보통 이런식으로 하곤 합니다.

근데 Destructuring  문법을 통해 더 쉽게할 수 있는 방법이 있습니다. 

 

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

[2,3,4]라는 자료랑 비슷한 모양으로 변수를 선언해주시면 됩니다. 

변수 이름은 아무렇게나 해주시면 되고요.  그럼 a,b,c 변수가 세개 생성되는데 각각 2,3,4라는 자료를 가집니다. 

array에서 데이터 끄집어내서 변수 생성 끝입니다. 

 

디폴트 값도 줄 수 있습니다. 

당연히 왼쪽 오른쪽 갯수가 다르면 변수가 제대로 만들어지지 않습니다.

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

위처럼 쓰시면 c라는 변수는 값이 할당이 안되어서 undefined가 할당되어있습니다. 

 

이걸 방지하고 싶으면

값이 아무것도 안들어오는 변수들은 기본값을 가질 수 있게 만들 수 있습니다. 

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

그럼 c는 아무 값도 안들어오는 경우 5라는 기본값을 할당해줍니다. 

 

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

object도 좌우를 똑같이 맞춰주시면 변수가 생성됩니다. 

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

이렇게 하시면 됩니다. 

그럼 a, b라는 변수가 생성되고 Kim과 30이라는 자료를 각각 할당해줍니다. 

 

혹은, 변수 이름을 오브젝트 안의 key 이름과 똑같이 맞춰줄 때는 이렇게만 쓰셔도 됩니다. 

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

name : name을 name 이렇게 하나로 생략이 가능합니다. 

이렇게 하시면 name, age라는 변수가 생성되고 각각 Kim, 30이라는 값을 할당해줍니다. 

array랑 똑같이 등호로 디폴트값도 적용가능합니다. 

 

이번엔 변수를 object로 집어넣고 싶은 경우

var name = 'Kim';
var age = 30;

var obj = { name : name, age : age }

보통 변수를 object 자료형에 집어넣고 싶은 경우 이런 식으로 쓰면 되겠죠?

 

하지만 destructuring 문법을 이용하시면 이런 것도 가능합니다. 

var name = 'Kim';
var age = 30;

var obj = { name, age }

name : name 이렇게 key값과 value값이 동일하면 name 이렇게 하나로 생략이 가능합니다. 

 

함수 파라미터 변수 만들 때도 똑같이 적용가능합니다. 

함수가 하나 있는데 이 함수는 두개의 파라미터를 입력할 수 있습니다. 

여기에 object 내의 Kim, 그리고 age 자료들을 입력하고 싶으면 어떻게 할까요?

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

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

파라미터는 실은 변수만드는 거랑 똑같은 행위기 때문에  변수만드는 문법을 그대로 적용할 수 있습니다.

 

파라미터를 입력할 때

{name, age} = { name : 'Kim', age : 20 } 이거 한거랑 똑같습니다.  

 

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

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

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

파라미터인 [name, age] 를 만들 때 ['Kim', 30] 이걸 그대로 대입해서 만드는 것이죠.

그럼 각각 name과 age에는 Kim과 30이라는 데이터가 들어갑니다.