アロー関数の使い方について【JavaScript】

JavaScript

 

今回は、JavaScriptでよく使う「アロー関数」について。

これまで使っていたfunction関数との違いも。

アロー関数とは?

アロー関数とはfunction関数よりも、より短く記述できる関数のこと。

ES2015から導入されました。

サンプルプログラムを書いてみよう

それでは実際に書いてみましょう。

今回はfunction関数とアロー関数の書き方の違いを紹介しながら、サンプルプログラムを書いていきます。

function関数

function関数の基本的な書き方の公式はこちら。

function 関数名(引数) {
    //処理内容
    return 戻り値
}

そして、サンプルプログラムが以下になります。

function greeting() {
  document.write('こんにちは!');
}

greeting();
 // →ブラウザに「こんにちは!」と表示されます。

greetingの名前の関数を宣言。

そして、document.writeで「こんにちは!」とブラウザに表示させるようにします。

結果、ブラウザに「こんにちは!」と表示されました。

これがfunction関数の基本的な書き方です。

アロー関数

アロー関数の基本的な書き方の公式はこちら。

let 変数名 = (引数1, 引数2, ...)	=> {
  実行される処理;
  ...

  return 戻り値;
};

そしてサンプルプログラムはこちら。

<div id="btn">文字が変わります</div>
    
<script>

  const btn = document.getElementById('btn');

  btn.addEventListener('click', () => {
  btn.textContent = 'ほい!文字が変わりました!';
   });

</script>

「id=”btn”」を持ったボタンを、getElementByIdで取得。

取得したbtnをクリックすると、「ほい!文字が変わりました!」の文字に変わるようなプログラムを書きます。

すると、btnの文章をクリックすると、文字が変わりました。

これがアロー関数の書き方の例でした。

まとめ

以上が、「アロー関数」についてでした。

JavaScriptでこれから頻繁に使われる関数の記述方法なので、是非理解していきましょう。