개념은 알았지만 구체적으로 어떤 경우에 사용하는지는 몰라 안썼는데 이번에 그 필요성을 느낀만큼 클린코드를 위해서 열심히 활용해봐야겠다!

구조분해할당

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

구조분해할당을 하지않으면 불필요한 값들이 추가적으로 변수에 들어게 된다. 원하는 값을 고르기 위해서 사용함!

배열

// 👎
const Id = await api.getUserId();
console.log(Id); // {Id:123, exist:true}

// 👍
const { Id } = await api.getUserId();
console.log(conferenceId); //123

0번째 원소부터 차례로 담긴다.

// 👎
const array = [1, 2, 3];
const first = array[0];
const second = array[1];
console.log(first, second); // 1 2

// 👍
const array = [1, 2, 3];
const [first, second] = array;
console.log(first, second); // 1 2

({ a, b } = { a: 10, b: 20 });
console.log(a); // 10
console.log(b); // 20

나머지 값을 ...rest로 받아서 출력할 수도 있다.

({a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40});
console.log(a); // 10
console.log(b); // 20
console.log(rest); // {c: 30, d: 40}

예제 링크

객체

const obj = {
  name: "John",
  age: 18,
  job: "student",
};

// 👎
const name = obj.name;
const age = obj.age;
const job = obj.job;
console.log(name); // "John"
console.log(age); // 18
console.log(job); // "student"

// 👍
const { name, age, job } = obj;
console.log(name); // "John"
console.log(age); // 18
console.log(job); // "student"

// 순서를 맞추지 않아도 프로퍼티 명이 같은 변수에 자동으로 저장된다.
const { age, name, job } = obj;

참고 블로그