JavaScriptを基本からまとめてみた【12】【関数( function )】

##はじめに

####学習するに至った経緯

2020年より、未経験からエンジニアへの転職を目指し、某プログラミングスクールへ通う。入学後、『Ruby』を未経験から学ぶ人が多いのと『Ruby』の求人が思っていた以上に少ないので、卒業後、フロントエンドのエンジニアを目指す事に。
Javascriptの学習した事を言語化し、認識の深化による備忘録として記載。

##JavaScriptにおける関数（function）とは
『関数』とは、複数の処理をひとまとまりにしたもの。メソッドと呼ばれることもある。JavaScriptにおける基本的な構成要素のひとつであり、Function型のオブジェクトとして扱われ、関数をオブジェクトとして扱うことが出来るのはJavaScript特有の特徴。

##関数を使うメリット
関数を利用することで目的ごとに処理を分割したり、似たような処理を何度も書かなくて済むようになる。全ての処理を関数を使わずに書いた場合と、関数を使って書いた場合とではコードの文量が何倍にも変わる。場合によっては何倍どころか何十倍、何百倍になることもある。

##関数を定義する
####① 関数宣言で関数を定義する

もっとも代表的な関数定義の方法として『関数宣言』がある。
関数宣言は 『function 関数名(引数) { 処理 } 』という記法で関数を定義する。

main.js

/** 引数で指定した名前に挨拶をする文字列を返す関数 */
function hello1(name) {
  let message = "Hello, " + name
  return message
}

#####※ 宣言の中にある『引数』とは関数に渡して処理の中でその値を使うことができるもの。

ここでは、hello1関数の引数に変数nameが指定されており、その変数nameは関数の処理の中で「Hello, ◯◯◯（引数で指定した名前）」という文字列を返却するように組み込まれている。同じような仕組みの処理を何度も必要とするときに引数を利用すれば、引数の値を変えるだけで同じ仕組みで算出された別の値を何個も取得できるようになる。

また、値や文字列などを関数の外に返却（出力）する処理は、上記コード中にもあるように return 返却値 という記法で書く。
#####※return文は書かなくても問題ないが、その場合その関数は値を何も返却しない関数になる。

####② 関数式で関数を定義する
JavaScriptにおいて関数はfunction型のオブジェクトで、そのため、関数は式として変数に渡すことも出来る。式として関数を作成する記法を、関数式と呼ぶ。

main.js

/** 引数で指定した名前に挨拶をする文字列を返す関数 */
let hello2 = function(name) {
  let message = "Hello, " + name
  return message
}

このように let 変数名 = function(引数) { 処理 } という記法で変数名の関数を作成できる。上記コードでは、hello2という名前の変数が関数になっている。

####③　アロー関数式で関数を定義する
アロー関数式とは、ECMAScript 2015（ES2015）という2015年に公開されたJavaScriptの新しい標準に含まれる記法で、従来の関数式のいくつかの要素を省略し、その他の細かな挙動を調整した式。

main.js

/** 引数で指定した名前に挨拶をする文字列を返す関数 */
let hello3 = name => {
  let message = "Hello, " + name
  return message
}

関数式では式の右辺は function(引数) { 処理 } という記法で書かれていたが、アロー関数式ではこの記法のうち function や、引数を囲む括弧などが省略されている。
#####※ただし引数が複数ある場合にはこの括弧は省略出来ない。

また、関数の処理を囲んでいる波括弧ですが、これについても『波括弧内の処理が一行である』という条件を満たせば省略が可能。この条件を満たし波括弧を省略した場合、関数が値を返却するreturn文の『return』も省略が可能。

##関数の呼び出し方
関数を呼び出すには 関数名(引数として渡す値) という記法で書く。

main.js

// 関数の定義
function hello1(name) {
  let message = "Hello, " + name
  return message
}
// 関数の呼び出し
let result1 = hello1("yamada")
// コンソールへ結果を出力
console.log(result1) 

実行結果

Hello, yamada

上記コードでは関数を呼び出した式を左辺の変数result1に格納していますが、この変数にはhello1関数を呼び出した実行結果が設定されている。
#####※ 実行結果とは、前項で説明したreturn文で返却した値のこと。
また、引数の存在しない関数を呼び出す場合ですが、その場合は呼び出す際にも引数を設定する必要はない。

##参考サイト
[JavaScriptのfunctionを基本から解説]
(https://techplay.jp/column/568)