2021年11月5日 JavaScript (JS Primer) オブジェクト

これまでに学習してきたfor文やforEachメソッドで数値の合計を返すsum関数を学習してきましたが、いずれの方法もletで再代入して反復処理を行う必要がありました。
reduceメソッドを使えば一時的な変数を定義せずに反復処理した結果だけを受け取ることが出来る上にconstで定義することができます。

reduce

reduceメソッドは配列の各要素を累積して1つの値にできます。 JSprimerの構文にconsole.logを加えた上でループ処理の中身を出力して流れを書いてみました。

function sum(numbers) {
    return numbers.reduce((total, num) => {
      console.log(total);
      console.log(num);
        return total + num;
    }, 0); // reduce(関数, 初期値)とすることが多いです。仮引数に現在の値は初期値が0
}

sum([1, 2, 3, 4, 5]); // => 15
// reduceは配列の合計値を算出してくれます。

// 出力結果
// => 0　　　　　 【仮引数total出力】defaultに0と設定した場合は0と出力されるようです。
// => 1          (仮引数num出力)配列の1番目の要素は１です。
// => 1　　　　　 【仮引数total出力】処理結果1は仮引数のtotalに代入されます。
// => 2          (仮引数num出力)配列の2番目の要素は２です。
// => 3　　　　　 【仮引数total出力)】処理結果3は仮引数のtotalに代入されます。
// => 3          (仮引数num出力)配列の2番目の要素は２です。
// => 6    【仮引数total出力】処理結果6は仮引数のtotalに代入されます。
// => 4          (仮引数num出力)配列の4番目の要素は4です。
// => 10   【仮引数total出力】処理結果10は仮引数のtotalに代入されます。
// => 5          (仮引数num出力)配列の５番目の要素は5です。
// => 15    本来の処理結果がreturnされます。

reduceメソッドの第二引数を省略すると、totalには配列の0番目の要素が入ります。numには配列の1番目の要素が入ります。

function sum(numbers) {
    return numbers.reduce((total, num) => {
      console.log(total);
      console.log(num);
        return total + num;
    }); 
}

sum([1, 2, 3, 4, 5]);

// 出力結果
// => 1
// => 2
// => 3
// => 3
// => 6
// => 4
// => 10
// => 5
// => 15

オブジェクト

{}はObjectのインスタンスオブジェクト

ObjectはJavaScriptのビルトインオブジェクトです。 オブジェクトリテラル（{}）は、このビルトインオブジェクトであるObjectを元にして新しいオブジェクトを作成するための構文です。

// プロパティを持たない空のオブジェクトを作成
// = `Object`からインスタンスオブジェクトを作成
const obj = new Object();
console.log(obj); // => {}

// 上記と以下は同義です。
const obj = {}

プロパティへのアクセス

オブジェクトのプロパティにアクセスする方法として、ドット記法（.）を使う方法とブラケット記法（[]）があります。
それぞれの記法でプロパティ名を指定すると、その名前を持ったプロパティの値を参照できます。

const obj = {
    key: "value"
};
// ドット記法で参照
console.log(obj.key); // => "value"
// ブラケット記法で参照
console.log(obj["key"]); // => "value"

ケースの補足

• キャメルケース・・・ modalYarno
• パスカルケース・・・ ModalYarno
• ケバブケース　・・・ modal-yarno
• スネークケース・・・ modal_yarno

参考

Array.prototype.reduce()