Destructure 사용하기

es6로 넘어 오면서 object나 array를 사용하는 코드가
아주 간결해 졌다고 합니다.
어떻게 간결해 졌는지 알아 봅시다.

object 간단하게 표현하기

destructure를 하기 전에 object 간단하게 표현 하기를 먼저 알아야 합니다.
es6 이전에는 object를 만들 때 아래와 같이 만들었습니다.

var apple = "사과";
var banana = "바나나";

var fruit = {
  apple: apple,
  banana: banana
};

이제 간결해진 표현식입니다.

let apple = "사과";
let banana = "바나나";

let fruit = {apple, banana};

object destructure

es6이전에는 object를 아래 처럼 분해 했습니다.

var fruit = {
  apple: apple,
  banana: banana
};

function saleFruit(fruit){
  console.log(fruit.apple, fruit.banana, "를 판매하였습니다.");
}

saleFruit(fruit)

좀 더 편하게 분해 해보겠습니다.

let fruit {
  apple: "사과",
  banana: "바나나"
};

const saleFruit = (fruit) => {
  let {apple, banana} = fruit;
  console.log(apple, banana, "를 판매하였습니다.");
}

saleFruit(fruit)

중첩 object destructure

let fruit = {
  apple: {green: "초록사과", red: "빨간사과"},
  banana: "바나나",
};

const saleFruit = (fruit) => {
  let {apple: {red}, banana} = fruit;
  console.log(red, banana, "를 판매하였습니다.");
}

saleFruit(fruit)

array destucture

let fruit = ["apple", "banana", "grape"]
// 첫번째 값만 가져오기
let [one] = fruit;
console.log(one)
>> apple

// 두번째 값만가져오기
let [,two] = fruit;
console.log(two)
>> banana

// 다 가져오기
let [one, two, three] = fruit;
console.log(one)
>> apple
console.log(two)
>> banana
console.log(three)
>> grape