【JavaScript】数値・文字列・falsy値が混在する配列から最大の数値を取得する方法

概要

数値、文字列、さらには undefined や null、NaN といった falsy な値が混在する配列を受け取り、その中から最大の数値を返す JavaScript 関数を作成してみましょう。

たとえば、入力配列が次のような場合を考えてみます。

const arr = [23, 'hello', undefined, null, 21, 65, NaN, 1, undefined, 'hii'];

この場合、期待される出力は 65 です。それでは、実際のコードを見ていきましょう。

コード例

const arr = [23, 'hello', undefined, null, 21, 65, NaN, 1, undefined, 'hii'];
const pickBiggest = arr => {
    let max = -Infinity;
    for(let i = 0; i < arr.length; i++){
        if(!+arr[i]){
            continue;
        };
        max = Math.max(max, +arr[i]);
    };
    return max;
};
console.log(pickBiggest(arr));

出力結果

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

65

コードの解説

この関数の仕組みを順番に説明します。

• まず、変数 max を -Infinity で初期化します。これにより、どれほど小さい数値でも確実に比較・更新できるようになります。
• ループ内では単項プラス演算子 +arr[i] を使って各要素を数値へ変換します。数値形式の文字列は数値に変換されますが、undefined、null、NaN などは falsy な値になります。
• falsy な要素は continue によってスキップされ、有効な数値だけが Math.max() で比較され、最大値が逐次更新されていきます。

このように、型が不揃いな配列でも単項プラス演算子と Math.max() を組み合わせることで、余計な前処理なしに簡潔に最大の数値を取り出すことができます。