JS - 구조 분해 할당 문법 ?

✅ JS 구조 분해 할당 문법이란 무엇일까요? 단어만 보면 상당히 복잡하고 난해한 개념 같습니다. 하지만 글을 읽으시는 독자분들은 모두 한 두 번씩 써보셨거나 자주 사용하시고 있을지도 모르는 문법입니다. 저 또한 정확하게 모르고 문법만 쓰고 있었기에 이번 기회에 심화 내용도 공부하여 정리해보고자 포스팅합니다 ! 

---

1. 구조 분해 할당 문법

• 객체와 배열은 JS에서 가장 많이 쓰이는 자료구조입니다.
• 구조 분해 할당 문법이란 객체 또는 배열에서 각각 값이나 프로퍼티를 분해하여 손쉽게 별도의 변수에 담을 수 있도록 해주는 문법을 의미합니다.

개념에 대해 정리했으니, 이제 실 사용 예제를 정리해보겠습니다.

 

   * 배열 분해하기

/*

- 1) 기본 사용 형태
기본 사용 형태로 n1, n2 변수에 배열 numArr에 매칭되는 인덱스의 값이 할당됨

*/
let numArr = [10, 100];

let [n1, n2] = numArr;

console.log(n1); // 10
console.log(n2);  // 100

/* -------------------------------------------------- */

/*

- 2) 기본 사용 형태
기본 사용 형태로 n1, n2 변수에 split()함수로 생성된 배열 ["10", "100"]에 매칭되는 인덱스의 값이 할당됨

*/
let [n1, n2] = "10 100".split(' '); // == ["10", "100"]

console.log(n1); // 10
console.log(n2);  // 100

/* -------------------------------------------------- */

/* 

- 3) 쉼표를 사용하여 요소를 무시할 수 있음 
, , 형태로 변수 값을 비워두면 비워든 인덱스의 요소는 무시할 수 있음.
값이 밀리거나 당겨지는 것이 아닌 매칭되는 인덱스의 값이 그래도 할당됨

*/
let [n1, ,n2] = [10, 100, 1000];

console.log(n1); // 10
console.log(n2); // 1000

/* -------------------------------------------------- */

/* 

- 4) 객체 프로퍼티 값 할당하기
객체의 포로퍼티의 키에 동일하게 값을 할당할 수 있음

*/
let user = {};

[user.name, user.age] = ["tistory", 20];

console.log(user); // { name: 'tistory', age: 20 }

/* -------------------------------------------------- */

/*

- 5) 변수 교환
변수의 위치를 바꿔 값을 할당하면 쉽게 변수의 값을 교환 할 수 있음
기존에는 temp 라는 변수를 만들어 교환하는 swap을 쉽게 구현 할 수 있음

*/
let n1 = 10;
let n2 = 1000;

[n1, n2] = [n2, n1]; // n1에는 n2값을, n2에는 n1값을 넣어줌

console.log(n1); // 1000
console.log(n2); // 10

/* -------------------------------------------------- */

/* 

- 6) ...(스프레드 문법)으로 나머지 요소 가져오기
스프레드 문법으로 나머지 요소를 가져올 수 있음 
단, 나머지 배열의 요소들은 새로운 배열로 저장됨

*/
let [n1, n2, ...rest] = [10, 100, 1000, 10000, 100000];

console.log(n1); // 10
console.log(n2); // 100
console.log(rest); // [1000, 10000, 100000], 나머지 배열 요소들이 새로운 배열에 저장됨

/* -------------------------------------------------- */

/*

- 7) 할당할 값이 없으면 undefined로 취급, 이 때 변수=디폴트 값으로 넣어주면 디폴트 값으로 설정 가능
디폴트 값 설정이 가능하며, 매칭되는 인덱스에 값이 없는 경우 디폴트 값으로 할당됨
디폴트 값이 없으면 undefined로 할당

*/
let [n1, n2] = [];
console.log(n1); // undefined
console.log(n2); // undefined

[n1=10, n2=1000] = [];
console.log(n1); // 10
console.log(n2); // 1000

[n1=10, n2=1000] = [100]; //할당된 값이 없는 변수만 디폴트 값으로 설정
console.log(n1); // 100
console.log(n2); // 1000

/* -------------------------------------------------- */

 

   * 객체 분해하기

/*

- 1) 기본 사용 형태
기본 사용 형태로 n1, n2, n3 변수에 객체 numObj에 상응하는 키의 값이 할당 됨

*/
let numObj = { n1:10, n2:100, n3:1000 };

let {n1, n2, n3} = numObj;

console.log(n1); // 10
console.log(n2);  // 100
console.log(n3);  // 1000

/* -------------------------------------------------- */

/*

- 2) 변수의 순서는 중요하지 않음
상응하는 키의 값으로 할당되기 때문에 순서는 의미 없음

*/
let numObj = { n1:10, n2:100, n3:1000 };

let {n2, n3, n1} = numObj;

console.log(n1); // 10
console.log(n2);  // 100
console.log(n3);  // 1000

