JavaScriptで配列内の定義済み要素だけを数える方法

JavaScriptでは、配列に含まれる要素を数える際、undefined のような未定義の値が混在していることがあります。このような配列から、実際に値が定義されている要素のみを正確にカウントする関数を作成する方法を解説します。

問題の概要

要素の配列を受け取るJavaScript関数を作成する必要があります。この配列には、いくつかの undefined 値が含まれている可能性があります。

作成する関数は、配列の長さをカウントしますが、そのカウントには定義済みの要素のみを含める必要があります。

解決策：filterメソッドを使った実装

Array.prototype.filter() メソッドを使用すると、undefined の要素を除外した新しい配列を作成できます。その結果の配列の length プロパティを取得することで、定義済み要素の数を求められます。

コード例

const arr = [12, undefined, "blabla", , true, 44];

const countDefined = (arr = []) => {
  let filtered;
  filtered = arr.filter(el => {
    return el !== undefined;
  });
  const { length } = filtered;
  return length;
};

console.log(countDefined(arr));

実行結果

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

4

コードの解説

このコードの動作を順に見ていきましょう。

まず、サンプル配列には6つのスロットがありますが、そのうち1つは undefined、もう1つは空のスロット（ホール）です。filter() メソッドはコールバック関数 el !== undefined を使って、undefined ではない要素だけを残した新しい配列 [12, "blabla", true, 44] を生成します。

最後に、分割代入 const { length } = filtered; で配列の長さを取り出し、結果として 4 が返されます。

より簡潔な書き方

アロー関数の省略記法を使えば、同じ処理を1行で書くこともできます。

const countDefined = (arr = []) => arr.filter(el => el !== undefined).length;

console.log(countDefined([12, undefined, "blabla", , true, 44])); // 4

なお、配列に null や空文字列なども除外したい場合は、比較条件を el != null（あいまい等価）に変更するか、Boolean をフィルターの条件として渡す方法もあります。用途に応じて使い分けるとよいでしょう。