Javascript(자바스크립트) 구조 분해 할당

# 구조 분해 할당

구조분해할당은 자바스크립트에 존재하는 기능 중 하나로 복잡한 데이터를 하나의 변수에 쉽게 대입할 수 있는 기능이다. 이때 원본 배열이나 객체는 바뀌지 않는다.

 

 

# 배열 구조 분해 할당

// 배열의 구조분해 할당
const arr = [100, 200]; // 배열을 만든다.
const [a, b] = arr; // 다음과 같이 배열을 대입하면 a에는 100이 b에는 200의 값이 들어간다.

console.log(a) // 100
console.log(b) // 200

 

배열의 경우 좌측에는 할당을 받을 변수를 담은 배열을 우측에는 분해를 진행할 배열을 작성하면 된다. 이렇게 하면 a에는 arr배열의 첫번째 값인 100이, b에는 arr의 두번째 값인 200이 들어온다.

 

 

## 배열 구조 분해 할당의 기본값 지정

배열을 구조분해할당을 할때 할당을 받을 대상(좌측)보다 분해를 받는 대상(우측)의 요소가적더라도 구조분해할당을 진행하는데는 아무런 문제가 없다. 이 경우 부족한 부분은 undefiend로 채워지며 undefined가 아닌 기본값이 저장되게 할 수도 있다.

 

const name = ["Mai"];
const [firstName, lastName = "Hayasaka", middleName] = name;

console.log(firstName) // Mai
console.log(lastName) // hayasaka
console.log(middleName) // undefiend

 

다음과 같이 name에는 하나의 요소밖에 없지만 오류가 발생하거나 하지 않으며 lastName에는 기본값으로 지정한 "Hayasaka"가 middleName에는 아무것도 지정을 하지 않았기 때문에 undefiend의 값이 들어가게 된다.

기본 값은 위의 코드에서 보다싶이 "변수명 = 기본값" 형식으로 지정하면 된다. 물론 당연히도 기본값을 지정하더라도 해당하는 요소가 존재하면 그 값으로 덮어씌어지게 된다.

 

 

# 객체 구조 분해 할당

객체의 구조 분해 할당은 배열보다는 살짝 복잡하다.

const obj = {name: "mei", age: 16}; // 분해를 진행할 객체를 만든다.
const {name, age} = obj;

console.log(name) // mei
console.log(age) // 16

 

우측에는 구조 분해를 진행할 객체를 좌측에는 이에 상응하는 키값을 넣어주면 된다. 이때 순서는 중요하지 않으며 {age, name} = obj 와 같이 입력하여도 동일한 결과를 얻을 수 있다.

 

 

## 객체 구조 분해 할당 기본값 및 다른 변수명 지정

객체를 구조분해할당 할 때도 배열과 마찬가지로 기본값을 지정할 수 있다 똑같이 = 을 사용하며 된다. 또한 키값이 아니라 따로 변수명을 지정하여 값을 저장할 수 있는데 이때는 : 을 사용해야 한다.

const engine = {unreal: "C++", since: 970923};
const {unreal : language, since, developer = "epic games"} = engine;

console.log(language); // C++
console.log(since); // 970923
console.log(developer); // epic games

 

unreal이 아니라 language에 C++ 이라는 값이 저장된 것을 볼 수 있으며 원본 객체에는 존재하지 않는 developer라는 값도 정상적으로 저장된 것을 볼 수 있다.

: 과 = 을 동시에 사용하는 것도 가능하며 이렇게 하면 원하는 변수명에 기본값을 지정해줄 수 있다.

 

 

# 마무리

구조 분해 할당은 자바스크립트에서 쓸 수 있는 매우 강력한 기능 중 하나로 이를 통해 객체나 배열의 값을 아주 쉽게 가져올 수 있다.  구조 분해 할당을 이용하지 않고 객체나 배열의 값을 가져오려면 반복문을 돌리던가 하여야 하는데 이렇게 하지 않고 쉽게 처리할 수 있어  더 간단하며 보기 쉬운 코드를 작성할 수 있을 것이다.