[JS] ES modules 와 Destructuring Assign(분해구조 할당)

공부하다보니 분해구조할당(Destructuring Assign)이 ES modules와 관련이 있어 정리합니다.

 

Destructuring Assign

Object 각 속성을 개별 할당하는 syntax입니다. 바로 예시를 보시죠.

const obj = { a: '1', b: '2' };
const { a, b } = obj;
console.log(a, b);
// output
// 1 2

const obj = { a: '1', b: '2' };
const item = [];
// 좌변 '{}'을 block 처리되게 하지 않기위해서는 '()'로 묶어야함.
({a:item[0], b:item[1]} = obj);
console.log('item:', item);
// output
// item: [1, 2]

이해가시나요? key를 기반으로  value를 바로 할당하는것이 가능합니다.

변수 선언 keyword(var, let, const)와 사용하면 변수에 할당이 가능하고(1번쨰 예시)

아니라면 소괄호'()'를 이용해 key에 상응하는 변수에 할당을 할 수 있습니다.(2번째 예시)

 

이제 ES Modules를 확인하겠습니다.

ES Modules

export 구문과 import 구문을 확인해봅시다. import 2가지 예시를 보겠습니다.

// vue-router/index.js
export function createRouter() {...};
export function createWebHistory() {...};

예시1

import * as router from 'vue-router';

// 사용
router.createRouter();
router.createWebHistory();

예시2

import { createRouter, createWebHistory } from 'vue-router';

// 사용
createRouter();
createWebHistory();

 

어떤가요? 예시1은 객체 형태로 받아서 속성으로 접근하는 반면 예시2는 Destructuring Assign을 통해서 개별 할당을 하여

바로 사용이 가능합니다.

결론

처음 ES Modules를 접했을때 거부감이 다른 것들을 알아갈수록 친숙한 개념으로 다가오네요 ㅎㅎ

이상입니다.