実務経験1ヶ月、エディターの若栁です。
JavaScriptの関数（function）について、実務の中で学んだことを書いていきます。
関数とは？
関数は、任意の処理を実行するコードをまとめ、名前をつけたもの。
関数を使うことで、
- 複数の処理をまとめられる
- 同じ処理であれば、関数を再利用できる
- 同じコードを何度も書かなくていいので、結果、コードもすっきりする
というメリットがあります。
関数の宣言方法について
関数は、自分で名前をつけられます。名前をつける時は、ローワーキャメルケースで書くのが一般的です。
JavaScriptで名前をつける時のルールを知りたい方は、以前の「JavaScript編命名規則」を読んでください！
関数は、次のように宣言します。
|
1 2 3 4 5 |
function 関数名(引数){ //実行したいコードを書く; } |
こう書いても「関数を作りました！」と宣言するだけなので、その場で実行はされません。
この関数を使って処理をしたい時には、
|
1 |
関数名(引数); |
と呼び出して実行します。
引数とは？
引数は、関数の呼び出し元が与える値のこと。
以下は、aとbという2つの引数を与えて、コンソールにaとbの和を出力する処理を宣言したコードです。
|
1 2 3 4 5 |
function sum(a,b){ console.log(a+b); } sum(5,7); // コンソールに12が出力 |
関数を呼び出し、引数にa=5,b=7を与えると、5と7の和＝12がコンソールに出力されます。
引数は省略もできます。
|
1 2 3 4 5 |
function message(){ console.log('Welcome to our site!') } message(); // コンソールに Welcome to our site!と出力 |
return文の使い方
関数の中でreturn文を使うことで、その関数によって返される値（=戻り値）も指定できます。
下のコード例だと、returnの後ろにある「’こんにちは、’ + name + ‘さん。’」が戻り値です。
nameは引数なので、指定された引数の文字列が結合されて、「こんにちは、●●さん。」と表示されます。
戻り値の指定は、return文でしかできません。
|
1 2 3 4 5 |
function hello(name){ return 'こんにちは、' + name + 'さん。'; } console.log(hello('桜井')); // コンソールには「こんにちは、桜井さん。」が出力 |
関数を変数に入れて、その変数を呼び出しても戻り値を取得できます。
|
1 2 3 4 5 6 |
function hello(name){ return 'こんにちは、' + name + 'さん。'; } var message = hello('杉田'); console.log(message); // コンソールには「こんにちは、杉田さん。」が出力 |
無名関数と即時関数
その他、関数にもパターンがあるのでさらっと紹介します。
無名関数(匿名関数)とは？
無名関数は、関数名が省略された関数のこと。
変数の中に関数の処理を定義すると、関数名を省略できます。
|
1 2 3 4 5 |
var hello = function(name){ console.log('こんにちは、' + name + 'さん。'); }; hello('桜井'); // コンソールには「こんにちは、桜井さん。」が出力 |
変数hello()を使えば関数を呼び出せるので、関数名は省略できます。これが無名関数です。
関数を使うメリットとして「同じ処理であれば、関数を再利用できる」という点を最初に挙げましたが、
再利用しない関数であれば、その場で宣言して実行されればよい、とも言えます。
その点では、無名関数は再利用しない関数向きだとも言えます。
即時関数とは？
即時関数は、関数の宣言と実行が同時に行われる関数のこと。
関数名を省略できるので、無名関数の仲間とも言えます。
無名関数の書き方から、さらに変数名を省略していくと即時関数の形式になります。
ですが、単に変数定義のvar helloや、変数名helloを省略しただけではエラーが出ます。
|
1 2 3 4 5 6 |
function(name){ console.log('こんにちは、' + name + 'さん。'); }('桜井'); //結果 Uncaught SyntaxError: Unexpected token ( |
そのエラーを回避するために、関数宣言部分全体を()で囲みます。
|
1 2 3 |
(function(name){ console.log('こんにちは、' + name + 'さん。'); })('桜井'); |
宣言と同時に実行される、即時関数ができました。
この場合の()は、グループ化演算子という名前で、()で囲うことで関数の宣言と処理がグループ化されて、エラーなく実行されます。
先に挙げた方法に比べると、関数名を定義しないのでコードが煩雑にならない、というメリットがあります。
以上で、JavaScript 関数（function）の基礎を学ぶ、の回を終わります。
お世話になったURL
Google JavaScript Style Guide 和訳
関数-JavaScript(MDN)
JavaScript Function Definitions(w3school.com)
グループ化演算子-JavaScript(MDN)
