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

 

Do it! 리액트 프로그래밍 정석 책과 다른 책을 참고하며 공부한 내용을 정리하는 글입니다.

 

---

 

객체 확장 표현식

객체 생성 방식을 좀 더 간결하고 동적으로 생성할 수 있음

 

기존 자바스크립트의 객체 확장 표현식 사용 방법

객체와 객체의 값을 선언하기 위해 키 이름과 값을 각각 할당해야 했음.

 

const x = 0;
const y = 0;

const obj = { x: x, y: y};

const randomKeyString = 'other';
const combined = {};
combined['one' + randomKeyString] = 'some value';

const obj2 = {
  methodA: function() { console.log('A'); },
  methodB: function() { return 0; },
};

• obj 에 대입한 객체를 보면 키 이름이 키 값과 동일함
• 연산 결과로 키 값을 대입할 때는 키 값을 지정할 코드를 추가로 작성해야함
• 객체에 함수를 추가할 때는 변수에 함수를 할당해야함.

 

ES6 객체 확장 표현식 사용 방법

 

const x = 0;
const y = 0;
const obj = { x, y };

const randomKeyString = 'other';
const combined = {
  ['one' + randomKeyString]: 'some value',
};

const obj2 = {
  x,
  methodA() { console.log('A'); },
  methodB() { return 0; },
};

• 객체의 변수를 선언할 대 키 값을 생략하면 자동으로 키의 이름과 키 값을 지정함
• 객체 생성 블록 안에 대괄호를 사용해 표현식을 작성하면 계산된 키 값을 생성하고 추가함
• function 키워드를 생략하여 함수를 선언할 수 있음

 

---

구조 분해 할당 (destructuring assignment)

배열이나 객체의 속성을 해체하여 그 값을 개변 변수에 담을 수 있게 하는 자바스크립트 표현식

 

기존 자바스크립트의 구조 분해 사용 방법

 

const list = [0,1];
const item1 = list[0];
const item2 = list[1];
const item3 = list[2] || -1;

const temp = item2;
item2= item1;
item1 = temp;

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

const key1 = obj.key1;
const key2 = obj.key2;
const key3 = obj.key3 || 'default key3 value';
const newKey1 = key1;

 

• 배열의 인덱스를 사용하여 변수에 할당함
• || 연산자를 이용하여 배열의 해당 인덱스에 값이 없으면 기본 값으로 할당
• 배열의 두 값을 치환
• 객체의 키 값을 변수에 할당
• || 연산자를 이용하여 객체의 해당 키 값이 없으면 기본값으로 할당
• 객체의 키 값을 다른 변수에 할당

 

---



ES6 구조 분해와 구조 할당 사용 방법

함수 인잣값을 다루거나 JSON 데이터를 변환할 때 유용하게 사용

 

1. 구조 분해

const list = [0, 1];
const [
  item1,
  item2,
  item3 = -1,
] = list;
[item2, item1] = [item1, item2];

const obj = {
  key1: 'one',
  key2: 'two',
};
const {
  key1: newKey1,
  key2,
  key3 = 'default key3 value',
} = obj;

const [item1, ...otherItems] = [0, 1, 2];
const { key1, ...others } = { key1: 'one', key2: 'two' };
// otherItems = [1, 2]
// others = { key2: 'two' }

• 대괄호 블록 사이에 추출하고자 하는 값의 인덱스 위치에 변수를 배치
• 선언 부호 (=) 를 변수와 함께 사용하며 기본 값을 할당
• 인덱스 위치에 각각 변경할 변수를 교차 배치하여 배열의 두 값을 치환
• 객체의 키 값 (key1) 을 변수 (newKey1) 에 할당
• 클론 ( : ) 부호와 함께 새 변수명을 선언하여 추출된 키 값을 다른 변수명으로 할당

 

2. 구조 할당

구조 할당은 전개 연산자를 함께 사용함

const [item1, ...otherItems] = [0, 1, 2];
const { key1, ...others } = { key1: 'one', key2: 'two' };
// otherItems = [1, 2]
// others = { key2: 'two' }

• 구조 할당 표현식을 이용하여 배열에서 첫 위치의 인덱스값 (item1) 을 추출하고 나머지 값을 전개 연산자로 otheritems에 할당
• 객체의 key 1 키값을 추출하고 나머지 키 값을 포함한 새 객체를 others 에 할당