자바스크립트 < 비구조화 할당 (구조분해 할당)에 대해 알아보기>

 

 

 

 

 

 

 

변수에 넣어논 특정값들을 변수에 쉽게 담을 수 있는데 그것을 비구조화 할당이라고 한다.

만약 비구조할당이 없을때는 어떻게 작업을 해야했는지에 대한 불편함을 알아보자.

 

 

 

 

 

 

 

 

1. 배열 데이터값을 이용한 비구조화 할당

---

const names = ["Chloe", "Jake", "David", "Tom"];

const name1 = names[0];
const name2 = names[1];
const name3 = names[2];
const name4 = names[3];

console.log(name1);	//Chloe
console.log(name2);	//Jake

 

 

이렇게 배열에 담긴 값들을 변수 하나 하나 각자 생성해서 각 [ index ] 넘버를 지정 설정하면서 할당했다.

 

4개까지는 쌉가능이지만... 만약 배열 값들이 100개, 1000개면 답이 없다.. 야근 각...

 

 

 

 

 

 

 

 

 

 

자! 이제 비구조화 할당을 이용해서 간단히 해보자.

 

 

const names = ["Chloe", "Jake", "David", "Tom"];
const [name1, name2, name3, name4] = names; 

console.log(name1);	//Chloe
console.log(name2);	//Jake

 

 

const [ ... ] 배열 내에 변수 이름들을 지정하고 그것을 변수 names에 대입한다!

 

그럼 하나 하나 [ index ]를 개고생하면서 안넣어줘도 배열 내에 변수 이름으로 할당된 값을 뽑아 사용가능.

 

 

 

 

 

 

 

 

 

 

2. 객체 데이터값을 이용한 비구조화 할당

---

객체도 물론 비구조화 할당 썹가능이다.

 

대신 객체의 각각의 값을 뽑아내고 싶을때는 key값으로 뽑아야한다.

 

뭔소린지는 예시 코드를 아래를 보자

 

const studentA = {
    name: "Chloe",
    age: 20,
    isFemale: false,
    hobby: "reading"
}

const {name, age, isFemale, hobby} = studentA;
console.log(name);	// Chloe
console.log(age);	// 20

 

변수 studentA에 데이터를 key : value를 이용해서 설정.

 

새로운 const { ... }에 할당하려는 key값을 넣고 변수 studentA를 대입한다.

 

그럼 key를 이용해서 value값을 가져올 수 있다.

 

 

 

 

 

비구조화 할당 / 구조분해 할당 이름만 거창하게 어렵지, 참 쉽죠?