[FE/JavaScript] 구조 분해 할당(디스트럭처링 할당)

구조 분해 할당

💡 구조 분해 할당이 뭔가요?

💡구조 분해 할당은 크게 어떤 종류가 있나요?

 

Q.구조 분해 할당 (디스트럭처링 할당)

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

• 구조화된 배열과 같은 이터러블 또는 객체를 destructuring(비구조화, 구조 파괴)하여 1개 이상의 변수에 개별적으로 할당하는 것

🧐 iterable?

반복 가능한 객체(iterable object) 혹은 줄여서 iterable 내장된 생성자 중 iterable 객체를 만들어내는 생성자

• String
• Array
• TypedArray
• Map
• Set 

Q.구조 분해 할당 왜 쓰이죠?

• 배열과 같은 이터러블 또는 객체 이터럴에서 필요한 값만 추출하여 변수에 할당 시 유용하기 때문

Q.구조 분해 할당은 크게 어떤 종류가 있나요?

 💡 배열 구조 분해 할당

 💡 객체 구조 분해 할당

 

1. 배열 구조 분해 할당

배열과 같은 이터러블에서 필요한 요소만 추출해 변수에 할당하고 싶을 때 유용

*️⃣ 사용 방법

//ES5
var arr = [1,2,3];

var one = arr[0];
var two = arr[1];
var three = arr[2];

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

• 배열의 각 요소를 배열로부터 추출해 1개 이상의 변수에 할당
• 배열 디스트럭처링 할당의 대상(할당문의 우변)은 이터러블 해야하며, 할당 기준은 배열의 인덱스 (즉, 순서대로 할당)

const arr = [1,2,3];

//ES6 배열 디스트럭처링 할당
//변수 one, two, three를 선언하고 배열 arr를 디스트럭처링 하여 할당
//이때 할당 기준은 배열의 인덱스
const [one,two,three] = arr;
console.log(one,two,three); //1 2 3

• 할당 연산자 왼쪽에 값을 할당 받을 변수를 선언해야 하며, 이때 변수를 배열 리터럴 형태로 선언
• 이때 우변에 이터러블을 할당하지 않으면 에러 발생!

let x,y;
[x,y] = [1,2];

• 배열 디스트럭처링 할당의 변수 선언문은 선언과 할당을 분리할 수 있음
• 단, 이때 const 키워드는 변수를 선언할 수 없으므로 권장 x

const [a,b] = [1,2];
console.log(a,b) //1,2

const [c,d] = [1];
console.log(c,d) //1 undefined

const [e,f] = [1,2,3];
console.log(e,f); //1 2

const [g, ,h] = [1,2,3];
console.log(g,h) //1 3

• 배열 디스트럭처링 할당의 기준은 배열의 인덱스이므로 순서대로 할당
• 이때 변수의 개수와 이터러블의 요소 개수가 반드시 일치할 필요는 없음

//기본값
const [a,b,c = 3] = [1,2];
console.log(a,b,c); //1 2 3

//기본값 보다 할당된 값이 우선
const [e,f=10,g=3] = [1,2];
console.log(e,f,g); //1,2,3

var h,i;
[h=4,i=7] = [1];
console.log(h); //1
console.log(i); //7

• 배열 디스트럭처링 할당을 위한 변수에 기본값을 설정할 수 있음

 

 

2. 객체 구조 분해 할당

객체 디스트럭처링 할당은 객체에서 프로퍼티 키로 필요한 프로퍼티 값만 추출해 변수에 할당하고 싶을 때 유용

*️⃣사용 방법

객체의 각 프로퍼티를 객체로부터 추출하여 1개 이상의 변수에 할당

이때 객체 디스트럭처링 할당의 대상(할당문 우변!)은 객체여야 하며, 할당 기준은 프로퍼티 키

(즉, 순서는 의미가 없으며 선언된 변수의 이름과 프로퍼티 키가 일치하면 할당!)

//ES6 객체 디스트럭처링 할당
const user = { firstName: 'Iseo', lastName: 'Yu'};
//변수 lastName, firstName을 선언하고 user 객체를 디스트럭처링 하여 할당
//이때 **프로퍼티 키를 기준으로 디스트럭처링 할당**이 이뤄짐!(순서는 의미x)
const { lastName,firstName } = user;
console.log(firstName,lastName); //Iseo Yu

const {lastName, firstName} = {firstName:'Iseo',lastName:'Yu'};

• 배열 디스트럭처링 할당과 마찬가지로 객체 디스트럭처링 할당을 위해서는 할당 연산자 왼쪽의 프로퍼티 값을 할당 받을 변수로 선언! (변수를 객체 리터럴 형태로 선언)
• 우변에 객체 또는 객체로 평가될 수 있는 표현식(문자열, 숫자, 배열 등)을 할당하지 않으면 에러

//동치
const {lastName, firstName} = user;
const {lastName:lastName, firstName:firstName} = user;

• 객체 리터럴 형태로 선언한 변수는 lastName,firstNmae
• 프로퍼티 축약 표현을 통해 선언한 것

//프로퍼티 축약(속성명 축약)
//객체를 정의할 때 key와 할당하는 변수의 이름이 같으면 예시와 같이 축약 가능

var books = ['Learning JS', 'Learning Python']
var magazines = ['Vogue', 'Science']
 // ES5
var bookShop = {
 books: books,
 magazines: magazines,
 }
 console.log(bookShop)
////////////////////////////////////////////////////////
const books = ['Learning JS', 'Learning Python']
const magazines = ['Vogue', 'Science']
 // ES6+
const bookShop = {
 books,
 magazines,
 }
 console.log(bookShop)

/*
 {
 books: ['Learning JS', 'Learning Python'],
 magazines: ['Vogue', 'Science']
 }
 */

---

const user = { firstName: 'Iseo', lastName:'Yu'};

//프로퍼티를 기준으로 디스트럭처링 할당이 이뤄짐
//프로퍼티 키가 lastName인 프로퍼티 값을 ln에 할당하고,
//프로퍼티 키가 fistName인 프로퍼티 값을 fn에 할당한다.
const {lastName: ln, firstName: fn} = user;
console.log(fn,ln); //Iseo Yu

• 객체의 프로퍼티 키와 다른 변수 이름으로 값을 할당받으려면 위와 같이 변수를 선언하면 됨

또한, 배열 디스트럭처링처럼 객체 디스트럭처링 할당을 위한 변수에 기본값을 설정 가능

const {firstName = 'Iseo', lastName} = {lastName:'Yu'};
console.log(firstName,lastName)//Iseo Yu

const {firstName:fn = 'Iseo',lastName:ln} = {lastName:'Yu'};
console.log(fn,ln); //Iseo Yu

객체 디스트럭처링 할당은 객체를 인수로 전달 받는 함수의 매개변수에도 사용 가능

function getUserInfo(user){
	console.log(`이름은 ${user.name}이고 나이는 ${user.age}, 직업은 ${user.job}입니다.`);
}

getUserInfo({name:"이서", age:28, job:"없음"});
//이름은 이서이고 나이는 28, 직업은 없음입니다.

but, user가 반복 되는 걸 볼 수 있음

매개변수 user에 객체 디스트럭처링 할당을 사용 시 다음처럼 가독성 있고 간편한 코드로 표현 가능

function getUserInfo({ name, age, job}){
	console.log(`이름은 ${name}이고 나이는 ${age}, 직업은 ${job}입니다.`);
}
getUserInfo({name:"이서", age:28, job:"없음"});
//이름은 이서이고 나이는 28, 직업은 없음입니다.