関数、引数、戻り値【JavaScript】

f:id:morning-output:20200922112257j:plain

const 定数名 = function() {
　// まとめたい処理
};

関数とは複数の処理をまとめたものです。上記の式で関数を定義します。

定義した処理内容は、定数に代入されています。

f:id:morning-output:20200927101421p:plain

関数は定義しただけでは実行されません。「定数名()」で関数を呼び出す必要があります。上の画像ではmorning()で呼び出しています。

f:id:morning-output:20200924111856p:plain

先ほど記述した「function()」の部分を「() =>」とシンプルにすることができます。

この書き方をアロー関数と呼びます。

const 定数名 = (引数名) => {
　// 処理
};

引数とは、関数などに渡すことができる値のことです。

f:id:morning-output:20200924114125p:plain

「("ブラックジャック")」と入力した値が、引数「(name)」に代入されています。

引数は関数の中で、定数のように扱えるので「${name}」で呼び出すことができます。

const 定数名 = (第1引数, 第2引数) => {
　// 処理
}

関数は引数を複数受け取れます。引数同士は,(コンマ)で区切ります。

f:id:morning-output:20200924135036p:plain

渡す引数は定義した時の順番と同じです。

const 定数名 = () => {
　return 値;
};

戻り値とは、関数から呼び出した場所に渡される値のことです。

「関数が戻り値を返す」のような言い回しをします。

f:id:morning-output:20200924144715p:plain

呼び出した関数に戻り値がある場合、関数の呼び出し部分は戻り値に置き換わります。

上の画像では、関数の呼び出し部分「add(3, 7)」を定数「sum」に代入しています。

またreturnは、関数の値を終了させる性質も持っているので、returnの後に記述した処理は実行されません。

スコープとは、定義した変数や定数が使える範囲のことをいいます。

関数の引数や、関数内で定義した定数や変数は、その関数の中でしか使えません。

一方で、関数の外で定義した定数や変数は、関数の中でも使えます。

朝活のブログ