jQuery | そもそも関数って？基礎のおさらい

どうもかわうそです！

今日は『jQuery|そもそも関数って？基礎のおさらい』ということで解説していきます。

関数ってなんだっけ？
引数がよく分からない・・・
関数わ分かるけれど、理解に自信がない

そんな方に向け、簡単に解説していきたいと思います！

もともとこの記事に書いてあった内容をまとめたものなので、

最終的にはcallback関数が分かるようになる、そのための知識をここでお伝えしていきますね！

console.log()の使い方が分からない方は、先にこちらを読んでおいてもらえると理解しやすくなると思います。

そもそもの関数定義と関数実行

割とここが大事なポイントなので、ちょっとでも知識に不安がある方は一緒に振り返りたいと思います。

functionの構成

callback関数を理解するために、そもそものfunctionの構成をおさらいしておきましょう。

無名関数と関数名

まず、functionには名前を付けることができます。

無名関数  function(){}

1	無名関数 function(){}

関数名 function 名前(){}

1	関数名 function 名前(){}

関数の構成

関数の構成を説明します

function(変数){---処理---}

1	function(変数){---処理---}

functionの後の()には変数を入れることができます。
入れたら(変数)、入れなければ()ですね。

()の後ろには関数の処理命令を書く{}があります。
{—処理—}と書きますよね。
この{}の中では、(変数)を受け取ることができます。

受け取るには、
{—-処理変数 —–}
と書くだけです。

例えば、var x = 変数　とすれば、xに変数の値が保存されるし、

 function(変数){  
   5+変数
}

function(変数){

5+変数

}

とすれば、5+引数名の”値”を計算してくれるわけです。(あえてreturnは書いていません。)

でも今のところ、”変数に値を渡す方法”はお伝えしていません。

これに関しては、次の関数実行の方法をおさらいしながらお話します！

関数実行の方法

関数は実行処理をしないと、基本的に実行されません。

関数に名前が設定されている場合、関数を実行するには

関数名の後ろに();

を付けることで、実行されます。

これ、実はコールバック関数を理解深めるポイントです。

例えば

function orange(){
      console.log(’甘い’);
 }

function orange(){

console.log(’甘い’);

}

という関数を実行するには、

orange();

orange();

と記述すればokです。

じゃあ、名前がない無名関数を実行するには？？

こうしましょう。

( function(){処理}() );

1	( function(){処理}() );

これを即時関数と言ったりします。

function(){} の最後に()をつけて、全体を()でくくって、ok!

※厳密に言うと、(引数)として、ファンクションが渡されると、実行される。

じゃあ、関数は実行させたくないけど、関数の記述だけ知りたい！
って場合があるかも・・・？？

そんな場合は、

orange;

orange;

だけでok!

試しに、console.log(orange)やalert(orange)をしてみてください。

orangeの関数の内容が出力されるはずです。

ではここで、改めて

function orange(変数){
      console.log(変数);
 }

function orange(変数){

console.log(変数);

}

でも今のところ、”変数に値を入れる方法”はお伝えしていません。

先ほどの、この変数にどうやって値を入れるの！？この方法をお伝えしていきます。

つまり今から、引数を説明します。

引数

function orange(変数){
      console.log(変数);
 }

function orange(変数){

console.log(変数);

}

まず、この変数。これらは変数であり、そして’引数’と呼ばれます。

分かったから、この引数に値をどうやって入れるの？？

答えは、

関数を呼び出す時に入れます

関数を呼び出すには、関数名の後ろに();を付けてあげるんでしたね。
関数orangeを呼び出すと

orange();

orange();

この時、関数名（引数の値）とすることで、引数に値を渡すことができます。
やってみましょう。

引数が’変数’のままなので、味を意味するtasteにしましょう。

 function orange(taste){
      console.log(taste);
 }
 orange('甘い');

function orange(taste){

console.log(taste);

}

orange('甘い');

するとコンソール画面に

甘い

甘い

と文字列が出力されたはずです。

何が起きてるかというと
orange(‘甘い’)によって、引数tasteに値が渡されました。
taste=’甘い’と定義されたんです。

function orange(taste='甘い'){
      console.log(taste='甘い');
 }

function orange(taste='甘い'){

console.log(taste='甘い');

}

taste=’甘い’だから’甘い’が出力されたんですね。

これが引数です。

じゃあ、以下のような

引数はtaste
引数の値は “甘い”
引数の受け取りは price

こんな場合はどうなるでしょうか。

function orange(taste){
      console.log(price);
 }
 orange('甘い');

function orange(taste){

console.log(price);

}

orange('甘い');

orangeの引数がtaste、console.log()で受けとる引数がpriceになっています。

orange(‘甘い’)で関数を呼び出したとき、引数tasteとなりますので
console.log(price)では何も呼び出されない。

どころか、

priceってそれ引数じゃねーし、引数って変数だけれど、priceって変数も定義されてないので、そんなんないのに使うな！ってエラーですね。

とりあえず

引数を使いたければ、引数の名前は一緒にして受け取れ！ってのがポイントです。

無名関数に引数を渡す方法

ちょっと発展系です。

関数名がある関数に引数を渡す方法は分かったけれど、無名関数に引数を渡すにはどうしたらいいの！？って思いますよね！

これも実は、あるんです！

function(a){console.log(a)}(1);

1	function(a){console.log(a)}(1);

ファンクションの最後に、(値)をつけましょう。

でも、これだけだと、実行はされない！

じゃあどうするか！

そう、即時関数ですね！

( function(){処理}());

1	( function(){処理}());

function(){} の最後に()をつけて、全体を()でくくって、ok!

あれ、でもこれって

function(a){console.log(a)}(1);

1	function(a){console.log(a)}(1);

これに

( function(a){console.log(a)}(1)  );

1	( function(a){console.log(a)}(1) );

()でくくっただけですよね！？

そう！即時関数のおしりにつける()は、引数に値を渡すための()だったんですね！！

( function(){処理}());  
 ( function(a){console.log(a)}(1)  );

1 2	( function(){処理}()); ( function(a){console.log(a)}(1) );

おもしろいですね～！！

伝えたいことのポイント

今回伝えたいことのポイントは

関数呼び出し時に引数を使うには、

・呼び出し時、関数名(引数の値)　★この時、引数(変数)＝引数の値　が設定される
・関数名(引数){ 引数 }　★引数は同じ名前にして初めて使える

この2つがめちゃくちゃ重要ということです。
極論、この引数名さえ一緒であれば、aでもbでもcでもどんな名前だっていいんです。

これがしーっかり分かっていると、callback関数の基本的な仕組みはもう90%理解できています！

callback関数について詳しくはこちらをどうぞ！

http://kawauso-29.com/web/callback/