Destructuring with JavaScript

✨ Destructuring in Javascript

Destructuring, Destructuring assignment
배열과 객체에서 데이터를 추출해내기 더 쉽게 만드는 자바스크립트 기능
= synthetic sugar (원래도 할 수 있는 것을 더 쉽게 만드는 문법)

Array destructuring

let cars = ['ferrari', 'tesla', 'cadillac'];

let car1 = cars[0];
let car2 = cars[1];
let car3 = cars[2];

console.log(car1, car2, car3) // ferrari tesla cadillac

이렇게 각각 변수명을 설정해줄 수 있지만, desctructuring을 사용하면

let cars = ['ferrari', 'tesla', 'cadillac'];

let [car1, car2, car3] = cars;

console.log(car1, car2, car3) // ferrari tesla cadillac

이렇게 훨씬 더 쉽게 할 수 있음!

Object destructuring

할당할 변수명과 원래 key명을 일치시키면 객체도 할 수 있음

let jobs = { cs: 'programmer', ds: 'chef', hy: 'writer' };
let { cs, ds, hy } = jobs;

Function Parameter destructuring

함수의 Argument로 넘겨주는 객체에서 원하는 프로퍼티만 쏙쏙 뽑아올 수 있음

let namju = {
  name: 'Namju',
  job: 'unemployed person',
  city: 'seoul',
  birthYear: '1994'
}

const printPersonInfo = ({name, job}) => {
  return `This person's name is ${name}, and is a ${job}`;
}