Javascriptでカウンター機能を作成しました。教えてください！

Question

人のブログを参考にJavascriptでカウンター機能を作成しました。
コードの中どう機能しているのか分からない部分があります。教えていただけると大変嬉しいです。

■質問：コード内にある**「let onClickPlusButton = () => ...」の 「= () =>」**←この部分は何を意味してますか？

// JavaScript Document
let counterOutput = document.getElementById("counterOutput");//<input>部分idを取得して変数に代入


//加算機能
let plusButton = document.getElementById("plusButton");//+ボタン部分idを取得して変数に代入
let onClickPlusButton = () => {///カウント数が1づつ増える指定をonClickPlusButtonに代入
	counterOutput.value++;
};
plusButton.addEventListener("click",onClickPlusButton);//+ボタンをクリックしたらonClickPlusButtonが発動


//減算機能
let minusButton =document.getElementById("minusButton");
let ononClickMinusButton = () => {
	if (counterOutput.value >= 1) {
	counterOutput.value--;//カウント数が1以上の時だけ減算する
	}
};
minusButton.addEventListener("click",ononClickMinusButton);


//リセット機能
let resetButton = document.getElementById("resetButton");
let onClickResetButton = () => {
counterOutput.value = 0;
};
resetButton.addEventListener("click",onClickResetButton);

Answer 1

()=> は比較的新しい JavaScript で使えるようになった機能で、
アロー関数 arrow function という文法です。

関数ですので、基本的に

// アロー関数の表記
let addFunc = (a, b) => {
  return a + b;
}

// 通常の表記
let addFunc = function(a, b) {
  return a + b;
}

は同じ動作をします（addFunc(1, 3) 等で呼び出せる）。

ただし関数内で this を使う場合だけは動作が変わります。詳しくは検索してください。

なお、上記のように関数内部を return の１行だけで書ける場合は、下記のように省略ができます。

let addFunc = (a, b) => {
  return a + b;
}

// 上記と同じ
let addFunc = (a, b) => a + b;

Comments

[kikoa]

Plageoj さんありがとうございます????‍♀️
こんなにご丁寧にわかりやすく...。
Thisを使う場合の調べてみます！！

Answer 2

無名関数を代入することでonClickPlusButtonという関数を
定義しています。イメージとしてはこんな感じ

function onClickPlusButton(){
    counterOutput.value++;
}