関数

fanctionと宣言をし、関数名を設定。その後ろに()を書き、{}の中に処理を書く。

例)

function 変数名(引数) {
  実行したい処理;
  return 戻り値;
};

関数の結果を戻り値という。JavaScriptでは戻り値を記述するためにreturn文を用いる。必要なければreturn文は省略可能
引数は,(カンマ)で区切って複数記述できる。
引数を受け取らない場合は()のみ記述

練習）関数を使って自分が生まれてからの秒数を表示させる

HTMLのbodyタグに

<body>
    <p id="birth-time"></p>
    <script src="今回作成するJavaScriptファイル名"></script>
</body>

と書きJavaScriptに

var myBirth=new Date(1990,1,9,15,53);
function measureTime(){
    var now=new Date();
    var seconds=(now.getTime()-myBirth.getTime())/1000;
    document.getElementById('birth-time').innerText=
     `生まれてから${seconds}秒経過。 `;
}
setInterval(measureTime,50);

と書く。以下、解説

var myBirth = new Date(1990, 1, 9, 15, 53);

1990年2月9日15時53分に誕生したと仮定したもの。月のみ0からカウントするため2月を1と入力。
.getTime() で1970年1月1日0時0分0秒からの指定した日時までのミリ秒を取得できる。
document.getElementById('').innerText = でHTMLのid属性に＝以降の文字列を設定
${変数}...バッククォートで文字列を囲めばドル記号と波括弧で変数を埋め込むことができる。つまり

`生まれてから${seconds}秒経過。 `;

と

'生まれてから' + seconds + '秒経過。';

は同じ内容である。

setInterval...指定したミリ秒ごとに指定した関数を繰り返し実行する関数。

無名関数(関数リテラル)

関数に名前を付けないで変数に代入させる

例 ))

function example(name) {
  return `${name}さん、おはよう`;
}

console.log(example('リサ'));

上記の関数を無名関数にすると

const example = function (name) {
  return `${name}さん、おはよう`;
}

console.log(example('リサ'));

＊無名関数を呼び出すには変数名を使用している(無名関数は変数に代入して利用する)

関数名がある方は関数の定義が呼び出し側の後でも動作する(巻き上げ)が無名関数は巻き上げがない

アロー関数

無名関数(関数リテラル)

const 変数名 = function(引数) {
  実行したい処理;
  return 戻り値;
};

アロー関数

const 変数名 = (引数) => {
  実行したい処理;
  return 戻り値;
};

アロー関数も関数名を記述しないため変数に代入して利用する。
アロー関数はfunctionも記述しない
関数スコープの前に => を記述

関数処理がreturn文のみだった場合は波括弧とreturnを省略して

const 変数名 = (引数) => 戻り値;

また、引数が一つのみの場合()を省略して記述できる

const 変数名 = 引数 => 戻り値;

tanukitsune3の日記

JavaScriptの関数

関数

無名関数(関数リテラル)

アロー関数