JavaScriptの関数の書き方、定義、関数名、呼び出し、引数、戻り値、関数の中に関数なども解説|JavaScript入門講座(7)

JavaScript
この記事は約6分で読めます。

はじめに

 JavaScript入門講座の第七弾として、JavaScriptの関数の書き方、定義、関数名、呼び出し、引数、戻り値、関数の中に関数なども解説ついて紹介します。

 この記事を読むと次の疑問について知ることができます。

  • 関数の宣言と呼び出しとはどのようなもの?
  • 関数の基本的な使い方はどのように使うの?
    ・無名関数
    ・即時間数
    ・クロージャ―
    ・再帰関数

 JavaScript入門講座(6)では、JavaScriptの配列、宣言、追加、削除、結合、要素数、ループについて解説してきました。

 ここでは、JavaScriptの関数の書き方、定義、関数名、呼び出し、引数、戻り値、関数の中に関数などについて深堀していきます。

関数の宣言と呼び出し

 JavaScriptでは、functionと言うキーワードで宣言された構文を関数と呼びます。

 どのようなプログラミング言語でも同じですが、同じ処理をする内容を幾つもプログむ内で出る場合がありますが、そのような場合に、その処理を関数として定義し、呼び出すことによりプログラムに書くソースが少なくなり、スッキリとしたソースを書くことができます。

 関数の宣言を次に紹介します。

function 関数名(引数1、・・・、引数n){
 (引数1、・・・、引数n)を使った実行命令文

又は、アロー関数での書きか方
関数名 = (引数1、・・・、引数n)=> {
 (引数1、・・・、引数n)を使った実行命令文
}

利用する場合は次のようになります。
 let kansu = 関数名((引数1、・・・、引数n);

関数の基本的な使い方

 それではここで、簡単な関数を定義してみましょう。

 四角の面積を求める関数siMen(x, y)を定義して見ます。

function siMen(x, y) {
return x * y;
}
console.log(siMen(5, 8));
console.log(siMen(15, 1.5));

上述のコードの解説

  1. 四角の面積を求める関数 siMen(x, y) を定義
  2. x=5,y=8を入れた関数siMen(x, y)をconsole.logでコンソールに出力
    (結果 40)
  3. x=15,y=1.5を入れた関数siMen(x, y)をconsole.logでコンソールに出力
    (結果 22.5)

無名関数

 関数名を付けずに関数式で作る関数名を持たない関数を無名関数と呼びます。

 ここで例として、先ほどの四角の面積の無名関数を作成してみましょう。

let muMei = function(x, y) {
return x * y;
}
console.log(muMei(10, 5));
console.log(muMei(5, 3));

上述のコードの解説

  1. let で宣言した変数 muMei に無名関数 function(x, y) {return x * y;} を代入
  2. x=10,y=5を入れた無名関数 の戻り値を変数 muMeiに代入し、console.logでコンソールに出力 (結果 40)
  3. x=15,y=1.5を入れた無名関数 の戻り値を変数 muMeiに代入し、console.logでコンソールに出力 (結果 22.5)

即時間数

 読んで字の如く、即時に実行される関数を即時間数と呼びます。

 上述の例で、四角の面積の即時関数を作ってみましょう。

let soKuJi = (function(x, y){
return x * y;
}(2, 50));
console.log(soKuJi);

上述のコードの解説

  1. let で宣言した変数 soKuJi にx=2、y=50を入れた即時関数 (function(x, y){
    return x * y;}(2, 50))でえられた戻り値を代入
  2. console.log(soKuJi);で変数 soKuJi の値をコンソールに出力、 (結果 100)

クロージャ―

 関数の中に関数を含めることができます。

 親関数に含められた子関数は、親関数の変数にアクセスすることができます。

 このように、子関数が親関数の変数にアクセスできる仕組みをクロージャ―と呼びます。

 それでは、例を見てみましょう。

function oyaFunc(){
let x =3;
return function(){
return x--;
}
}
let func = oyaFunc();
console.log(func());
console.log(func());
console.log(func());

上述のコードの解説

  1. 親関数 oyaFunc内でlet で宣言した変数xに3を代入し、子関数でfunction(){return x--;}で親関数で宣言したxにアクセスして、xから1を引いた値をxに代入(この文の実行後に代入が行われる。)
  2. let 宣言した func に親関数 oyaFunc() の値を代入
  3. console.log(func());で変数 funcをコンソールに出力、 (結果 3)
  4. console.log(func());で変数 funcをコンソールに出力、 (結果 2)
  5. console.log(func());で変数 funcをコンソールに出力、 (結果 1)

再帰関数

 自分自身を呼び出す関数のことを再帰関数と呼びます。

 注意点は、無限に呼びだされ、無限ループになるのを防ぐために条件式を入れて抜け出すように設定する必要があります。

 ここでは再帰関数の例として、階乗の計算をしてみたいと思います。

function kaiJou(n) {
if (n == 0){
return 1
}
return n * kaiJou(n-1);
}
console.log(kaiJou( 3 ));
console.log(kaiJou( 6 ));
console.log(kaiJou( 10 ));

上述のコードの解説(n=3の場合)

  1. 関数 kaiJou(n) で n=3、が代入されると 3 * calc(2) を計算するために、kaiJou(2)が呼び出されます。
  2. kaiJou(2) が呼び出され 2 * kaiJou(1) を計算するため kaiJou(1) が呼び出されます。
  3. kaiJou(1) が呼び出され 2 * kaiJou(0) を計算するため kaiJou(0) が呼び出されます。
  4. kaiJou(0)が呼び出されると、if n ==0の条件を満たすために、 return 1 が実行されます。
  5. 後はkaiJou(3)が計算されていきます。(3 ☓ 2 ☓ 1×1)=6
  6. console.log(kaiJou( 6 ));では、同様に、(6×5☓4☓3×2×1×1)=720が計算されます。
  7. console.log(kaiJou( 10 ));では、同様に、(10×9×8×7×6×5☓4☓3×2×1×1)=3628800 が計算されます。

おわりに

 如何だったでしょうか?

 関数の宣言と呼び出しとはどのようなもの?、関数の基本的な使い方はどのように使うの?、無名関数、即時間数、クロージャ―、再帰関数などについて紹介してきました。

 この記事があなたにとって少しでもお役に立てればこれほど嬉しいことはありません。

以上です。

 

コメント

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