[JS] 구조분해할당 Destructuring assignment

• object : 속성을 가진 값을 저장할때 객체 자료형으로 만든다.
  
• array : 요소들을 순서대로 저장할때 배열 자료형으로 만든다.
  작업을 하다보면 객체나 배열 데이터 전부가 아닌, 일부만 필요한 경우가 있다고 한다.
  이럴때 자료를 변수로 ‘분해’ 할 수 있게 해주는 문법이 [ 구조분해할당 ] 이다.

Array 데이터를 변수에 담기

const arr = [1, 2, 3];
const a = arr[0];
const b = arr[1];
const c = arr[2];

// 위 코드를 아래와 같이 바꿀 수 있다.
const [a, b, c] = arr;

왼쪽에 선언한 변수 명의 갯수와, 배열 요소의 갯수가 맞지 않으면 값이 제대로 할당되지 않으므로
디폴트값을 넣어줄 수 있다.

const arr = [1, 2];

const [a, b, c] = arr;
// c는 undefined

const [a, b, c = 3] = arr;
// c는 3

쉼표를 사용하면, 필요하지 않은 배열의 요소를 버릴 수 있다.

const arr = [1, 2, 3, 4];

const [a, b, , d] = arr;
// 세번째 요소는 필요하지 않음
// a = 1, b = 2, d = 4

Object 데이터를 변수에 담기

const person = {
  name: "Jessie",
  age: 30,
  like: "keyboard",
};

const { name, age, like } = person;

원래 peron.name의 형태로 호출해야하는 값을 변수로 선언해 name 으로 값을 불러올 수 있게 했다.
변수로 선언 시, 순서는 중요하지 않고 해당 속성에 들어있는 값을 가져와 변수로 저장하게 된다.

위 코드는 객체의 속성을 변수명으로 가지고와서 사용하게 되는데,
속성: 변수명 으로 변수명을 원하는대로 바꿀수도 있다.

const { name: n, age: a, like } = person;
// n : Jessie, a : 30, like : keyboard

객체에 없는 값도 추가해줄 수 있는데, 배열에 디폴트 값을 줄때랑은 약간 다르다.
배열은 변수 선언 끝에 = 값의 형태로 일괄 적용할 수 있지만,
객체는 각 속성에 주고싶은 값을 각각 입력해야한다.

const person = {
  name: "Jessie",
  age: 30,
};

const { name, age, like = "keyboard", height = 170 } = person;
// name: Jessie, age: 30, like: keyboard, height: 170

const person = {
  name: "Jessie",
  age: 30,
  height: 160,
};

const { name, age, like = "keyboard", height = 170 } = person;
// name: Jessie, age: 30, like: keyboard, height: 160
// height의 디폴트 값으로 선언한 것은 170이지만, 객체 내부 값이 160이므로 160

속성이 많은 복잡한 객체에서 원하는 값만 뽑아오는 것도 가능하다.

const { name } = person;
//name: Jessie

변수를 객체에 집어넣기

기본적으로 변수를 오브젝트로 만들려면 아래와 같이 할 수 있는데,

onst name = 'Jessie'
const age = 30

const obj = {
    name: name,
    age: age
}
// name: Jessie, age: 30

Destructuring 문법을 이용하면 아래와 같이 바꿀 수 있다.

const obj = { name, age };
// 변수명과 속성명이 동일하면 name: name을 name으로 생략 가능

함수의 파라미터에서 활용하기

함수에 객체를 활용하고 싶으면 아래와 같이 할 수 있다.

const obj = {
  name: "Jessie",
  age: 30,
};

function logText(name, age) {
  console.log(name);
  console.log(age);
}

logText(obj.name, obj.age);
// Jessie 와 30 각각 출력

Destructuring 문법을 활용해 정리하려면
파라미터를 { } 괄호로 묶어주고, 함수 실행 시 객체 이름만 써주면 된다.

const obj = {
  name: "Jessie",
  age: 30,
};

function logText({ name, age }) {
  console.log(name);
  console.log(age);
}

logText(obj);
// Jessie 와 30 각각 출력

배열도 동일하게 적용해볼 수 있다.

const arr = ["Jessie", 30];

function logText([name, age]) {
  console.log(name);
  console.log(age);
}

logText(arr);
// Jessie 와 30 각각 출력

지금 듣는 강의에 나오는 수준으로만 정리했는데
훨씬 디테일하게 활용하는 방법이 많다!
구조분해할당