ES6+ | Destructuring 구조 분해 할당 & 객체 확장 표현식

Destructuring 구조 분해 할당 & 객체 확장 표현식

---

객체 확장 표현식

ES6에 도입되었으며 객체 내부에서 표현식을 사용하거나
보다 편리하게 키와 키값을 저장할 수 있도록 하는 문법

• 객체의 키에 저장할 값을 가진 변수와 키의 이름이 동일한 경우 키 이름만 작성 가능
• 객체 생성 블록 안에 대괄호[]를 사용하여 표현식 작성 가능
• 함수 선언 시 function 키워드 생략 가능

const x = 0;
const y = 0;
const obj = {x, y};
console.log(obj); // {x: 0, y: 0}

const randomKey = 'other';
const comObj = {
    ['the' + randomKey]: 'hello?'
}
console.log(comObj); // {theother: "hello?"}

const funcObj = {
    x,
    A(){console.log('A');},
    B(){return 0;}
}
funcObj.A(); // A
console.log(funcObj.B()); // 0

---

Destructuring 구조 분해 할당

배열이나 객체의 속성을 해체하여
그 값을 개별 변수에 담을 수 있게 하는 ES6 표현식

• 배열에서 값을 추출할 때는 인덱스 순서에 맞게 변수 작성
• 변수에 =(할당 연산자)를 사용해서 기본값 기정 가능
• 객체에서 값을 추출할 때는 키의 이름과 동일한 변수 이름 사용
• 객체에서 값을 추출할 때 변수에 :(콜론) 을 사용하면 새로운 변수 이름으로 키값을 추출할 수 있음

// 배열
const arr1 = [0, 1];
let [one, two, three='empty'] = arr1;
console.log(three);    // empty

console.log(one, two); // 0 1
[one, two] = [two, one];
console.log(one, two); // 1 0

// 객체
const obj = {
    key1: 1,
    key2: 2
}
const { key1, key2:_ } = obj;
console.log(key1); // 1
console.log(_); // 2

---

리액트에서도 자주 사용되는 ES6의 구조 분해 할당과 객체 확장 표현식에 대해 알아보았습니다.

구조 분해 할당을 사용하면 객체나 배열에서 요소를 추출할 때 각각의 값에 직접 접근하지 않아도 됩니다.

또한 객체 구조 분해 할당의 경우 변수명을 다르게 지정할 수도 있기 때문에 유용할 것으로 보입니다.

객체 확장 표현식에서 키와 동일한 이름의 변수를 키 이름만으로 키 값에 저장 가능한 것과

대괄호를 사용해서 표현식을 사용할 수 있는 것에 대해서 알아두면 좋을 것 같습니다.