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

1. はじめに

本記事では、JavaScriptの
「関数リテラル」
について記載する。

function命令のように関数名を定義しない関数のことを指す。

匿名関数や無名関数と言われる。

実際に構文を書いて、function命令のものと無名関数の2種類で説明する。

関数定義(function命令)

index.js

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

定義してから実行できたり、コード順関係なく先に実行させることもできる。

関数リテラル

index.js

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

変数"Hamburg”とfunction命令と紐付けて記述できる。 →全体的にコードがゴチャつかない。

また、先に実行するとエラーが発生してしまう。

エラーの例

index.js

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

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

構文は以下のようになる。

無名関数の構文

index.js

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

上記でも記載したが、関数名を持たないのが特徴である。

例題の内容は、過去に記載した記事より参照→はじめてのJavaScript⑭ 「関数」 5.例題より

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

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

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

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

index.js

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

前回function命令で書いた構文と違い、こちらのほうが私的に理解はしやすかったかなと思った。
解釈の仕方としては、

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

という解釈。

前回同様、縦3と横幅5の面積は15㎡となるはず。

今回も正しく出力できた。