/* -------------------------------------------------- */

/*

- 3) 객체 프로퍼티의 값을 다른 이름의 변수에 저장하기
{ 객체 프로퍼티 : 목표 변수} 형태로 선언하면 목표 변수에 프로퍼티의 값이 할당됨

*/
let numObj = { n1:10, n2:100, n3:1000 };

let {n1:number1, n2:number2, n3:number3} = numObj;

console.log(number1); // 10
console.log(number2); // 100
console.log(number3); // 1000

/* -------------------------------------------------- */

/*

- 4) 할당할 값이 없으면 undefined로 취급, 이 때 변수=디폴트 값으로 넣어주면 디폴트 값으로 설정 가능
디폴트 값 설정이 가능하며, 매칭되는 프로퍼티의 값이 없는 경우 디폴트 값으로 할당됨
디폴트 값이 없으면 undefined로 할당

*/
let numObj = { n1:10 };

let { n1 = 100, n2 = 200 } = numObj;

console.log(n1); // 10
console.log(n2); // 200

/* -------------------------------------------------- */

/*

- 5) 다른 이름의 변수에 저장과 디폴트 값 설정을 동시에 가능

*/

let numObj = { n1:10, n2:100 };

let {n1: number1 = 20, n2: number2 = 200, n3:number3 = 2000} = numObj;

console.log(number1); //10
console.log(number2); //100
console.log(number3); //2000

/* -------------------------------------------------- */

/*

- 6) 프로퍼티가 많은 복잡한 객체에서 원하는 값만 뽑아오기

*/

let numObj = { n1:10, n2:100, n3:1000
//.. 많이 있다고 가정
};

let {n1} = numObj;

console.log(n1); //10

/* -------------------------------------------------- */

/*

- 7) ...(스프레드 문법)으로 나머지 요소 가져오기

*/
let numObj = { n1:10, n2:100, n3:1000 };

let {n1, ...rest} = numObj;

console.log(n1); // 10
console.log(rest); // { n2:100, n3:1000 }

 

   * 중첩 구조 분해

let userInfo = {
  detail: {
    email: 'tistory.com',
    phoneNumber: '01011112222'
  },
  items: ["item1","item2"],
  isLogin: true
};

// !! 코드를 여러 줄에 걸쳐 작성해 의도하는 바를 명확히 드러내야 함 !! //
let {
	detail:{
    	email,
        phoneNumber
    },
    items: [item1, item2, item3="item3"],
    isLogin = false
} = userInfo;

console.log(email); // tistory.com
console.log(phoneNumber); // 01011112222
console.log(item1); // item1
console.log(item2); // item2
console.log(item3); // item3
console.log(isLogin); // true

 

   * 함수 매개변수로 응용하기 (똑똑한 함수 매개변수)

function showMenu(title = "Untitled", width = 200, height = 100, items = []) {
    console.log(title);
    console.log(width);
    console.log(height);
    console.log(items);
}

showMenu("My Menu", undefined, undefined, ["Item1", "Item2"]);
// 결과 값
// My Menu
// 200
// 100
// [ 'Item1', 'Item2' ]


/* 위 처럼 사용하면 매개변수가 많아지면 많아질 수록 가독성이 떨어지기 때문에 객체 구조할당으로 리팩토링 해보면 ! 

function({
  property : varName = defaultValue
  ...
});
=> 객체 구조 할당으로 선언한 매개변수의 구조

*/


function showMenu({ title = "Untitled", width = 200, height = 100, items = [] }) {
    console.log(title);
    console.log(width);
    console.log(height);
    console.log(items);
};

let options = {
    title: "My menu",
    items: ["Item1", "Item2"]
};


showMenu(options);
// 결과 값
// My Menu
// 200
// 100
// [ 'Item1', 'Item2' ]


/* 이렇게 좀 더 깔끔하게 코딩이 가능 ! */

 

🤔  정리 !

• 구조 분해 할당 문법이란 객체 또는 배열에서 각각 값이나 프로퍼티를 분해하여 손쉽게 별도의 변수에 담을 수 있도록 해주는 문법 
• 배열 분해하기
  
  
  • let [ item1 = default 값, item2, ...rest] = array;
    
    
    • array의 첫번째 요소는 item1
    • 두번째 요소는 item2
    • 나머지는 배열의 형태로 rest에 할당
• 객체 분해하기
  
  
  • let { item1 : valueName = default 값, ...rest } = object;
     
    • object의 item1의 값(object.item1 값)은 valueName에 할당되고 만약 없다면 default 값으로 할당
    • object에서 연결할 프로퍼티 키가 없는 값들은 객체 형태로 rest에 할당

 

 

🚨 보기 편하게 관련된 내용을 하나의 코드 블럭에 모두 정리하였는데 혹시 가독성이 좋지 않거나 불편하시면 피드백 주시면 나중에 글을 쓸 때 참고하도록 하겠습니다~

 

 

🔗 참고한 글

구조 분해 할당