🧐
JavaScriptのimportの「{}」ってなに？
背景
最近、JavaScriptやTypeScriptを勉強していて、import文で「{}」（中括弧、braces）
がある場合とない場合の違いがわからず、気持ち悪かったので調べてみました。
調べた結果
- importの{}は「名前つきインポート」
- 名前つきエクスポートされたオブジェクトの名前を指定してインポートする場合に使う
- import時に、
{ xxx as yyy }とすることでimport側で任意の変数名にすることができる
export-sample.js
const foo = "named export foo";
const bar = () => {
console.log('named export bar');
}
// 名前つきエクスポート
export { foo, bar };
import-sample.js
// 名前つきインポート
import { bar, foo } from './export-sample.js';
// 以下のようにfooをfとしてインポートもできる
// import { foo as f } from './export-sample.js';
console.log(foo);
console.log(bar());
Discussion