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"
Author And Source
이 문제에 관하여(ES6(구조 분해 할당)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@hyundong_kk/ES6구조-분해-할당저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)