はじめてのJavaScript⑯「関数リテラル」

##1. はじめに
本記事では、JavaScriptの
「関数リテラル」
について記載する。
##2. 関数リテラルとは？
:::note
function命令のように関数名を定義しない関数のことを指す。
:::
:::note
匿名関数や無名関数と言われる。
:::
##3. 実際どのようなものか？
実際に構文を書いて、function命令のものと無名関数の2種類で説明する。
###関数定義(function命令)の構文

関数定義(function命令)

index.js

function Hamburg(){
  console.log('ハンバーグ')
}
Hamburg(); // 出力結果:"ハンバーグ"
//or
Hamburg(); 
function Hamburg(){
  console.log('ハンバーグ')
}

###関数定義(function命令)の特徴 :::note warn 定義してから実行できたり、コード順関係なく先に実行させることもできる。 :::

---

###関数リテラル(無名関数の代入)

関数リテラル

index.js

let Hamburg = function () {
  console.log('ハンバーグ');
};
Hamburg();// 出力結果:"ハンバーグ"

###関数リテラル(無名関数の代入)の特徴 :::note warn 変数"Hamburg”とfunction命令と紐付けて記述できる。 →全体的にコードがゴチャつかない。 ::: また、先に実行するとエラーが発生してしまう。

エラーの例

index.js

Hamburg();// 'Hamburg is not a function' ←先に実行するとエラー発生！！
let Hamburg = function () {
  console.log('ハンバーグ');
};

先に関数リテラルから先に書いてから実行すること！！

##4. 無名関数の構文
構文は以下のようになる。

無名関数の構文

index.js

function(引数1、引数2、...) {
  //実行する処理
}

上記でも記載したが、関数名を持たないのが特徴である。 ##5. 例題 例題の内容は、過去に記載した記事より参照→[はじめてのJavaScript⑭ 「関数」 5.例題](https://qiita.com/Stack_up_Rising/items/0c2cc32de31a2c35a552#5-%E4%BE%8B%E9%A1%8C)より

###例題の内容
例題は「四角形の面積を計算する関数」というテーマで進めていく。

四角形の縦の長さと横の長さを引数に渡すと、四角形の面積(縦×横)を計算して、値を返す関数を作る。

作った関数を使って、高さ3m、横幅5mの四角形の面積を求め、コンソールへ出力する。

※単位は㎡とする。(単位の出力は不要)

---

###四角形の面積を計算する関数を関数リテラルで書く

index.js

index.js

let getRectangle = function (height, width) {
  return height * width;
};
console.log(getRectangle(3, 5));

[前回function命令で書いた構文](https://qiita.com/Stack_up_Rising/items/cebb01c8c08f85e9705a#%E5%9B%9B%E8%A7%92%E5%BD%A2%E3%81%AE%E9%9D%A2%E7%A9%8D%E3%82%92%E8%A8%88%E7%AE%97%E3%81%99%E3%82%8B%E9%96%A2%E6%95%B0%E3%82%92function%E5%91%BD%E4%BB%A4%E3%81%A7%E6%9B%B8%E3%81%8F)と違い、こちらのほうが私的に理解はしやすかったかなと思った。 解釈の仕方としては、

変数getRectangleに引数の3と5を渡し、渡したものをheightとwidthにそれぞれ代入し、heightとwidthをかけたものをreturnで返してあげる

という解釈。

---

###デベロッパーツールでの検証 [前回同様](https://qiita.com/Stack_up_Rising/items/cebb01c8c08f85e9705a#%E3%83%87%E3%83%99%E3%83%AD%E3%83%83%E3%83%91%E3%83%BC%E3%83%84%E3%83%BC%E3%83%AB%E3%81%A7%E3%81%AE%E6%A4%9C%E8%A8%BC)、縦3と横幅5の面積は15㎡となるはず。  今回も正しく出力できた。 ##6. おわりに 次項:[はじめてのJavaScript⑰ 「Functionコンストラクタ」](https://qiita.com/Stack_up_Rising/items/0b3c1246da8138c477f1)に続く。