destructuring(디스트럭처링)
30 Jul 2018 | javascript operation basic es6디스트럭처링이란?
디스트럭처링이란, 객체의 구조(structure)를 제거(de)한다는 의미이다.
before destructuring
디스트럭처링은 es6에서 도입된 문법이다. 코드로 보는 것이 가장 효과적인 방법이다.
// es5
const obj = { name: 'yongjun', age: 100 };
const name = obj.name;
const age = obj.age;
console.log(name, age); // yongjun 100es5에서 obj의 name 속성과 age 속성을 가져오려면 이렇게 했어야 했다. 그러나 es6에서는 더 이쁘고 쉽게, 더 다양한 옵션을 주면서 이와 같은 작업을 할 수 있다.
const obj = { name: 'yongjun', age: 100 };
const { name, age } = obj;
console.log(name, age); // yongjun 100이렇게 간단하게 할 수 있을 뿐만아니라 여러가지 팁이 더 존재한다.
// 디스트럭처링 할당 시 할당받을 속성이 없다면 새롭게 변수를 초기화 할 수 있다.
const { name, nationality="korea" } = { name:"yongjun" };
console.log(name, nationality); // yongjun korea
// 새로운 변수명으로 할당 받기
const { name: newName, nationality: newNationality } = { name: "yongjun", nationality: "korea" };
console.log(newName, newNationality); // youngjun korea함수의 파라미터에서도 활용할 수 있다.
const showProfile = ({ name, nationality="none"}) => {
console.log(name);
console.log(nationality);
}
// showProfile은 꼭 객체가 할당되야 한다.
showProfile({name="elecoder" nationality="korea"}); // elecoder korea
showProfile({name="elecoder"}); // elecoder none배열에서도 디스트럭처링이 가능하다.
let numbers = ["one", "two", "three", "four", "five"];
let [num1, num2] = numbers;
console.log(num1, num2); // one two
// 세번째 네번째 요소를 받고 싶다면 아래와 같이 하자
let [,,num3, num4] = numbers;
console.log(num3,num4); // three four
// spread 연산자와 함께하면 이런것도 가능하다
let [val1, ...vals] = numbers;
console.log(val1); // one
console.log(vals); // two three four five
Comments