Just do IT

思うは招く

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

JavaScript

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

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 の学習中に少し詰まった部分なのでアウトプットしておく。

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

参考