関数 - web-0127のブログ

関数とは

一連の処理をひとまとめにして、名前をつけたものを「関数」と呼びます
手間のかかる処理を関数として定義しておけば、必要なときに何度も呼び出すことができます
関数は処理の材料となる「引数」を受け取ります
処理が終了すると「戻り値」と呼ばれる処理結果を返します

自作関数：自分で定義して使う
組み込み関数：プログラミング言語がすでに組み込んであるもの

引数も戻り値もない関数の書き方

関数は、function文を使って定義する
定義した関数を実行するときは、関数名を記述するだけ
定義の際も呼び出しの際も、関数名の後ろに必ず「()」をつける

関数の定義

function 関数名 () {
　　処理;
}

定義した関数の呼び出し方

関数名 ();

《引数も戻り値もない関数の利用》

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>関数の使い方</title>
</head>
<body>
<script>
  //関数の定義
  function sayHello() {
    console.log('こんにちは');
  }
  sayHello();  //関数の呼び出し
</script>
</body>
</html>

《実行結果》

関数の定義は記述順序に関係なく優先的に行われるので、関数の呼び出しが先に記述されてもいても問題なく動作します。

<script>
  sayHello();  //関数の呼び出し
  //関数の定義
  function sayHello() {
    console.log( 'こんにちは' );
  }
</script>

引数のある関数の書き方

引数とは、関数に渡す材料
引数は、複数指定することが可能（カンマ区切りで記述）

関数の定義

function 関数名 (引数を入れる変数名) {
　　処理;
}

定義した関数の呼び出し方

関数名 (引数として渡す値);

《引数のある関数の利用》

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>関数の使い方：引数あり</title>
<script>
  function sayHello(name) {
    console.log( name + 'さん、こんにちは' );
  }
  sayHello( 'よしお' );
</script>
</head>
<body>
</body>
</html>

《実行結果》

戻り値のある関数の書き方

戻り値は、関数の処理結果
return文が実行されると、関数の呼び出し元に戻ります
戻り値として指定した値が返却されるので、戻り値を代入する変数を用意して起きます

関数の定義

function 関数名 () {
　　処理;
　　return 戻り値;
}

定義した関数の呼び出し方

戻り値を入れる変数名 = 関数名 ();

《戻り値のある関数の利用》

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>関数の使い方：戻り値あり</title>
<script>
  function calc() {
    var num = 0;
    for(var i=1; i<=10; i++) {
      num += i;
    }
    return num;
  }
  var result = calc();
  console.log( result );
</script>
</head>
<body>
</body>
</html>

《実行結果》

この場合 calc関数は、1から10までの値を合算した結果を戻り値として返します。
return文が実行されると、変数numの中身「55」が呼び戻し元に返却されます。

関数の実行前

var result = calc();

var result = calc(); 関数の呼び出し
関数の実行
戻り値の返却

関数の実行後

var result = 55;

関数を呼び出して戻り値をコンソールに表示するだけの場合は、

  console.log(calc());

円の面積を求める

《引数と戻り値がある関数の利用》

関数の中から別の関数を呼び出す

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>関数の使い方：引数と戻り値あり</title>
<script>
  function calcCircle(radius) {
    return radius * radius * 3.14;
  }
  function callFunc() {
    var area = calcCircle( 5 );
    return area;
  }
  console.log( callFunc() );
</script>
</head>
<body>
</body>
</html>

callFunc開始
calcCircle開始（半径の値5を代入）
calcCircle終了（半径の値5で面積を求める計算の処理を実行）
callFunc終了（計算の処理が戻した値を、コンソールログに表示）

《実行結果》

関数は引数を受け取り、戻り値を返す
関数は定義しただけでは実行されない
呼び出しをおこなったタイミングで実行される