ES6(구조 분해 할당)

구조 분해 할당

구조분해 할당은 배열이나 객체의 속성을 분해해서 그 값을 변수에 담을 수 있게 하는 표현식이다.
예를들어서 이전에는 객체.name이라고 표현한 것을 바로 name으로 접근 가능하게 바꿔준다는 것이다.

배열 구조 분해

배열의 구조를 분해하는 방법이다.
test = [1,2,3,4,5] 라고 설정을 했다면 3번째 변수를 사용하려고하면 test[2] 이렇게 사용해야 했던 것을
let [n1,n2,n3,n4,n5] = test로 선언해주면 console.log(n3) // 3 이라고 출력된다.
즉 이전에는

let n1 = test[0]
let n2 = test[1]
let n3 = test[2]
let n4 = test[3]
let n5 = test[4]

라고 일일히 선언했어야 했다면 이제는 let [n1,n2,n3,n4,n5] = test 이렇게 한줄로 표현이 가능해졌다.

배열의 원소 무시하고 선언하기

만약 let [n1,n2,n3,n4,n5] = test 여기에서 test의 3번째 원소만 빼고 가져오려고 한다면
let [n1,n2,,n4,n5] = test라고 선언을하면 3번째 원소를 제외하고 가져올수 있다.

배열 구조의 default값 설정하기

예를 들어 let [n1,n2,n3,n4,n5,n6] = test 이런 상황일 때 n6에 해당하는 값이 없다. 이런 상황일 경우
n6안에는 undefined가 들어가 있다. 만약 이 undefined가 아닌 다른 값을 설정해주고 싶다면
let [n1,n2,n3,n4,n5,n6='없어요!!'] = test 라고 설정을 하면 n6안에는 undefined가 아닌 '없어요!!'라는 값이 들어가게된다.

객체 구조 분해

배열 뿐만 아니라 객체의 구조를 분해하여 변수로 꺼내서 사용 할 수있다.

let user = {name: 'Viva', age: 25, gender: 'male'};
let {name, age, gender} = user; // let name = user.name, let age = user.age ...
// let {age, name ,gender} 이렇게 순서를 바꿔도 상관없다.
// 또한 반드시 객체의 키값과 변수의 이름을 동일하게 하지 않아도 된다.
// let {age : na1, name : na2, gender : na3} = user라고 선언하여  각각 na1,na2,na3을 변수로 사용해도 된다.

console.log(name) // 'Viva'
console.log(age) // 25
console.log(gender) // 'male'

// 그리고 배열과 마찬가지로 객체에 없는 값을 비구조화 할당을 시키려고하면 해당 변수에는 undefined값이 들어간다.
let user = {name: 'Viva', age: 25}
let {name,age,child}
console.log(child) // undefined
//let {name,age,child="None"}
//console.log(child) // "None"