【JavaScript】 配列総和（合計）を求める関数がないので自作する

JavaScriptで配列要素の合計を求めようと思ってメソッドを探したのですが、標準関数として用意されていませんでした。
どうやら自作するしかないようです。

そこで今回は、配列要素の合計を求める関数を自作してみます。

今回は引数として配列だけではなくて、数値の羅列でも総和が求められる関数を作成しました。

const sum =
        (...data) => ( Array.isArray(data[0]) ? data[0] : data )
                                .reduce( ( a ,b ) => a + b , 0);

配列を引数として指定する例です。

const arry = [ 5, 2, 4, 3];
console.log( sum( arry ) ); // 結果:14

数値の羅列を引数として指定する例です。

console.log( sum( 1, 5, 10 ) ); // 結果:16

次は、引数として複数の配列と数値を指定できるパターンです。

const sum2 =
        (...data) => data.reduce(
              ( a ,b ) => a + 
　　　　　　　　　　　( Array.isArray(b) ? b.reduce( (b1 , b2 ) => b1+b2) : b )
            , 0);

const arry1 = [ 1, 2, 3];
const arry2 = [ 4, 5, 6];

console.log( sum2( arry1, 10, arry2 ) ); // 31

上の項目で最初に挙げたsum関数の解説をしてみます。

わかりやすいように、同じものを再掲しておきます。

const sum =
        (...data) => ( Array.isArray(data[0]) ? data[0] : data )
                                .reduce( ( a ,b ) => a + b , 0);

配列要素の合計はreduceを使用する

配列内の要素を合計する場合、直感的には次のようなArray.prototype.forEachで配列から要素を一つずつとり出して合計するコードが考えられます。

const sum = data => {
        let goukei = 0;
        data.forEach( e => goukei += e );
        return goukei;
    };

const arry = [ 5, 2, 4, 3];

console.log( sum( arry ) ); // 14

これでも特に問題はありません。

しかしArray.prototype.reduce()を使うと、もっと簡潔に書くことができます。

const sum = data => data.reduce( ( a ,b ) => a + b , 0);

const arry = [ 5, 2, 4, 3];

console.log( sum( arry ) ); // 14

reduce()の2番目の引数は計算の初期値です。
1番目の引数はコールバック関数です。

コールバック関数1番目の引数は初期値を、2番目の引数は配列要素が順番に渡されます。
そしてコールバック関数のリターン値が、次の要素のコールバック関数呼び出しの初期値として渡されます。

つまり、上の例では次のような計算が行われています。

コールバック関数1回目: 0 + 5 = 5
コールバック関数2回目: 5 + 2 = 7
コールバック関数3回目: 7 + 4 = 11
コールバック関数4回目: 11 + 3 = 14

この結果、reduce()のリターン値は14になります。

ちなみにreduce()の2番目の引数は省略可能です。
省略した場合は、1回目のコールバック関数呼び出しで1番目の引数に配列の0番目の要素を、2番目の引数に配列の1番目の要素が渡されます。

引数に配列または数値の羅列指定可能にする

次に引数として配列または数値の羅列指定を可能にする仕組みを説明してみます。

アロー関数定義の引数定義を見ると、次のようになっています。

( ...data )

この ... は、レスト構文で、関数呼び出し時に羅列された引数を配列にまとめることができます。

例えば次のようにsum()関数を呼び出すとします。

sum( 1 , 2 , 3 );

すると、受け取った側では次のように配列にまとめられます。

data : [ 1 , 2 , 3]

配列を引数として指定した場合は、次のようになります。

sum( [ 1 , 2 , 3 ] );
→ data : [ [ 1 , 2 , 3] ]

わかりにくいですが、dataの0番目の要素に、配列[ 1 , 2 , 3] がセットされています。

次に、コード本体では3項演算子が使用されています。

( Array.isArray(data[0]) ? data[0] : data )

これは、配列dataの0番目の要素が配列だったらその要素を、配列でなければdataを後に続くreduce()の計算対象としています。

今回挙げたコードは、データとして数値が与えられることが前提となっています。

しかし文字列などを指定しても、特にエラーにはなりません。

console.log( sum( 5, "10", "abc", 4, {} , undefined) );
// 結果: 510abc4[object Object]undefined

オブジェクト( {} )は、計算時文字列"[object Object]"に変換されます。
そのため、次のような流れで合計演算がおこなわれます。

1回目： 0 + 5 = 5 ← 数値
2回目： 5 + "10" = "510" ← 文字列
3回目： "510" + "abc" = "510abc" ← 文字列
4回目： "510abc" + 4 = "510abc4" ← 文字列
5回目： "510abc4" + "[object Object]" = "510abc4[object Object]" ← 文字列
6回目： "510abc4[object Object]" + "undefined" = "510abc4[object Object]undefined" ← 文字列

計算結果のチェック

上の結果が許容できない場合、関数の結果をチェックする必要があります。

const isNumber = n => typeof n === "number" || n instanceof Number;

console.log( isNumber( sum(1 , 5 , 10) ) ); // true
console.log( isNumber(sum(5,"10","abc",4,"def",{},undefined)) ); // false

数値かどうかをチェックする関数にisNaNがあります。
isNaNは数値でないときにtrueを返しますが、"123"などの数値文字列も123などの数値と同じ結果を返します。

JavaScriptは数値と文字列を足し算すると、文字列として結合されます。

例:5 + "123" + "5" = "51235"

結果は数値ですが、期待した合計値になっていません。
そのため、ここではisNaNは使用できません。

そこでtypeofやinstanceofを使用して数値判断をしています。

関数内でチェック

実際の運用としては、次のように関数内でエラーチェックを行った方が手間が省けます。

const sum = (...data) => {
        const goukei =( Array.isArray(data[0]) ? data[0] : data )
                                .reduce( ( a ,b ) => a + b , 0);
        if( !isNumber(goukei) ) throw( new Error("数値以外が含まれている！") );
        return goukei;
    };

データ数が多い可能性がある場合、要素ごとにチェックしたほうがよいケースもあります。

const sum = (...data) => ( Array.isArray(data[0]) ? data[0] : data )
                                .reduce( ( a ,b ) => {
                                    if( !isNumber(b) ) 
                                        throw( new Error("数値以外が含まれている！:" + b) );
                                    return a + b;
                                }, 0);

数値以外は0として扱うケースもありますね。

const sum = (...data) => ( Array.isArray(data[0]) ? data[0] : data )
                                .reduce( ( a ,b ) => a + (isNumber(b) ? b : 0 )
                                    , 0);

どのパターンがよいのかは、目的とするプログラムによって異なります。
よく検討する必要がありますね。