Introduce

본 문서는 2022년 2월 1일 에 작성되었습니다.

Destructuring, 구조 분해 할당 를 간단하게 알아보고
실전 문법 안에서 적용할 예제를 들여다 보겠습니다.

Theory

---

Destructuring

Destructuring, 구조분해할당은 다음과 같이 정의 되어 있습니다.

구조 분해 할당 구문은 배열이나 객체의 속성을 해제하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식입니다.
Destructuring mdn

구조 분해 할당은 두 가지가 존재합니다.

1. 배열 구조 분해 할당
2. 객체 구조 분해 할당

✅ Array

Array Destructuring 배열 구조 분해 할당은
배열의 속성을 해체하여 그 값을 차례로 변수에 담습니다.

✅ Object

Object Destructuring, 객체 구조 분해 할당은
객체의 속성을 해체하여 그 값을 차레로 변수에 담습니다.

---

✅ Array.Destructuring

1. 할당 기초

배열 구조 분해 할당은 일반적으로 선언과 동시에 / 선언의 이후에 실행할 수 있습니다.

// 선언과 동시에 배열 구조 분해 할당
const [a,b,c]=[10,20,30];

// 선언의 이후에 배열 구조 분해 할당 - 1
const array=[10,20,30];
const [a,b,c]=array;

// 선언의 이후에 배열 구조 분해 할당 - 2
function returnArray() {
  return [10,20,30];
}
const [a,b,c]=returnArray();

2. 응용 > 분리 할당

배열 구조 분해 할당을 통해서,
배열과 분리된 할당을 실행할 수 있습니다.

let a,b;

[a,b]=[1,2];

2. 응용 > 기본값

배열 구조 분해 할당을 통해서,
임의의 변수가 undefined 일 경우의 기본값을 설정할 수 있습니다.

let a,b;

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

let a,b;

[a=10, b=10]=[1, undefined];
console.log(a) // 1
console.log(b) // 10

3. 응용 > 교환

배열 구조 분해 할당을 통해서,
임의의 변수의 값을 교환할 수 있습니다.

let a=1;
let b=30;

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

4. 고급 > 변수의 반환 값 무시

배열 구조 분해 할당을 통해서,
배열의 임의 자리 혹은 모든 자리를 무시할 수 있습니다.

// 배열의 일부 반환값 무시
const [a,,b]=[10,20,30];

// 배열의 모든 반환값 무시
const [,,,]=[10,20,30];

5. 고급 > Spread 배열 할당

Spread 와 배열 구조 분해 할당을 통해서,
배열에서 임의 자리와 나머지를 분할하여 할당할 수 있습니다.

const [a,...b]=[10,20,30];

console.log(a); // 10
console.log(b); // 20, 30

✅ Object.Destructuring

1. 할당 기초

객체 구조 분해 할당은 일반적으로 선언과 동시에 / 선언의 이후에 실행할 수 있습니다.

// 선언과 동시에 객체 구조 분해 할당
const {a,b}={a:10, b:30};
// 선언의 이후에 객체 구조 분해 할당 - 1
const obj={a:10, b:30};
const {a,b}=obj;

// 선언의 이후에 객체 구조 분해 할당 - 2
function returnObj() {
  return {a:10, b:30};
}
const {a,b}=returnObj;

2. 웅용 > 변수명 변경

객체 구조 분해 할당을 통해서,
객체 내부 변수명을 새로운 변수명으로 변경할 수 있습니다.

const obj={a:10, b:30};
const {a:newA, b:newB}=obj;

3. 응용 > 객체 기본값

객체 구조 분해 할당을 통해서,
임의의 변수가 undefined 일 경우의 기본값을 설정할 수 있습니다.

const obj={a:10};

const {a=30, b=30}=obj;
console.log(a); // 10
console.log(b); // 30


const obj={a:10, b:undefined};

const {a=30, b=30}=obj;
console.log(a); // 10
console.log(b); // 30

4. 응용 > 매개변수 기본값

객체 구조 분해 할당을 통해서,
매개변수로 넘어온 객체에 기본값을 줄 수 있습니다.

단 버전별로 구현 방식에 차이가 있습니다.

const user={
  name:"unchaptered"
}

• ES5(2009)

function es5Function (user) {
  user = (user===undefined) ? {} : user;
  
  var name= (user.name===undefined) ? "defaultName" : user.name;
  console.log(name);
}

• ES6(2015)

function es6Function ({name="defaultName"}) {
  console.log(name);
}

• ES6(2015)

5. 고급 > obj obj 구조 분해

객체 구조 분해 할당을 통해서,
내부 구조가 복잡한 객체를 분해 할당 할 수 있습니다.

const user={
  name:"unchaptered",
  born:1996,
  meta: {
    favor:"read a book",
    likes:["food","coffee"],
    dislikes:[]
  }
};

const {
  name,
  born,
  meta: {
    favor,
    likes:[likeA,likeB],
    dislikes,
  }
}=user;

6. 고급 > for of 구조 분해

loop 중 for of 에서 자세한 내용은 너무 딥하여서 따로 언급을 안했지만,
iterable(상위 클래스가 @@iterator 함수를 가진) 한 친구의 각 요소를 순회 조회하는 반복문인 for of 을 배웠다.

그런데,
for ... of 의 대상 인스턴스가 객체로 이루어진 배열일 경우,
객체 구조 분해 할당을 사용하여 코드의 가시성을 확보할 수 있다.

const userList=[
  { name:"unchaptered", born:1996 },
  { name:"hallow", born:1983 }
];

// for of 구조분해 미사용
for (const user of userList) {
  console.log(user.name, user.born);
}

// for of 구조분해 사용
for (const {name,born} of userList) {
  console.log(name,born);
}

7. 고급 > Rest 구조 분해

Rest 와 객체 구조 분해 할당을 통해서,
객체의 일부와 나머지로 분리할 수 있습니다.

const userList=[
  { name:"unchaptered", born:1996, meta:{} },
  { name:"hallow", born:1983, meta:{} }
];

// nameList 를 만들고 싶다면, ...
let { name, ...others }=userList;
others=null;

8. 고급 > 유효하지 않은 식별자 명

객체 구조 분해 할당을 통해서,
유효하지 않은 이름의 변수명을 유효한 이름으로 변경하여 사용할 수 있습니다.

const user={
  name:"unchaptered",
  'age':1996,
};

// 다음과 같이 사용 가능
const {name, 'age':age}=user;