Destructuring Assignment?

Destructuring Assignment

구조 분해 할당이라 하며, 자바스크립트에서 가장 유용하고도 많이 쓰이는 문법이라고 한다.
구조 분해 할당 문법은 배열 혹은 객체에서 값으날 propery(?)를 분해하여 손쉽게 별도의 변수에 담을 수 있도록 해주는 것이다.
지금까지 배운 것으로 추측한다면 Query 중 조회 및 수정기능을 위한 부분인것 같다.(아닐 가능성도 많다.)

몇 가지 예를 보며 참고해 보자.

1. 배열에서 구조 분해 할당

let [a, b] = [2, 5]
console.log(a) // 2
console.log(b) // 5

//undefined 일 때는 기존 값을 사용 한다.
let [a=1, b=2] = [2]
console.log(a) // 2
console.log(b) // 2

위 같이 배열 별로 각 변수에 할 당하기 위해 손쉽게 쓰인다.
다른 예로

//배열 선언 후 할당한다.
let arr = [1,2,3,4,5]
let [a, b, c, d, e] = arr //[1,2,3,4,5]

//혹은 필요한 변수만 선언 가능하다.
let [a, b] = arr // [1,2,3,4,5]
console.log(a) // 1
console.log(b) // 2

//스프레드연사자를 통해서 나머지 할당도 가능하다.
let [a, b,...rest] = arr // [1,2,3,4,5]
console.log(a) // 1
console.log(b) // 2
console.log(rest) // [3,4,5]
//rest는 변수명일뿐 나머지를 할당하는 의미이다.

//함수가 반환한 배열 할당.
function f() {
  return [1, 2];
}

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

//일부 반환값 무시하기.
let arr = [1,2,3]
let [a, ,b] = arr
console.log(a) // 1
console.log(b) // 3

2. 객체 구조 분해

여기서 부터는 이해한 만큼만 올리도록 하겠다.

// 새로운 변수 이름으로 할당하기
const o = {p: 30, q: false}
const {p: b, q: a} = o

console.log(a) // false
console.log(b) // 30

//배열과 같이 undefined 인 경우 기존값을 가져온다.
let {a = 10, b = 5} = {a: 3};
console.log(a); // 3
console.log(b); // 5

//for -of 사용한 객체 구조 분해이다.

var people = [
  {
    name: "Mike Smith",
    family: {
      mother: "Jane Smith",
      father: "Harry Smith",
      sister: "Samantha Smith"
    },
    age: 35
  },
  {
    name: "Tom Jones",
    family: {
      mother: "Norah Jones",
      father: "Richard Jones",
      brother: "Howard Jones"
    },
    age: 25
  }
];

for (var {name: n, family: { father: f } } of people) {
  console.log("Name: " + n + ", Father: " + f);
}

// "Name: Mike Smith, Father: Harry Smith"
// "Name: Tom Jones, Father: Richard Jones"


//객체 구조 분해에서 rest

let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40}
a; // 10
b; // 20
rest; // { c: 30, d: 40 }

이해한 예시만 올렸으며, 아래 참고링크에 더 많은 예시가 있다.

참조

[mdn web docs : Destructuring assignment, MDN, 2022년03월17일 접속]https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
[mdn web docs : for..of, MDN, 2022년03월17일 접속]https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/for...of