[Javascript] 비구조화(구조분해) 할당 미세(?) 팁

자바스크립트를 다루다보면 비구조화 할당은 많이 접해보셨으리라 생각됩니다.

리액트 스터디 중 mdn web docs 를 보는데, 기본적인 비구조화 할당에 대한 글은 많이 봤지만 아래 내용에 관한 글은 본 기억이 없어서 작성하게 되었습니다. 

(제가 못 본 걸 수도,,,)

 

 

선언 없는 할당

var a, b;
({a, b} = {a: 1, b: 2});

할당 문을 둘러싼 괄호()는 선언 없이 객체 리터럴(object literal) 비구조화 할당을 사용할 때 필요한 구문입니다.

{a, b} = {a:1, b:2}는 유효한 독립 구문이 아닙니다. 좌변의 {a, b}이 객체 리터럴이 아닌 블록으로 간주되기 때문입니다.

하지만, ({a, b} = {a:1, b:2})는 유효한데, 해당 문법은 var {a, b} = {a:1, b:2}와 같습니다.

괄호() 표현식 앞에는 세미콜론이 있어야 합니다. 그렇지 않을 경우 이전 줄과 연결되어 함수를 실행하는데 이용될 가능성이 있습니다.

객체 리터럴(object literal) ?
객체 리터럴이란 중괄호{}로 감싸진 속성들(속성이 없거나 여러개 일 수 있음)의 목록입니다.
const object1 = {} 의 오른쪽 항인 {}도 객체 리터럴이며,
const object2 = { a: 'a', b: 'b' } 의 오른쪽 항인 { a: 'a', b: 'b' }도 객체 리터럴입니다.

 

 

함수 매개변수의 기본 값 설정하기

ES5 버전

ES5 버전에서 매개변수의 기본값을 설정하려면 아래와 같이 여러 줄의 코드를 작성하여야 했습니다.

function drawES5Chart(options) {
  options = options === undefined ? {} : options;
  var size = options.size === undefined ? 'big' : options.size;
  var cords = options.cords === undefined ? { x: 0, y: 0 } : options.cords;
  var radius = options.radius === undefined ? 25 : options.radius;
  console.log(size, cords, radius);
  // 이제 드디어 차트 그리기 수행
}

drawES5Chart({
  cords: { x: 18, y: 30 },
  radius: 30
});

 

ES6 버전

하지만 ES6 버전의 구조분해 할당을 이용하면 매개변수의 기본값을 아래와 같이 간단하게 작성할 수 있습니다.

function drawES2015Chart({size = 'big', cords = { x: 0, y: 0 }, radius = 25} = {}) {
  console.log(size, cords, radius);
  // 차트 그리기 수행
}

drawES2015Chart({
  cords: { x: 18, y: 30 },
  radius: 30
});

위의 drawES2015Chart 함수의 매개변수에서 구조 분해된 좌측 항에 빈 오브젝트 리터럴을 할당하는 것을 볼 수 있습니다. ➡️ {size = 'big', cords = {x: 0, y: 0}, radius = 25} = {}
지금의 형태와 같은(우측 항에 빈 오브젝트 리터럴을 할당) 형식은 단순히 drawES2015Chart()와 같이 어떤 매개변수 없이도 호출할 수 있습니다. 하지만 우변의 빈 오브젝트 할당을 없앤다면, 함수 호출 시 적어도 하나의 인자가 제공되어야만 합니다.
이 함수가 어떠한 매개변수 없이도 호출할 수 있길 원한다면 지금 형태가 유용하고, 무조건 객체를 넘기길 원하는 경우에는 빈 리터럴 객체 할당을 하지 않는 것이 유용할 수 있습니다.

 

 

중첩된 객체 및 배열의 구조 분해

var metadata = {
    title: "Scratchpad",
    translations: [
       {
        locale: "de",
        localization_tags: [ ],
        last_edit: "2014-04-14T08:43:37",
        url: "/de/docs/Tools/Scratchpad",
        title: "JavaScript-Umgebung"
       }
    ],
    url: "/en-US/docs/Tools/Scratchpad"
};

// translations는 중첩된 객체를 구조 분해한 결과
var { title: englishTitle, translations: [{ title: localeTitle }] } = metadata;

console.log(englishTitle); // "Scratchpad"
console.log(localeTitle);  // "JavaScript-Umgebung"

객체 안에 객체가 있는 중첩된 객체 및 배열도 구조 분해하여 받을 수 있습니다.

var { title: englishTitle, translations: [{ title: localeTitle }] } = metadata; 에 대한 설명은 아래와 같습니다.

• title: englishTitle ➡️ 객체에 있는 title을 englishTitle의 이름으로 받습니다.
• translations: [{ title: localeTitle }] ➡️ 우선 객체에 있는 translations를 받고 [{ }] 구조에 들어있는 값 title을 localeTitle의 이름으로 받습니다.

 

 

계산된 속성 이름과 구조 분해

아래와 같이 변수에 객체 속성 이름을 넣어서 구조 분해할 수도 있습니다.

let key = "z";
let { [key]: foo } = { z: "bar" };

console.log(foo); // "bar"

 

위 코드의 { [key]: foo } 부분이 처음에는 이해가 잘 되지 않았지만, 객체 속성의 접근 방식을 생각해보면 이해할 수 있습니다.

const a = { b: "b", c: "c" } 라는 객체가 있다면, 해당 객체 속성 aㅇ의 접근 방식은 아래와 같은 방법이 있습니다.

1. 온점.로 접근하는 방식 : a.b
2. 배열의 index 접근 방식과 같은 방식 : a["b"]
   • 다만 해당 대괄호[] 안에는 문자열이 들어가야 합니다.

위의 2번째 방식을 사용하기 때문에 구조분해 코드의 { [key]: foo } 가 가능한 것입니다.

위 방식은 Javascript의 배열도 결국 배열을 흉내낸 객체이기 때문에 가능한 방식입니다. (이 부분에 관련된 내용은 Javascript 배열 객체 같은 키워드로 구굴링 해보시면 쉽게 찾아보실 수 있습니다.)