[JavaScript]export default vs named export

結論

基本、named exportを使用すべき。

参照

https://engineering.linecorp.com/ja/blog/you-dont-need-default-export

理由

エクスポートファイル側で export defaultによって関数やクラスを定義しているとインポートファイル側で名前を自由に変えることが出来てしまう。

具体例

export defaultによってエクスポートとされているhelloName関数は
main.jsファイルとsub.jsファイルによってインポートされ使用されているが
main.js側でもsub.js側でも自由に設定した名前でインポート出来てしまうのは望ましくない。

# infomation.js
const sayFullName = (fullName) => {
   console.log(`My name is ${fullName}`)
}
export default sayFullName;

# main.js
import displayFullName from "./infomation.js";

displayFullName('noydmt');

# sub.js
import helloFullName from "./infomation.js";

helloFullName('noydmt');

仮にinfomation.js内部のsayFullName関数(= フルネームを名乗る関数)がsayFirstName(= 名前を名乗る関数)に変更された時、main.js、sub.jsにて自由に定義された関数名(それぞれdisplayFullName、helloFullName)はエラーにならず、不適切な関数名として残り続けてしまう可能性がある。