구조 분해 할당 (배열, 객체)

배열

기본적인 구조 분해 할당

let arr = ["hello", "world", "core", "javascript"];
let [first, second] = arr;

first; // "hello"
second; // "world"

 

rest / spread 문법을 배열 분해 적용

let arr = ["hello", "world", "core", "javascript"];
let [start, ...rest] = arr;

start; // "hello"
rest; // ["world", "core", "javascript"]

 

다음과 같은 문법은 사용할 수 없다. 할당하기 전 왼쪽에는, rest 문법 이후에 쉼표가 올 수 없다.

let [first, ...middle, last] = array

 

객체

객체의 단축 문법

const name = "댕댕이";
const age = 5;

const dog = {
  name,
  age,
  weigth: 6,
};

dog; // {name: "댕댕이", age: 5, weigth: 6}

 

객체를 분해

const dog = { name: "댕댕이", age: 5, weigth: 6 };

const { name } = dog;

name; // "댕댕이"

 

rest / spread 문법을 객체 분해에 적용(1)

const dog = { name: "댕댕이", age: 5, weigth: 6 };

const { name, ...args } = dog;

name; // "댕댕이"
args; // {age: 5, weigth: 6}

 

rest / spread 문법을 객체 분해에 적용(2)

const dog = {
  name: "댕댕이",
  major: "경영학과",
  lesson: "마케팅론",
  grade: "A+",
};

function getSummary({ name, lesson: course, grade }) {
  return `${name}님은 ${grade}의 성적으로 ${course}을 수강하였습니다.`;
}

getSummary(dog); // "댕댕이님은 A+의 성적으로 마케팅론을 수강하였습니다."

 

객체 덮어쓰기

Spread 순서에 따라 값이 다르다.

 

<1>

const dog = {
  name: "댕댕이",
  major: "경영학과",
  lesson: "마케팅론",
  grade: "A+",
};

const changeDog = {
  ...dog,
  name: "야옹이",
  grade: "F",
};

changeDog; // {name: "야옹이", major: "경영학과", lesson: "마케팅론", grade: "F"}

 

<2>

const dog = {
  name: "댕댕이",
  major: "경영학과",
  lesson: "마케팅론",
  grade: "A+",
};

const changeDog = {
  name: "야옹이",
  grade: "F",
  ...dog,
};

changeDog; // {name: "댕댕이", grade: "A+", major: "경영학과", lesson: "마케팅론"}