JavaScript 関数のサンプル

JavaScriptの関数のサンプルです。

目次

その1 関数とは
  巻き上げ(hoisting)
  関数内の変数のスコープ
  同じ関数名が2つあった場合
  関数の中に関数がある場合
  関数の中のthisが指す対象
その2 関数式(function expression)
その3 Functionコンストラクタ

関数とは

  • 関数は、処理をまとめたものです。functionというキーワードがあります。
  • 引数は関数にデータを渡します。
    →引数は複数指定できます。省略可能です。
  • returnで値を呼び出し元に返すことができます。
    →戻り値や返り値と呼ばれます。省略可能です。
    →returnが実行されると、関数内のそれ以後の処理は実行されません。
  • 呼び出し先の引数は、「仮引数」といいます。
  • 呼び出し元の引数は、「実引数」といいます。
  • 関数内でconst,let,varをつけた変数はローカル変数になります。
    →ローカル変数は関数内からのみアクセスできます。
  • 関数宣言(function declaration)とも呼ばれます。

関数のサンプルです。

<script>
  function calc(num1, num2) {
    return num1 + num2;
  }

  const a = calc(1, 2); // 3
</script>

2~4行目は、関数です。
6行目は、関数を実行しています。引数を指定して戻り値を変数のaに代入しています。

巻き上げ(hoisting)

<script>
  const a = calc(1, 2); // 3

  function calc(num1, num2) {
    return num1 + num2;
  }
</script>

関数の宣言の前に関数を実行できます。
この仕様は巻き上げ(hoisting)と呼ばれます。

関数内の変数のスコープ

<script>
  //"use strict";
  const a = 1; //グローバル変数
  var b = 1; //グローバル変数
  c = 1; // グローバル変数 (use strictの時はエラー)

  function test1() {
    const d = 2; //ローカル変数
    var e = 2; ///ローカル変数
    f = 2; // グローバル変数(use strictの時はエラー)
    console.log(a); //1
    console.log(b); //1
    console.log(c); //1 (use strictの時はエラー)
  }
  test1();
  //console.log(d); //エラー d is not defined
  //console.log(e); //エラー e is not defined
  console.log(f); //2 (use strictの時はエラー)
</script>

3~5行目は、グローバル変数です。
11~13行目は、グローバル変数にアクセスできます。
8,9行目は、ローカル変数です。
10行目は関数の中で変数がありますが、const,let,varをつけていないのでグローバル変数になります。
16,17行目は、ローカル変数にアクセスしているのでエラーになります。
18行目は、グローバル変数にアクセスすることになるのでエラーになりません。

2行目のコメントを外してstrictモードを有効にするとconst,let,varをつけていない変数はエラーになります。

同じ関数名が2つあった場合

<script>
  function test1() {
    console.log("前");
  }
  function test1() {
    console.log("後");
  }
  test1(); //後
</script>

関数名があった場合、後の関数が実行されます。

関数の中に関数があるサンプル

<script>
  function test1(a) {
    
    function test2(a) {
      return a + 2;
    }
    return test2(a);
  }
  console.log(test1(1)); // 3
</script>

2行目が外側の関数で4行目が内側の関数です。
9行目は、2行目の関数を呼んでいます。
実行順序は、9→2→7→4→5→7→9です。(数値は行数)
7行目は、内側の関数test2を実行後、return文で結果を9行目に返しています。

関数の中のthisが指す対象

<script>
  //"use strict";
  var a = 1; //グローバル変数
  function test1() {
    const a = 3;
    console.log(this.a); //1が出力される
  }
  test1();
</script>

6行目のthis.aは3行目のグローバル変数を指します。
2行目のコメントを外してstrictモードを有効にするとエラーになります。
「Uncaught TypeError: Cannot read property 'a' of undefined」

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/function

関数式(function expression)

変数 = function 関数名([引数[ ,引数]]){
 [return 値];
  • 関数式は、関数を変数に代入します。
  • 関数の実行は、変数とかっこ()で行います。
  • 「関数リテラル」とも呼ばれます。
  • 関数式で関数名を省略したものを無名関数といいます。
    JavaScript 関数式と無名関数と即時関数

関数式のサンプルです。

<script>
  const a = function calc(num1, num2) {
    return num1 + num2;
  };
  const b = a(1, 2);
  console.log(b); //3
</script>

2~4行目は、関数式です。
5行目は、関数を実行しています。

関数を実行するコードが、関数式より前の場合

<script>
  const b = a(1, 2);

  const a = function calc(num1, num2) {
    return num1 + num2;
  };
</script>

2行目は、関数式の前に関数を実行していますが、エラーになります。
「Cannot access 'a' before initialization」
関数式では巻き上げ(hoisting)はできません。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/function

Functionコンストラクタ

new Function([引数[,引数]])
  • new FunctionでFunctionオブジェクトを生成します。
  • 引数に「return x」等を文字列で記述します。
  • 実行時にコンパイルされます(動的に生成される)。
  • ほぼ使用されません。

Functionコンストラクタのサンプルです。

<script>
  const a =  new Function(
      'num1','num2','return num1 + num2');

  const b = a(1, 2);
  console.log(b); //3  
</script>

2,3行目は、Functionコンストラクタです。
3行目は、引数の1,2番目は関数の引数で、3番目は関数の処理部分です。
5行目は、変数に引数を指定して実行しています。3行目の引数の内容で処理が行われます。

以下は、MDNのFunctionのリンクです。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Function

関連の記事

JavaScript 関数式と無名関数と即時関数
JavaScript クロージャのサンプル
JavaScript 引数/戻り値が関数のサンプル(高階関数)

△上に戻る