구조 분해 할당 Destructuring

안녕하세요!

어제 지리산 등반을 하고 온 기념으로(?)

Destructuring 문법에 대해 정리해 보겠습니다.

 

 

 

 

---

 

 

 

 

Destructuring의 사전적 의미는 무엇일까? 궁금해서 찾아보았습니다.

사전적의미

 

별거없다. 그냥 구조분해라는 뜻을 가지고 있습니다.(...)

 

 

 

 

 

구조분해 할당 Destructuring = '패턴 매칭'

: 배열이나 객체의 속성을 해체하여 그 값을 변수에 담을 수 있게하는 ES6문법이다.

=> 직관적으로 변수를 만들어 사용할 수 있음.

 

구조 분해 할당은 할당문의 좌변에서 사용하여 원래 변수에서 어떤 값을 분해해 할당할지 정의한다.

 

 

 

 

---

 

 

 

 

Destructuring 문법은 크게

배열구조분해와 객체 구조분해로 나눌 수 있다.

 

 

 

배열 구조 분해

예시-

var x = [1, 2, 3, 4, 5];
var [y,z] = x;
console.log(y); //1
console.log(z); //2

//또다른 예시

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

 

실수로 변수를 빼먹는 경우 -> undefined 처리됨.

var [a,b,c] = [2,3]; //c=undefined

 

디폴트 변수를 지정해줄 수 있다.

 

//예시 1
var [a,b,c = 10] = [2,3]; //c=10

//예시2
var a,b;
[a = 5, b = 7] = [1];
console.log(a); //1
console.log(b); //7

 

변수에 배열의 나머지를 할당하기

배열을 구조 분해할 경우, 나머지 구분을 이용해 분해하고 남은 부분을 하나의 변수에 할당할 수 있다.

var [a, ...b] = [1,2,3];
console.log(a); // 1
console.log(b); // [2,3]

 

 

 

 

객체 구조 분해

예시-

//예시 1

var obj = { name: 'kim' , age: 30};
var name = obj.name; //name:kim
var age = obj.age; //age:30

//예시2

var o = {p: 42, q: true};
var { p, q} = o;

console.log(p); //42
console.log(q); //true

 

선언 없는 할당

구조 분해를 통해 변수의 선언과 분리하여 변수에 값을 할당할 수 있다.

var a, b;
({a,b} = { a:1, b:2 }); //a=1, b=2

 

새로운 변수 이름으로 할당하기

객체로부터 속성을 해체하여 객체의 원래 속성명과는 다른 이름의 변수에 할당할 수 있다.

var o = { p: 42, q: true};
//새로운 변수명 대입
var { p: foo, q: bar } = o;

console.log(foo); //42
console.log(bar); //true

 

해당 문법을 접하면서 정말 변수를 자유자재로 다룰 수 있겠구나 하는 생각이 든다.

아직 배우는 중이라 적재적소에 문법을 사용할 수 있는 힘은 약하겠지만..

좋은 문법이라도 깊이 공부해야 내가 응용할 수 있는 힘이 생기는 것 같다.

자바스크립트 근육짱짱맨이 되는 날까지...빠팅!

 

 

 

 

 

 

참고 문헌

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

구조 분해 할당 - JavaScript | MDN