Destructuring Assignment?

Destructuring Assignment이란 구조분해할당이라고 합니다. 구조분해할당은 배열(array)또는 객체(object)의 개별 값을 변수로 저장하는 방법입니다.

Array Destructuring

// fruit list
const fruit = ["apple", "peach", "melon", "kiwi"];

// each element
const first = fruit[0];
const second = fruit[1];
const third = fruit[2];
console.log(first); // "apple"
console.log(second); // "peach"
console.log(third); // "melon"

구조분해할당을 사용하지않고 배열의 각각 요소들을 변수로 사용하려면 하나씩 할당해줘야합니다.

기본 할당

// fruit list
const fruit = ["apple", "peach", "melon", "kiwi"];

// each element
const [first, second, third] = fruit;
console.log(first); // "apple"
console.log(second); // "peach"
console.log(third); // "melon"

구조분해 할당으로 각 요소를 변수에 저장하면 한줄로 줄일 수 있습니다.

일부 반환 값 무시

// fruit list
const fruit = ["apple", "peach", "melon", "kiwi"];

// each element
const [first, ,third] = fruit;
console.log(first); // "apple"
console.log(third); // "melon"

또한 두번째 요소를 사용하지 않고 첫번째와 마지막 요소들만 변수로 저장하려면 가운데 요소에 변수를 할당하지 않고 사용하면 됩니다.

변수에 나머지를 할당

// fruit list
const fruit = ["apple", "peach", "melon", "kiwi"];

// each element
const [first, ,...etc] = fruit;
console.log(first); // "apple"
console.log(etc); // ["melon", "kiwi"]

변수로 할당한 나머지 또한 변수로 할당하여 배열로 저장 할 수 있습니다.

변수 값 변환

let male = "si-hyen";
let female = "seo-won";
[male, female] = [female, male];
console.log(male); // "seo-won"
console.log(female); // "si-hyen"

변수로 할당한 값을 구조분해할당으로 변환 할 수 있습니다.

함수가 반환한 배열 할당

function animals() {
  return ["cat", "dog", "horse"]
};

const [cat, ...anotherAnimals] = animals();
console.log(cat) // "cat"
console.log(anotherAnimals) // ["dog", "horse"]

함수가 배열을 반환한다면 그 배열의 값을 구조분해할당 할 수 있습니다.

Object Destructuring

기본 할당

const human = {
  name: "kim",
  age: 25,
  gender: "male",
};

const {name, age, gender} = human;
console.log(name); // "kim"
console.log(age); // 25
console.log(gender); // "male"

객체의 key값을 변수로 사용하여 구조분해할당을 할 수 있습니다.

새로운 변수로 할당

const car = {
  name: "bus",
  color: "blue",
};
const {name: type} = car;
console.log(type); // "bus"

객체의 value를 다른 변수를 이용하여 할당 할 수 있습니다. car객체는 name의 key를 갖고있는데 이를 type이란 변수를 선언하여 할당 할 수 있습니다.

객체의 속성 이름과 구조분해

const keyName = "name";
const {[keyName]: type} = {name: "bus", color: "blue"};
console.log(type); // "bus"

객체의 key값으로 객체리터럴과 비슷하게 구조분해도 가능합니다.

변수에 나머지를 할당

const {name, age, ...rest} = {name: "kim", height: 180, region: "seoul", age: 21};
console.log(name); // "kim"
console.log(age); // 21
console.log(rest); // { height: 180, region: "seoul" }

배열과 비슷하게 할당하지 않은 나머지 값을 객체로 저장가능합니다.

추가로

const human = {
  name: "kim",
  age: 25,
  gender: "male",
};

const {age, gender, name} = human;
console.log(name); // "kim"
console.log(age); // 25
console.log(gender); // "male"

객체는 순서와 상관없기 때문에 할당할 변수를 객체의 순서대로 할당하지 않아도 됩니다.