JavaScriptでnull値を含む配列を文字列に変換する方法

文字列の値とnullishな値（null や undefined）が混在した配列があるとします。

ここでは、この配列を受け取り、nullishな値を除外しながら配列の要素を結合して文字列を返すJavaScript関数を作成する必要があります。

以下は、null と undefined の値を含む配列の例です。

const arr = ["Here", "is", null, "an", undefined, "example", 0, "", "of", "a", null, "sentence"];

それでは、この関数のコードを書いてみましょう。

コード例

const arr = ["Here", "is", null, "an", undefined, "example", 0, "", "of",
"a", null, "sentence"];
const joinArray = arr => {
    const sentence = arr.reduce((acc, val) => {
        return acc + (val || "");
    }, "");
    return sentence;
};
console.log(joinArray(arr));

コードの解説

この関数のポイントは reduce() メソッドと OR演算子（||） の組み合わせです。

reduce() メソッドは配列の各要素に対してコールバック関数を実行し、単一の値に集約します。ここでは初期値として空文字列（""）を設定し、各要素を順番に連結していきます。

val || "" の部分が重要です。JavaScriptでは、null、undefined、0、空文字列（""）はすべてfalsyな値として扱われるため、これらの値の場合は空文字列に置き換えられます。その結果、nullishな値は自動的にスキップされ、有効な文字列だけが連結されます。

出力結果

コンソールには以下の出力が表示されます。

Hereisanexampleofasentence

このように、null や undefined を含む配列からも、簡単に文字列を生成することができます。なお、要素間にスペースを挿入したい場合は、acc + (val || "") の部分を acc + (val ? val + " " : "") のように変更することで対応できます。