JavaScriptで文字列を結合する際にfalsyな値を除外する方法

ここで扱うのは、通常の文字列のほかに、nullやundefined、0、空文字列といったfalsy（偽と評価される）な値が混在している配列です。

このような配列を受け取り、falsyな値を除外しながら各要素を連結し、1つの文字列として返すJavaScript関数を作成してみましょう。

解決のアプローチ

この問題は、Array.prototype.reduce()メソッドを使うことで簡潔に解決できます。reduce()は配列の各要素に対してコールバック関数を順番に実行し、その結果を1つの累積値にまとめるメソッドです。ポイントとなるのは、falsyな値を論理OR演算子（||）によって空文字列へ置き換えるという考え方です。

サンプルコード

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));

出力結果

コンソールには次のように出力されます。

Hereisanexampleofasentence

コードの解説

このコードの核心は (val || "") の部分です。JavaScriptでは、null、undefined、0、空文字列（""）、NaN、false の6つはすべて「falsy」と評価されます。論理OR演算子は左辺がfalsyの場合に右辺の値を返すため、これらの値は自動的に空文字列へと置き換えられます。

その結果、reduce()による連結処理では実際の文字列だけが累積され、"undefined" や "null"、"0" といった不要な文字が混ざらない、クリーンな文章が生成されます。

応用：スペース区切りで結合したい場合

単語の間にスペースを入れたい場合は、先に filter(Boolean) でfalsyな値を除去してから join(" ") を使う方法も便利です。

const sentence = arr.filter(Boolean).join(" ");
// 出力: Here is an example of a sentence

filter(Boolean) は、評価時にfalseとみなされる要素を配列から取り除く定番のイディオムです。用途に応じて両者の方法を使い分けるとよいでしょう。