[ES6]구조분해할당

구조분해할당

어레이 복사

var arr = [2,3,4];

var [a,b,c]= arr //[2,3,4]

console.log(a,b,c) //2 3 4

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

console.log(a,b,c) //2 ,3 ,undefined
//undefined 안뜨게 하고싶으면
//default 값 지정하면 됨
var [a,b,c = 10] = [2, 3]

알아보기 : default parameter

obj를 꺼내서 변수에 담기

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

var name = obj.name;
// 이렇게 안하고 아래처럼 구조를 똑같이 만들어 주고

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

console.log(name) // Kim

주의! : 변수명을 객체의 키값과 똑같이 만들어줘야 함.

어레이에 인자가 없는 경우와 마찬가지로 기본값 할당도 가능

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

console.log(name)//'Kim'
console.log(age) //40

변수이름 변경해서 할당도 가능함.

var {name : 나이, age = 40} = { name : 'Kim'};

console.log(나이) //'kim'

기본값 지정도 가능

var {name : 나이='Park'} = { };

console.log(나이) //'Park'

여러 변수를 객체 값으로 넣고 싶다?

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

// var obj = { name : name, age : age};
//키와 값이 같을 경우 줄여쓰면 아래와 같음()
var obj = {name, age};

console.log(obj) //{ name:'Kim', age:30 }

함수의 파라미터에 각각 넣기.

객체의 경우

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

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

함수(obj)

어레이의 경우

var obj = [1, 2]

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

함수(obj)

연습해보기

Q) a, address, number의 값은 뭘까?

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

a라는 변수에 'seoul' 값이 할당됨
number = 20은 인자가 없을 때 디폴트 값이므로
여기서는 인자가 있으니까 30이 할당된다.
address는 'seoul'

Q) 키, 무게, 상의, 하의 4가지 변수에 신체정보 값 담기

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

답

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

console.log(height, weight, 상의, 하의)
//190 70 상의 Large 바지 30인치