구조 분해 할당

Object(객체)와 Array(배열)은 JS에서 가장 많이 쓰이는 자료구조들이다.

Key:Value가 필요할땐 객체를, 데이터를 순서대로 저장하고 싶을땐 배열을 사용한다

하지만 개발을 하다보면 함수에 객체나 배열을 전달하는 경우가 생기는데 가끔 일부만 필요한 경우가 생기기도 한다. 이럴때 객체나 배열을 변수로 분해할수있게 해주는 구조 분해 할당을 사용할 수 있다.

배열 분해하기

// 이름과 성을 요소로 가진 배열
let name = ["JuYong", "Shin"]

// 구조 분해 할당을 통해
// firstName에는 arr[0]을
// lastName에는 arr[1]을 할당한다.
let [firstName, lastName] = arr;
// firstName = JuYong, lastName = Shin

분해를 한다고해서 기존 배열이 사라지진 않는다 (수정되지않고 배열이 사라지지않는다)

// 두 번째 요소는 필요하지 않음
let [firstName, , title] = ["Julius", "Caesar", "Consul", "of the Roman Republic"];
// title = Consul

선언에서 분리한 할당

let first, second;

[first, second] = [1,2];
console.log(first); // 1
console.log(second); // 2

위와 같이 변수를 선언과 할당을 분리하여 구조분해 할당을 할수있다.

기본값 설정

let first, second;

[first=1, second=2] = [3];
console.log(first); // 3
console.log(second); // 2

이런식으로 구조분해시에 분해한 변수에 기본값을 넣는다면 할당시에 추가되지않은 변수는 기본값이 할당된다.

변수 스와핑

let first = 1;
let second = 2;

[first, second] = [second, first]
console.log(first); // 2
console.log(second); // 1

값을 교환할때 구조분해를 활용한다면 한줄로 표현이 가능하다.

함수의 Return 배열

fc = () => {
	return [1,2];
}

let first, second;
[first, second] = fc();
console.log(first); // 1
console.log(second); // 2

값 무시하기

fc = () => {
	return [1,2,3];
}

let [first, ,second] = fc();
console.log(first); // 1
console.log(second); // 3
// [,,] = fc(); 처럼 모든 값을 무시하는것도 가능하다.

...변수(나머지변수)에 저장

let [first, ...atLast] = [1,2,3];
console.log(first); // 1
console.log(atLast); // [2,3]

//let [first, ...atLast, ] = [1,2,3];
// 이런식으로 컴마가 들어가게 된다면 SyntaxError가 발생하니 유의할것.

정규식으로 값 분해하기

let url = "https://developer.mozilla.org/en-US/Web/JavaScript"; 
let parsedURL = /^(\w+)\:\/\/([^\/]+)\/(.*)$/.exec(url); console.log(parsedURL); 
// ["https://developer.mozilla.org/en-US/Web/JavaScript", 
//  "https", "developer.mozilla.org", "en-US/Web/JavaScript"] 
let [, protocol, fullhost, fullpath] = parsedURL; console.log(protocol); // "https"

---

객체 구조분해

기본할당

let obj = {first: 1, second: 2};
let {first, second} = obj;
// 이런식으로 key와 같은이름의 변수로 분해할당이 가능하다.

선언을통한 분리할당

let first, second;

({first, second} = {first:1, second:2});
console.log(first); // 1
console.log(second); // 2

새로운 변수이름에 할당하기

let obj = {first: 1, second: 2};
let {first:a, second:b} = obj;
console.log(a) // 1
console.log(b) // 2
// Key값을 이용해 할당할 변수이름으로 대입하면 value값이 대입된다.

기본값 설정

ES6

const normalFunction = ({a='a', b= { x:0, y:0 }, c = 1} = {}) => {
	console.log(a,b,c);
}


normalFunction(); // 'a' { x: 0, y: 0 }, 1

normalFunction({
  b: {x:20, y:20},
  c: 25
}); // 'a' { x: 20, y: 20 } 25

중첩객체 분해와 중첩객체에서의 배열 분해

let metadata = { 
  title: "Scratchpad", 
  translations: [ { locale: "de", 
                   localization_tags: [ ], 
                   last_edit: "2014-04-14T08:43:37", 
                   url: "/de/docs/Tools/Scratchpad", 
                   title: "JavaScript-Umgebung" } ],
  url: "/en-US/docs/Tools/Scratchpad" 
}; 
let { title: englishTitle, translations: [{ title: localeTitle }] } = metadata; 
console.log(englishTitle);
// "Scratchpad" 
console.log(localeTitle);
// "JavaScript-Umgebung"

매개변수에서의 구조분해

function userId({id}) { 
  return id; 
} 

function whois({displayName: displayName, fullName: {firstName: name}}) { 
  console.log(displayName + " is " + name); 
} 
let user = { 
  id: 42, 
  displayName: "jdoe", 
  fullName: { firstName: "John", lastName: "Doe" } 
}; 
console.log("userId: " + userId(user)); 
// "userId: 42" 
whois(user); 
// "jdoe is John"

---

마무리

구조분해할당을 통해서 배열과 객체에서 조금 더 효율적인 변수의 분배가 가능하다 중요

참고한곳
구조분해할당