JS - 디스트럭처링

디스트럭처링(Destructuring)은 구조화된 배열이나 객체를 분해해서 변수에 대응하는 속성 값을 변수에 할당하는 연산자입니다. 예를 들어 객체의 속성에 대응하는 속성 값을 변수에 할당합니다.

<script>
var {id, name='none'} = {id:'101', name:'habony'};

console.log(id, name);
// 결과: 101 habony
</script>

객체의 id 와 name 에 '101'과 'habony' 라는 값을 할당하고, 만일, name 에 할당된 값이 없다면 none 이라는 값을 할당하라는 뜻입니다. 아래는 name 에 할당된 값이 없기 때문에 none 이 자동으로 할당됩니다.

<script>
var {id, name='none'} = {id:'101'};

console.log(id, name);
// 결과: 101 none
</script>

다음은 배열 디스트럭처링의 예입니다. 왼쪽에 있는 배열 id, name, job 은 인덱스를 기준으로 오른쪽에 있는 배열에 값으로 할당합니다.

<script>
var [id, name] = ['101', '하보니'];

console.log(id, name);
// 결과: 101 하보니
</script>

<script>
var [id, name, job] = ['101', '하보니', '백수'];

console.log(id, name, job);
// 결과: 101 하보니 백수
</script>

날짜 문자열을 배열로 만들어 변수에 할당할 수 있습니다.

<script>
var date = '2019-06-12';

var [y, m, d] = date.split('-');
console.log(y, m, d);
// 2019 06 12
</script>

디스트럭처링은 함수의 매개변수에도 사용됩니다. 각 매개변수에 id, name, job 으로 설정하고 넘길 때는 id 와 name 변수에만 할당하면 다음의 결과를 얻을 수 있습니다.

<script>
function test({id, name='none', job='백수'}){
  console.log(id, name, job);
}

test({name:'habony', id:'101'});
// 101 habony 백수
</script>