JavaScript 関数のサンプル

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

目次	関数とは / 関数のサンプル
	巻き上げ(hoisting) / 関数内の変数のスコープ
	同じ関数名が2つあった場合 / 関数の中に関数がある場合
	関数の中のthisが指す対象 / 関数が先でグローバ変数が後の場合
	関数式とは / 関数を実行するコードが、関数式より前の場合
	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の時はエラー)
  }
  test1();
</script>

3～5行目は、グローバル変数です。関数内からアクセスできます。
8,9行目は、ローカル変数で関数内のみ有効です。
10行目は関数の中で変数がありますが、const,let,varをつけていないのでグローバル変数になります。

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行目のグローバル変数を指します。
thisをつけない場合は、5行目の3が出力されます。
2行目のコメントを外してstrictモードを有効にするとエラーになります。
Uncaught TypeError: Cannot read properties of undefined (reading 'a')

関数が先でグローバ変数が後の場合

<script>
  function test1() {
    console.log(COLOR1); //redが出力される
  }
  test1();

  const COLOR1 = "red"; //グローバル変数
</script>

関数の後にグローバル変数があってもエラーになりません。

関数式とは

変数 = function 関数名([引数[ ,引数]]){
　[return 値];
}

関数式は、関数を変数に代入します。
関数の実行は、変数とかっこ()で行います。
「関数リテラル」とも呼ばれます。

<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)はできません。

Functionコンストラクタとは

new Function([引数[,引数]])

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

<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行目の引数の内容で処理が行われます。