はい、ぺんしるです。
同じ処理を複数個所に記載するのは、面倒ですよね。そんな時に使用するのが関数です。
今日は関数について解説していみますね！
関数とは
関数とは、処理を1つにまとめて名前をつけたものです。処理を1つにまとめることで、どこからでも使えるというメリットがあります。
例えば、AとBと２つのボタンがあったとします。AをクリックしてもBをクリックしても同じ処理にしたい場合は、処理を関数化することで、 同じ処理を2か所に記載する必要がなくなるので実装が楽になります。
また、次にCというボタンが必要になった場合でも、関数を呼び出すだけでよくなり、実装工数が削減できます。
関数
関数の記載方法について、詳細を説明していきますね。
関数の定義
関数は、以下のように記載します。
以下は、現在の日時をアラート表示する関数です。alertDateの部分が関数名です。
関数を呼び出す場合は、関数名();と記載します。
function alertDate(){
dd = new Date();
alert(dd.toLocaleString());
}
//関数の呼び出し
alertDate(); 関数名は、何でで良いですが予約語は使えません。予約語については、以下の記事を参考にしてくださいね。
関数の引数・戻り値
関数には引数と戻り値を設定できます。
引数とはその関数に渡す値のことで、以下のように記載します。
calc(1,2)と呼び出すことで、calc関数の引数aに1を、変数bに2を渡しています。
function calc(a, b){
var c = a + b;
alert(c);
}
//関数の呼び出し
calc(1,2);戻り値は、その関数で処理した結果を呼び出し元に戻した値のことです。
以下の場合、calc(1,2)で処理した結果を呼び出し元に戻り値として戻して、変数xに格納しています。
function calc(a, b){
var c = a + b;
return c;
}
//関数の呼び出し
var x = calc(1,2);
console.log(x); //3が表示されるデフォルト引数
関数には、デフォルト引数を設定することができます。
デフォルト引数とは、呼び出し元が引数を省略する書き方です。
以下の場合、calc関数にデフォルト引数tmpが定義されています。呼び出し元は、calc関数の3つ目の引数に必要があれば値を設定して呼び出し、必要がなければ、値を設定しないで呼び出すことができます。値を設定しない場合は、デフォルト引数に設定されたデフォルト値（この場合0）が使用されます。
function calc(a, b, tmp = 0){
var c = a + b + tmp;
alert(c);
}
//関数の呼び出し（デフォルト引数あり）
var y = calc(1,2,3);
console.log(y); //6が表示される
//関数の呼び出し（デフォルト引数なし）
var x = calc(1,2);
console.log(x); //3が表示されるコールバック関数
関数の引数に、関数を設定することができます。
一定時間経過後や特定の処理が完了した時に、引数で登録した関数を呼び出す場合に使用するもので、コールバック関数と呼びます。
以下の場合、calc関数にcallbackという名前の変数があり、calc関数の呼び出し時にcalcLogという関数名を指定しています。このように記載することで、calc関数からcalcLog関数を呼び出すことができます。
function calcLog(a){
console.log(a); //3が表示される
}
function calc(a, b, callback){
var c = a + b;
console.log(c); //3が表示される
callback(c);
}
//関数の呼び出し
var x = calc(1,2,calcLog);関数式
関数式を使用した書き方を説明していきますね。
無名関数
関数は、変数に代入することも可能です。
その場合、関数名は定義しないため、無形関数と呼ばれます。
呼び出す場合は、以下のように変数名を指定して呼び出します。
var calcfun = function(a,b){
return a + b;
}
//関数の呼び出し
var x = calcfun(1,2);
console.log(x); //3が表示されるアロー関数
無名関数と似ている記載方法で、アロー関数があります。
アロー関数は、functionの代わりに=>を記述する方法です。
var calcfun = (a, b) => {
return a + b;
}
//関数の呼び出し
var x = calcfun(1,2);
console.log(x); //3が表示される最後に
いかがでしたか？
不明点があれば、遠慮なくこちら、またはこちら（匿名での質問ができます）からご質問くださいね。
ではまた！！
コメント