반응형
Destructuring?
: 기존에 구조를 가지고 있던 객체(Array or Object)를 파괴(Destructure)하여 별도의 변수에 값을 할당하는 것이다.
=> 배열이나 객체 안의 어떤 값을 추출할 때 쉽게 받아오는 방법
배열 Destructuring
1 2 3 4 5 6 7 8 9 10 11 12 | //ES5 var arr = [1, 2, 3]; var one = arr[0];//1 var two = arr[1];//2 var three = arr[2];//3 //ES6 const arr = [1,2,3]; const [one, two, three] = arr; // one = 1, two = 2, three = 3 let x,y,z; [x,y,z] = arr; // x=1, y=2, z=3 |
기존에는 배열의 인덱스를 찾아서 가져올 수 있었지만 ES6에서는 배열처럼 변수를 [x,y,z] 이런식으로 대괄호를 사용해서(*배열형태) 변수에 받을 수 있게 되었다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | let x, y, z; [x, y] = [1, 2]; console.log(x, y); // 1 2 [x, y] = [1]; console.log(x, y); // 1 undefined [x, y] = [1, 2, 3]; console.log(x, y); // 1 2 [x, , z] = [1, 2, 3]; console.log(x, z); // 1 3 // default value [x, y, z = 3] = [1, 2]; console.log(x, y, z); // 1 2 3 [x, y = 10, z = 3] = [1, 2]; console.log(x, y, z); // 1 2 3 // spread operator [x, ...y] = [1, 2, 3]; console.log(x, y); // 1 [ 2, 3 ] |
배열 디스트럭쳐링의 다양한 표현 방법
객체 Destructuring
배열과 다른 점은 객체의 프로퍼티명으로 받아야 하는 점이다. (객체는 역시 중괄호{} )
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | // ES5 var obj = { firstName: 'Ungmo', lastName: 'Lee' }; var name = {}; name.firstName = obj.firstName; name.lastName = obj.lastName; console.log(name); // { firstName: 'Ungmo', lastName: 'Lee' } // ES6 const obj = { firstName: 'Ungmo', lastName: 'Lee' }; const { firstName, lastName } = obj; // const {f,l} = obj; 이렇게 받을 수 없다.** console.log(firstName, lastName); // Ungmo Lee |
프로퍼티명으로 변수를 선언하고 받아야 한다는 점을 다시 본다.
1 2 | const { prop1, prop2 } = { prop1: 'a', prop2: 'b' }; console.log({ prop1, prop2 }); // { prop1: 'a', prop2: 'b' } | cs |
순서에 상관없이 이름으로 필요한 변수만 가져올 수 있고,
중첩객체에서는 마찬가지로 중첩객체를 받을 수 있게 만든 후에 받아와야 한다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | function margin() { const left = 1, right = 2, top = 3, bottom = 4; return { left, right, top, bottom }; } const { left, bottom } = margin(); //필요한 프로퍼티만 이름으로 가져올 수 있음. console.log(left, bottom); // 1 4 //중첩 객체에서 가져오는 방법 function settings() { return { display: { color: 'red' }, keyboard: { layout: 'qwerty'} }; } const { display: { color: displayColor }, keyboard: { layout: keyboardLayout }} = settings(); console.log(displayColor, keyboardLayout); // red qwerty | cs |
추가적으로 객체를 destructuring 할 때 아래처럼 축약해서 쓰면 괄호를 써야한다.
1 2 3 4 5 6 7 | array = [1]; obj = {props:1}; [test] = array; ({ props } = obj); //객체를 해체할 때 ()괄호 써야함. console.log(test);//1 console.log(props);//1 | cs |
- 참고 사이트
http://poiemaweb.com/es6-destructuring
반응형
'Javascript > Javascript(ES6)' 카테고리의 다른 글
이터레이터(Iterator)와 for of 문(인덱스말고 값을 순회한다.) (0) | 2018.01.11 |
---|---|
ES6 Class (클래스, Syntactic sugar, prototype을 이용하지만 문법적으로 예쁘게 만들어주는 class) (3) | 2018.01.09 |
Rest 파라미터와 Spread 연산자 정리하기 (feat. 함수의 가독성을 높이는 방법) (0) | 2018.01.02 |
자바스크립트에서 제공하는 배열(Array)의 유용한 함수 (reduce, map, filter, indexOf, foreach) (1) | 2017.12.13 |
ES6 화살표 함수(arrow function) 변경점 요약 (사용법, this등) (3) | 2017.12.11 |