関数の応用 - web-0127のブログ

関数の代入と匿名関数

関数は、数値や文字列のように変数に入れて扱うことができます
この方法を使うと、条件に応じて異なる関数を変数に設定したり、関数を引数として別の関数に渡したりと、より柔軟に関数を利用できます

変数名 = 定義済みの関数名；

《関数を変数へ代入する》

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>関数を変数へ代入する</title>
<script>
  function sayHello() {
    console.log( 'こんにちは' );
  }
  var f = sayHello;
  f();
</script>
</head>
<body>
</body>
</html>

《実行結果》

sayHello関数を定義して、変数f に代入しています
代入するときは関数名の後ろに丸括弧はつけません

関数式

関数の定義と変数への代入を同時に行うこともできます
このような式を関数式とよびます

変数名 = function 関数名（）{ }；

※文末にセミコロンが必要

《関数の定義と変数への代入を同時に行う》

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>関数の定義と変数への代入を同時に行う</title>
<script>
  var f = function sayHello() {
    console.log( 'こんにちは' );
  };
  f();
</script>
</head>
<body>
</body>
</html>

《実行結果》

関数sayHelloを変数f に代入し、以降は「ｆ」という変数名を使って関数を呼び出しています
変数に代入する値が「数値」であろうと「関数」であろうと同じように記述します

匿名関数

関数名を使わない場面では、関数名の省略が可能となっています
関数名を省略すると、」名前の無い「匿名関数」となります

《匿名関数の代入》

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>匿名関数の代入</title>
<script>
  var f = function() {
    console.log( 'こんにちは' );
  };
  f();
</script>
</head>
<body>
</body>
</html>

《実行結果》

即時関数

１回だけしか呼び出しを行わない関数の場合、名前をつけて定義したあとに呼び出す必要はありません
定義と同時にすぐ実行される「即時関数」を使います

( function( 引数を入れる変数 ){ 処理 })( 引数として渡す値 );

匿名関数の定義を丸括弧で囲む
さらにその後ろにもう一つ丸括弧で引数を渡す

《即時関数の利用》

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>JavaScriptの練習</title>
<script>
  (function (name) {
    console.log( name + 'さん、こんにちは' );
  })( 'よしお' );
</script>
</head>
<body>
</body>
</html>

《実行結果》

スクリプト全体が匿名関数の定義と引数で構成されています

記述方法次第で名前のない関数やすぐに実行される関数を作ることができる
関数の定義文を値として扱う記述方法を関数式と呼ぶ