[Java Script] 객체 확장 표현식과 구조 분해 할당 📒

객체 확장 표현식 (Enhanced Object property)

ES6 의 객체 확장 표현식을 통해 기존 자바스크립트에서 사용하던 객체 생성 방식을 좀더 간결하고 동적으로 생성 할 수 있다.

기존 객체 정의 방식

const x = 0;
const y = 0;

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

const keyString = "first";
const combined = {};
combined[keyString + "Key"] = "value";
console.log(combined); //{ firstKey: 'value' }
//연산 결과로 키값을 대입할 때는 키값을 지정할 코드를 추가로 작성해야한다.

const obj2 = {
  x: x,
  methodA: function () {
    console.log("A");
  },
  methodB: function () {
    // 객체에 함수를 추가할 때는 변수에 함수를 할당해야 한다.
    console.log("B");
  },
};

ES6 객체 확장 표현식

const x = 0;
const y = 0;

const obj = { x, y };
console.log(obj); // { x: 0, y: 0 }
//객체의 변수를 선언할때 키값을 생략하면 자동으로 키의 이름으로 키값을 지정.

const keyString = "first";

const combined = { [keyString + "Key"]: "value" };
console.log(combined); //{ firstKey: 'value' }
/* 문자열 또는 문자열로 변환 가능한 값을 반환하는 표현식을 사용해 프로퍼티 키를 동적으로 생성할 수 있다. 
단, 프로퍼티 키로 사용할 표현식을 대괄호([])로 묶어야 한다. */

const obj2 = {
  x: x,
  methodA() {
    console.log("A");
  },
  methodB() {
      //function 키워드 생략가능.
    console.log("B");
  },
};

구조 분해 할당(destructuring assignment)

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

기존 방식의 구조 분해 할당

const list = [1, 2, 3];
const idx0 = list[0];
const idx1 = list[1];
const idx2 = list[2];

//배열의 인덱스를 이용하여 변수에 할당.
console.log(idx0, idx1, idx2); // 1 2 3

const obj = {
  key1: "one",
  key2: "two",
};
const key1 = obj.key1;
const key2 = obj.key2; 

// 객체의 키 값을 변수에 할당.
console.log(key1, key2); //one two //one two

ES6 구조 분해 할당

const list = [1, 2, 3];

const [idx0, idx1, idx2] = list;

//대괄호 사이에 추출하고자 하는 값의 인덱스 위치에 변수를 배치함.
console.log(idx0, idx1, idx2); // 1 2 3

const obj = {
  key1: "one",
  key2: "two",
};

const { key1, key2, key3 = "three" } = obj;

//객체의 키 값을 변수에 할당했으며, key3같은 경우, (=)를 통해 기본값을 할당.
console.log(key1, key2, key3); //one two three

구조 분해 할당식은 주로 전개 연산자(Spread Operator)와 함께 사용된다. ES6의 구조 분해와 구조 할당은 함수 인자값을 다루거나 JSON 데이터를 변환할 때 유용하게 사용되므로, 꼭 기억해두도록 하자

const a = [1, 2, 3];
const [first, ...others] = a;

/* 구조 분해 할당식을 통해 배열의 첫 인덱스값을 추출하여 first에 할당하고, 
나머지 값을 전개연산자를 통해 others에 할당. */

console.log(first, others); // 1 [ 2, 3 ]