destructuring 문법__ 배열의 요소, 오브젝트 요소 변수에 담기.

array의 경우

원래는 배열의 요소를 담으려면 인덱스를 호출해야 했다.

배열의 몇번째 요소 꺼내서 변수에 담아줘 ~~이런식

그런데 이 destructuring 문법을 이용하면 좀더 편하게 많은 요소들을 담을 수 있다. 

 

let arr = [2,3,4];

// 원래 배열의 요소를 변수에 담으려면 인덱스를 호출해야 했다.
let t = arr[0];  

//destructuring 문법을 이용하면 이렇다. 
let [a,b,c] = arr; 
console.log(a, b, c )  //출력값은 2 3 4

//디폴트 값 지정도 가능하다.
let [d,e,f, g=222]= arr;
console.log(a,b,c,g )   //2,3,4,222

값이 없을 경우에는 undefined를 호출한다. 

 

 

 

object 의 경우

아까 앞에서 살펴본 array의 경우는 인덱스. 즉 순서가 아주 아주 중요한 요소였다. 

그런데 object의 특성상 순서는 신경쓰지 않으나 key 이름은 중요하다.

 

일단 기존에 우리가 obj 에서 자료를 꺼내 변수에 담을때에는 흔히 아래의 방법으로 시도한다. 

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

let n = obj.name; 
//혹은 obj['name'];

 

그렇지만 이번에는 destructuring 문법을 사용해 보자. 

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

let {name, age} =  { name : 'kim',  age : 30};   
console.log(name, age)  //kim  30

//디폴트 값 지정도 가능하다.
let {name, age=28} =  { name : 'kim'};
console.log(name, age)  //kim 28

여기서 중요한게 있다. 

변수명을 설정 할 때에, obj의 키 이름과 동일해야만 한다. 

그런데 만약

 

 

@ 변수명을 바꾸고 싶은 상황이라면? 

방법이 있다!!!  아래처럼 해주면 된다. 

{키 이름과 동일한 변수명 : 대체할 변수명}

let {name: 이름, age: 나이} =  { name : 'kim',  age : 30}; 
console.log(이름, 나이);   //kim 30

 

 

@ 변수를 obj의 value로 좀더 간단하게 넣기.

변수에 obj 요소를 담는건 알겠다. 

변수를 obj 요소로 넣는건 좀더 편하게 안될까?

가능하다. 그런데 조건이 있다.

key 이름과, value로 집어넣으려는 변수의 이름이 동일하다면 아래의 방법이 가능하다.

let name = 'park';
let age = 28;

let obj = {name, age};  
console.log(obj)   //{name: 'park', age: 28}

 

 

@  object에 담긴 데이터들을 함수의 파라미터로 넣고 싶을때

let object = { name : 'kim',  age : 30}; 
function 함수({name, age}){
    console.log(name);
    console.log(age);
}
함수(object);   // kim, 30

 

@  array 에 담긴 데이터들을 함수의 파라미터로 넣고 싶을때

function person ([name, age]){
	console.log(name);  //지민
	console.log(age);   //28
} 
person(['지민', 28]);

 

 

 

아래의 데이터를 destructuring 을 사용해서 변수에 담아보는 문제를 풀어봄.

모양 맞춰주는걸 잊지 말고 풀면 좀더 쉽다.

 

let myInfo = {
  body: {
    height: 157,
    weight: 40
  },
  size: ["S", "26인치"],
};
////////////////////////변수에 담겠습니다.
let {
  body :{
    height: H,
    weight: W
  },size : [T, P]
} = myInfo;
console.log(H, W, T, P)  //157 40 'S' '26인치'