デフォルト export

export default という記述が、モジュールファイルに1回だけ記述出来る。

サンプルコード1 - 関数編

helloWorld.js

export default function HelloWorld() {
    return 'Hello World!';
}

index.js

// helloWorld.js に記述されているメソッド名は HelloWorld() だが、好きな名前を付けられる。
import TekitouFunctionName from "./helloWorld.js";

console.log(TekitouFunctionName);
// コンソール出力
// Hello World!

サンプルコード2 - 定数編

HelloWorld.js

export default const helloWorld = 'Hello World!';

index.js

// 好きな名前を付けられる
import TekitouConstName from "./helloWorld.js";

console.log(TekitouConstName);
// コンソール出力
// Hello World!

エラーの example

ちなみに複数あるとエラーが発生します。

export default function HelloWorld() {
    return 'Hello World!';
}

// 2つ目の export default のためエラー！！！！！！
export default function OhayouWorld() {
    return 'Ohayou World!';
}

デフォルト export の利点

import の際に好きな名前を付けられる。名前付き export は出来ません。
該当モジュール内で一番重要な export を明確にできる。まさか一番重要という訳ではない export に default は付けませんよね？

名前付き export

名前付き export は複数指定可能です
モジュール名の関数名、定数名などをそのまま指定する必要があります。

サンプルコード

helloWorld.js

export function HelloWorld() {
    return 'Hello World!';
}

export function OhayouWorld() {
    return 'Ohayou World!';
}

export const OyasumiWorld = 'Oyasumi World!';

index.js

// 指定されたメソッド名、定数を記述する。
import {
  HellowWorld, 
  OhayouWorld,
  OyasumiWorld
} from "./helloWorld.js";

console.log(HellowWorld);
// コンソール出力
// Hello World!
console.log(OhayouWorld);
// コンソール出力
// Ohayou World!
console.log(OyasumiWorld);
// コンソール出力
// Oyasumi World!

名前付き export のエイリアス

名前付き exportはインポートの際にエイリアスを付与することが可能です。
これがあるとデフォルト export の利点がないのでは？

import {
  HellowWorld as ohiru, 
  OhayouWorld as asa,
  OyasumiWorld as yoru
} from "./helloWorld.js"

名前付き export を一括 import

該当するモジュール内の名前付き export を一括で import します。
これがあるとデフォルト export の（略

import * as helloWorld from "./helloWorld.js"

名前付き export の利点

上で書いてきた通り、細かい import の指定が可能

デフォルト export と名前付き export は混在できる

デフォルト export の利点に「一番重要な export を明確に出来る」とは書きましたが、フロントエンド弱者な僕は混在させる利点が全く分かっていません。なんでだろ。

HelloWorld.js

// デフォルト export
export default function HelloWorld() {
    return 'Hello World!';
}

// 名前付き export
export function OhayouWorld() {
    return 'Ohayou World!';
}

index.js

// デフォルト export を import。好きな名前付けられる。
import TekitouFunctionName from "./helloWorld.js";
// 名前付き export を import。名前は指定される。
import {
  OhayouWorld
} from "./helloWorld.js";

console.log(TekitouFunctionName);
// コンソール出力
// Hello World!
console.log(OhayouWorld);
// コンソール出力
// Ohayou World!

まとめ

僕も 「JavaScript 何も分からん」 状態のとき、「 import する際の中括弧有り無しは何が違うんだよ！？」と憤った記憶があるので何となく懐かしい気持ちになりました。