named exportとdefault exportの違いの整理

named exportとは？

named export(名前付きエクスポート)とは、以下のように、
exportというキーワードを付与して、特定のモジュール内の変数や関数をexportすることです。

以下のように個別にexportすることもできますし、

export const foo = 1;
export const bar = () => console.log("サンプル");

予め宣言しておいたものをまとめてexportすることもできます。

const foo = 1;
const bar = () => console.log("サンプル");

export { foo, bar };

別モジュールからのimportは以下のように行います。
※中括弧の中にimportする変数や関数などの名前を書かないとエラーになります。
これは、1つだけimportする場合も同じです。

import { foo, bar } from './module.js';

//import foo from './module.js';とは書けない 
import { foo } from './module.js';

あまり使う機会は無いように思いますが、asを用いて別名(エイリアス)を付与してimportもできます。

import { foo as anotherFoo } from './module.js';

default exportとは？

default exportとは、以下のように、
export defaultというキーワードを付与して、特定のモジュール内の変数や関数をexportすることです。

named exportとは異なり、1つのモジュールにつき1つしかdefault exportは用いることはできないという特徴があります。

以下のようにモジュールの末尾にexport defaultしたい変数名などを書くこともできますし、

const foo = 1;
export default foo;

export defaultしたい処理に直接書くこともできます。

export default 1;

別モジュールからのimportは以下のように行います。
named exportとの違いは{}(中括弧)を使わないことです。

import foo from './module.js';

asを使わなくても別名(エイリアス)でimportできるという点は、
named exportとの差です。
※1モジュールから1つしかdefault exportできないので、
何に別名をつけたか判別できるためできると思われます。

// 以下のようにas無しでエイリアスを付与できる
import anotherFoo from './module.js';

named exportとdefault exportは併用できるか

併用できます。(使う機会はほぼないと思いますが、、、)
コードの例としては以下になります。

export const foo = 1;
export const bar = () => console.log("テスト");
const baz = ["foo", "bar", "baz"];

export default baz;

importする側では以下のようにimportします。

default exportに関しては中括弧なしでimportし、
named exportに関しては中括弧の中にimportする対象を記載するのは変わりません。

import baz, { foo, bar } from './module.js';

named exportとdefault exportのどちらを使うべきか

named exportとdefault exportのそれぞれにメリットとデメリットがあるので、
プロジェクトごとに判断すれば良い話だと思います。

個人的には、エディタの補完機能が充実しているnamed exportの方が楽で良いと思いますし、
named exportを使うべきという論調が多数を占めるように感じます。
(補完機能のおかげで勝手にimportしてくれるのはありがたいと思います。)

また、同じモジュールから複数の値をexportできる点も便利に働くことが多いと思います。
(同じ機能の処理でも、呼び出し側で条件ごとに呼び出す処理を変えたい場合などが考えられると思います。
このような場合、同じモジュールに書かれている方が仕様の把握もスムーズかと思います。)

ただ、同じモジュールから複数の値をexportできるということは、
本来であればそのモジュールに書くべきではない処理を書くということが許容されるということでもあるので、
コードの可読性に影響を与えるリスクがあるとも言えます。
(上記があまりにも気になるようであればnamed exportの使用を制限するようなプロジェクトのルールにすれば良いと思います。)