関数は、オブジェクトと同様にJavaScriptというプログラミング言語を構成するのに重要な要素。
この記事では、関数について基礎的な部分を学びます。
関数とは
JavaScriptの関数は一連の処理をまとめていつでも呼び出せるようにしたものです。JavaScriptの関数は外から見ると数学の関数と変わりありません。入力を与えると出力である関数の値を返します。数学の関数との違いは、入力を受け取ったあとで関数内のプログラムで一定の処理が行われる点です。JavaScriptでは、関数の入力を引数、関数の出力を戻り値といいます。
関数の定義
関数はfunctionキーワードを使って定義します。それに続けて関数につける名前を書き、関数を定義します。
function 関数名() { 処理 }squareという名前の関数で定義してみましょう。
function square(x) { return x*x; }return文が実行されると、制御が呼び出し元に戻り、return文で指定された値が関数の戻り値となります。
関数名
変数名と同様に、関数名には任意の識別子が使用できます。
JavaScript徹底ガイド｜変数と値について学ぶ
関数の呼び出し
関数を呼び出すには、関数名の後に引数を括弧で囲んで記述します。
square(3) // → 9引数
関数は引数をいくつも入れることができます。必要な分だけ引数を(,)で区切って入れます。
function 関数名(引数1,引数2,...) { 処理 return 返り値; }関数実行の流れ
関数が呼び出されると、次のような流れで実行されていきます。
- STEP.1呼び出し元の実引数の値が関数定義文の仮引数に代入
- STEP.2関数定義文の{}の中に記述された処理を順番に実行
- STEP.3return文が実行されると呼び出し元に戻り、return文の値が関数の戻り値となる
- STEP.4return文が実行されずに最後のステートメントが実行されると、呼び出し元に戻り、undefinedが関数の戻り値となる
関数宣言文の巻き上げ
関数宣言文は変数宣言文と同じようにプログラムの先頭に巻き上げられます。
console.log(square(5)); // → 25
function square(x) { return x*x; }引数の値渡しと参照渡し
関数の引数にプリミティブ値を渡す場合と、オブジェクトを渡す場合で、関数の挙動は変わります。
引数がプリミティブ値の場合
function add1(x) { return x = x + 1; }
ver a = 3;
ver b = add1(a);
console.log("a = ", b = " + b); // → a =3、b = 4関数が呼び出されたとき、変数aの値が引数xに代入されます。引数にプリミティブ値を渡す場合は、その値そのものが引数に渡されます。これを値渡しといいます。変数aと変数xはメモリの異なる領域にある別々の変数です。このため、xの値を変更してもaの値は変更されません。
引数がオブジェクトの場合
function add1(p) { p.x = p.x + 1; return p; }
ver a = {x:3,y:4};
ver b = add1(a);
console.log(a,b); // → Object {x=4,y=5} Object {x=4,y=5}まとめ
関数を利用するメリットとして『再利用できる』『理解しやすいプログラムにできる』『プログラムの修正が容易になる』などの点があげられます。
・再利用できる
同じ処理を何回も行う場合に、その処理をまとめて関数にしておけば、関数を呼び出すだけで同じ処理を何回でも行うことができます。これによって同じコードを何回も書く必要はなくなります。
・理解しやすいプログラムにできる
関数を使えば、一定の処理のまとまりに名前をつけることができます。こうすることで、プログラムを読む際に処理の内容を把握しやすくなります。
・プログラムの修正が容易になる
関数を使用しないと、同じ処理をプログラムのあちこちに記述しなければなりません。この場合、その処理部分を修正するのに、同じ修正を複数回行う必要があります。しかし関数にまとめておけば、その関数だけを修正すればよいので、修正が容易になります。
