<aside> <img src="/icons/cursor-click_gray.svg" alt="/icons/cursor-click_gray.svg" width="40px" /> 빠른 이동을 원하시면, 아래 키워드를 클릭하세요!
</aside>
구조분해할당이란, 구조화 되어 있는 배열, 객체와 같은 데이터를 분해하여 각각의 변수에 다시 할당하는 것을 이야기합니다. 배열과 객체의 값을 각각의 변수에 담아 관리하고 싶다면, 즉, 값을 복사해주고 싶다면 어떻게 할 수 있을까요?
const arr = [ 1, 2, 3, 4, 5 ];
let one = arr[0];
let two = arr[1];
---------------------------------------------
const obj = {
name: "otter",
gender: "male"
}
let userName = obj.name;
let userGender = obj.gender;
위의 코드처럼 작성한다면, 각각의 값을 따로 담아서 관리해줄 수가 있겠죠? 하지만 위의 방법은 관리할 데이터가 여러개인 경우, 각각의 데이터를 모두 변수로 선언해 주어야 하기 때문에 굉장히 비효율적이죠. 이런 경우 우리는 구조분해할당을 사용할 수 있습니다.
배열을 구조분해할당 하는 방법부터 알아볼까요?
const arr = [ 1, 2, 3, 4, 5 ];
let [ one, two ] = arr; **// 배열의 구조분해할당**
배열을 구조분해할당 해줄 때는 위의 코드처럼 작성 해주면 됩니다. 먼저 선언 키워드를 적어준 후, 대괄호를 적어줍니다. 그리고 그 안에 변수명으로 사용하고자 하는 문자를 입력해주면 됩니다. 그 뒤에는 할당 연산자, 구조분해할당 해주고 싶은 배열을 입력해 주시면 됩니다. 이때, 변수명으로 사용하고자 하는 문자들은 쉼표(,)로 구분 해주고, 그 개수에 따라 주어진 배열의 앞에서부터 차례대로 각각의 변수에 담기게 됩니다. 배열을 한번 분해해서, one과 two라고 하는 새로운 변수에 담아주는거죠.
const arr = [ 1, 2, 3, 4, 5 ];
let [ one, two ] = arr;
console.log(one, two);
이후 one과 two 변수를 참조해 보면, 배열 arr의 가장 앞의 요소부터 차례대로 숫자 1과 2가 담겨져 있는 것을 확인할 수 있습니다.
객체를 구조분해할당 하는 방법은 조금 다릅니다.
const obj = {
name: "otter",
gender: "male"
}
let { name, gender } = obj
위의 코드처럼 작성해주면 객체 obj의 구조분해할당이 완료됩니다. 배열과 같이 선언 키워드를 먼저 적어주고, 객체는 대괄호가 아닌 중괄호를 입력해서 구조분해할당을 수행합니다.
let {}