スポンサーリンク

JavaScriptの関数

JavaScriptの関数 JavaScript
JavaScriptの関数

はい、ぺんしるです。

同じ処理を複数個所に記載するのは、面倒ですよね。そんな時に使用するのが関数です。

今日は関数について解説していみますね!

関数とは

関数とは、処理を1つにまとめて名前をつけたものです。処理を1つにまとめることで、どこからでも使えるというメリットがあります。

例えば、AとBと2つのボタンがあったとします。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が表示される

最後に

いかがでしたか?

不明点があれば、遠慮なくこちら、またはこちら(匿名での質問ができます)からご質問くださいね。

ではまた!!

コメント

タイトルとURLをコピーしました