ES6 デフォルトで定義された関数をインポートするときは {} をつけなくてもいい

「デフォルトのエクスポートをインポートする場合、{}は必要ない」ということを学んだのでメモしておきます。

`export default`で定義されている関数を読み込む場合

export default functionで定義された関数をimportするとき、{}は必要ない。

hello.js

export default function hello (msg) {
  document.body.innerHTML = msg
  console.log(msg)
}

index.js

import hello from './hello';

デフォルトで定義された関数は{}をつけなくてもいい。

モジュールからエクスポートをひとつインポートしたい場合は、{}をつける。

hello.js

export function hello (msg) {
  document.body.innerHTML = msg
  console.log(msg)
}

// 他にもいくつかの関数が定義されているとする

{}をつけてインポートする。

index.js

import { hello }  from './hello';

あんまりこういったケースはないかもしれないけど、ES Modules の学習中に少し詰まった部分なのでアウトプットしておく。

それにしても、「デフォルトのエクスポートをインポートする場合、{}は必要ない」って結構めちゃくちゃな日本語だな😅