[JavaScript] 구조분해할당이란?

오늘은 JavaScript의 유용한 기능인 구조분해할당을 알아보자!

구조분해할당이란?

배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식

구조분해 할당을 사용하면 배열이나 객체를 반복문을 통해 일일이 꺼내어 변수에 담을 필요 없이 바로 할당이 가능하다! 👍

예제

배열 구조분해할당

변수 one, two, tree에 array의 인덱스 순서대로 값이 담긴다.

var array = [1, 2, 3];

var [one, two, three] = array;

console.log(one); // 1
console.log(two); // 2
console.log(three); // 3

기본값 할당하기

변수를 선언할 때 기본값을 할당할 수 있다. 배열에 값이 없을 때 기본값을 사용한다.

var array = [1, 2];

var [one = 4, two = 5, three = 6] = array;

console.log(one); // 1
console.log(two); // 2
console.log(three); // 6

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

남은 배열을 하나의 변수에 할당할 수 있다.

 …  은 전개구문인데 객체 또는 배열을 펼칠 수 있다. 👉 전개구문 알아보러가기

var array = [1, 2, 3, 4];

var [one, two, ...etc] = array;

console.log(one); // 1
console.log(two); // 2
console.log(etc); // [3, 4]

객체 구조분해할당

객체를 구조분해할당할 땐 변수명을 객체의 key값과 동일하게 작성해야 한다. 새로운 변수명에 할당하고 싶다면 아래를 확인하자!

var myCat = {name : "구름", age: 4};

var {name, age} = myCat;

console.log(name); //구름
console.log(age); //4

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

var myCat = {name : "구름", age : 4};

var { name : a, age : b } = myCat;

console.log(a); //구름
console.log(b); //4

기본값 할당하기

배열과 마찬가지로 기본값을 할당할 수 있다.

형식은 배열과 동일!

var myCat = {name : "구름", age : 4};

var { name = "해피", age = "1", gender = "여자" } = myCat;

console.log(name); //구름
console.log(age); //4
console.log(gender); //여자

새로운 변수에 담으면서 기본값 할당

짬뽕버전도 가능합니다!

var myCat = {name : "구름"};

var { name : a = "해피", age : b = "1" } = myCat;

console.log(a); //구름
console.log(b); //1

오늘은 구조분해할당을 정리해 보았다.

처음 접하는 분들은 이게 무어시여.. 할 수 있지만 익숙해지고 나면 매우 간편하다는 사실💜

천천히 콘솔 찍어가며 이해하면 아하! 하는 순간이 올 것입니다😆

 

참고자료

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

구조 분해 할당 - JavaScript | MDN

 

공부내용을 기록하는 블로그입니다.

피드백은 언제든지 환영합니다😊