JS- 구조 분해 할당(Destructuring assignment)

JS- 구조 분해 할당(Destructuring assignment)

---

 

오늘은 JS에서 사용되는 구조 분해 할당에 대해 알아보겠습니다.

 

구조 분해 할당이란 배열이나 객체에서 구성을 분해한 뒤

그 분해된 값을 변수에 담을 수 있게 하는 것을 의미합니다.

 

말이 어려워서 바로 예시를 통해 설명드리겠습니다.

 

예시에 앞서서 구조 분해 할당은 배열과 객체를 통해

사용할 수 있습니다.

 

우선 배열에 구조 분해 할당에 대해 보겠습니다.

 

let [ex1, ex2] = [10, 20]; //기존의 배열에 지정할 값을 작성합니다.

//그러면 결과값은

console.log(ex1); //10
console.log(ex2); //20

//지정된 값 대로 출력이 되는 것을 확인할 수 있습니다.

 

예시를 보시면 기존에 배열에 변수를 통해

지정할 값을 작성해서

원하는 값을 출력할 수 있도록 사용합니다.

 

이것을 구조 분해 할당이라고 할 수 있습니다.

 

심화된 예시를 보여드리겠습니다.

let user = ['James', 'Kabin', 'Jon'];

let [user1, user2, user3] = user;

console.log(user1); // James
console.log(user2); // Kabin
console.log(user3); // Jon

 

이런 식으로 긴 배열에서도 사용할 수 있습니다.

 

배열의 구조 분해 할당을 사용하 실 때 주의하실 점은

만약 기존의 배열의 수와 지정할 값의 수가

다르면 undefined가 출력되기 때문에

이것을 예방하기 위해서 기존 배열에

미리 값을 지정해 주면 예방할 수 있습니다.

 

let [ex1, ex2, ex3] = [1, 2]; //ex3에는 undefined가 출력됩니다.

let [ex1 = 10, ex2 = 20, ex3 = 30] = [1, 2]; 
//이런식으로 미리 기본 값을 작성하면 위에 상황을 예방할 수 있습니다.

 

다음은 객체의 구조 분해 할당에 대해 알아보겠습니다.

 

객체의 구조 분해 할당은

let user = {name: 'James', age: 20, gender: 'M'};

let {name, age, gender} = user; 
//이 부분에서 속성의 순서는 상관없이 실행됩니다.

console.log(name); //James
console.log(age); //20
console.log(gender); //M

이런 식으로 작성할 수 있습니다.

 

객체 구조 분해 할당에서 속성의 순서는

상관없이 동일하게 실행이 가능하며

 

프로퍼티에서 키의 이름을 변경해서

사용할 수도 있습니다.

 

let user = {name: 'James', age: 20, gender: 'M'};

let {name: userName, age: userAge, gender: userGender} = user;

console.log(userName); //James
console.log(userAge); //20
console.log(userGender); //M

이런 식으로 사용합니다.

 

마지막으로 배열 구조 분해 할당과 동일하게

기존의 프로퍼티의 수와

지정할 수가 다르면

아무 값이 없는 값에는 undefined가 출력됩니다.

 

그래서 배열과 동일하게 기본값을 지정해주어

예방해주시면 좋습니다.

 

let user = {name: 'James', age: 20};

let {name, age, gender} = user;

console.log(gender); //undefined가 출력됩니다.

 

---

 

오늘은 구조 분해 할당에 대해 알아보았습니다.

구조 분해 할당을 사용하면 객체나 배열에서

복잡한 코드로 작성되는 상황에서

간단하게 값을 지정할 수 있습니다.

 

어떤 식으로 사용되는지 알아두시면 좋겠습니다.

 

감사합니다.