基本的にJavaScriptに限らずプログラムを書く場合は関数を使ったほうが整理されて良いです。
その関数も色んな定義の仕方があるのでご紹介します。
JavaScriptの関数とは
関数とは、処理をまとめたものです。
関数は引数と処理、戻り値で形成されます。
引数とは、関数の呼び出し元から渡される値のことです。
戻り値は、呼び出し元に返すために関数で処理した値をいいます。
関数を使ってみる
基本形
|
1 2 3 |
function howOld(age) { alert(age + "歳です。"); } |
このサンプルコードは戻り値も無しでメッセージを表示するだけの単純なものです。
関数は、頭に function と付けて次に関数名、()内には引数を記入します。
そして {} で囲まれた中に処理を書きます。
呼び出し方法は下のコードのように書きます。
|
1 |
howOld(20); |
これを実行するとポップアップで「20歳です。」というメッセージが表示されます。
戻り値を返す
関数を実行すると処理が行われ、処理された結果を関数の呼び出し元で使いたい場合があります。
その場合は関数に return ～ と書き、値を返し、呼び出し元で受け取ることが出来ます。
|
1 2 3 4 |
function howOld(age) { var msg = age + "歳です。"; return msg; } |
これを実行しただけでは何も起こりません。
これを呼び出し元で表示するように書くとこうなります。
|
1 2 |
var msg = howOld(20); alert(msg); |
これで先ほどと同じようにポップアップで「20歳です。」というメッセージが表示されます。
匿名関数
匿名関数や無名関数と呼ばれる関数の書き方です。
漢字が多くて分かりにくいですね！笑
匿名関数は関数の定義に名前をつけず、処理を変数に格納します。
それ以外は基本形の関数と動きは同じです。
|
1 2 3 4 5 |
var msg = function (age) { var msg = age + "歳です。"; return msg; }; alert(msg(18)); |
これを実行するとポップアップで「18歳です。」と表示されます。
即時関数
|
1 2 3 4 |
(function(age){ var msg = age + "歳です。"; alert(msg); })(24); |
最後の行の 24 が引数に与える値になります。
これを実行するとポップアップで「24歳です。」と表示されます。
ただしこの方法は関数のメリットである使いまわすことが出来ません。
ではどういうときにメリットなのか。
それは、変数名の重複によるバグを避けれることです。
変数には関数内で書くローカル変数と、関数外に書くグローバル変数があります。
ローカル変数は関数内でしか使えませんが、グローバル変数は全ての関数から呼び出されます。
コードが多くなってくると混雑し、このグローバル変数に対し意図せず上書きをしバグに繋がることがあります。
即時関数はそういったことを避けることが出来ます。
僕はあまり即時関数は使わないですが。
まとめ
関数は処理をまとめたもの。
関数の構成要素は引数、処理、戻り値がある。
関数には、基本形と即時関数、匿名関数がある。
最初のうちは基本形だけ知っていれば充分。
コメントを残す