[자바스크립트] 객체 확장 표현식과 구조 분해 할당

Javascript

ES6 이후로 자바스크립트에 객체 확장 표현식과 구조 분해 할당이 추가되면서 객체를 다루기가 한결 수월해졌다.

 

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

기존

let x = 0
let y =0

let obj = {x:x, y:y} //Original

let obj2 = {method1: function(){console.log("Method 1")}} //Original

let key1 = 'key1'
let combined = {}; combined[key1 + 'key2'] = 'abc' //Original

console.log(obj)
console.log(obj2)
console.log(combined)

객체 확장 표현식

let x = 0
let y =0

let obj = {x, y} //Enhanced

let obj2 = {method1(){console.log("Method 1")}} //Enhanced

let key1 = 'key1'
let combined = {[key1 + 'key2']: 'abc'} //Enhanced

console.log(obj)
console.log(obj2)
console.log(combined)

확장 표현은 크게 세가지로 정리할 수 있다.

 

1. 객체를 선언할 때 키 값을 생략할 수 있게 되었다. (키 값은 키의 이름을 따라 자동 설정됨)

2. 객체를 선언할 때 function 키워드를 생략할 수 있게 되었다. (변수에 함수를 할당하지 않아도 된다)

3. 객체를 선언할 때 대괄호를 이용하여 표현식을 작성하면 동적으로 키 값을 설정할 수 있다.

 

 

구조 분해 할당(Destructing Assignment)

개발을 하다보면 객체나 배열을 넘겨주고 받아올 상황이 빈번하다. 그런데 이때 객체나 배열 전체가 아니라 일부 데이터만이 필요한 상황도 매우 잦다. 이런 상황에 매우 유용한 문법이 바로 구조 분해 할당이다. 여기서 영단어 'destructure'는 어원을 통해 알 수 있듯이 '구조를 해체하다'라는 뜻인데, 그 의미 그대로 객체 혹은 배열을 쪼개서 할당해준다. 따라서 해체된 대상은 그대로 유지된다.

let arr = ['Hello', 'World']
let [first, second] = arr
console.log(`First: ${first}, Second: ${second}`)

구조 분해 할당 출력 결과

문법은 위와 같이 매우 간단하다. 대괄호 블록 사이에 변수를 배치하되, 추출하려는 값의 인덱스 위치에 맞춰주자. 그리고 할당 연산이므로 할당 연산자(=)로 연결해주면 끝이다.

 

변수 교환

let one = 1;
let two = 2;

[one, two] = [two, one];
console.log(`${one} ${two}`); //one: 2, two: 1

구조 분해 할당을 활용하면 위와 같이 두 변수의 swap을 간단히 처리할 수도 있다. 임시 배열을 만들어서 구조 분해 할당식을 통해 변수에 담긴 값을 바꿔주는 방식이다.

 

나머지 요소 처리하기

let [item1, ...otherItems] = [1, 2, 3, 4]
console.log(item1) //item1: 1
console.log(otherItems) //otherItems: [2,3,4]

구조 분해 할당은 전개 연산자와 궁합이 아주 좋다. 하나와 나머지를 구분짓고 싶을 때, 특정 요소는 단일 변수로 빼내오고 나머지 요소는 다시 배열로 엮어버릴 수 있기 때문이다.