【JavaScript】関数【自己学習】

##関数でできること
関数を使用することで、1つの変数や定数に複数の処理をまとめて代入することができる。また、呼び出し元から値を受け取り、処理の結果を返すことができる
##関数の書き方
####関数を定義する
function ()と書き、中括弧({})内にまとめたい処理を書くことで関数を定義することができる。

function-1.js

const introduce = function() {
  console.log("私の名前は山田太郎です");
  console.log("年齢は１８歳です");
};

introduce();  //私の名前は山田太郎です
              //年齢は１８歳です

関数を呼び出し、処理を実行するには、変数or定数名()と書く。console.log()は必要ない。

####アロー関数
ES6から、function()を() =>と省略できるようになった。この書き方はアロー関数と呼ばれる。

function-2.js

const introduce = () => {
  console.log("私の名前は山田太郎です");
  console.log("年齢は１８歳です");
};

introduce();  //私の名前は山田太郎です
              //年齢は１８歳です

####引数での値の受け取り
関数では呼び出し元から値を引数として受け取り、それらを処理に利用することができる。

function-3.js

const data = (name, birthplace) => {
  console.log(`氏名: ${name} 出身地: ${birthplace}`);
};

data("鈴木一郎", "東京");  //氏名: 鈴木一郎 出身地: 東京
data("山田花子", "大阪");  //氏名: 山田花子 出身地: 大阪

上記のコードでは、data関数の呼び出し元の２つの値をそれぞれnameとbirthplaceという引数として受け取り、処理内で利用している。

引数が受け取る値は、呼び出し元の値が書かれた順番に対応していることに注意する。

####戻り値
関数の中にreturnと書くことで、処理された結果の値を呼び出し元に返すことができる。

function-4.js

const triangle = (base, height) => {
  return base * height / 2;
  console.log("三角形の面積");  //出力なし
};

triangle(3,6);  //出力なし

console.log(triangle(4, 7));  //14

const triangleArea = triangle(5, 8);  //戻り値は代入可能
console.log(triangleArea);  //20

関数triangleは呼び出し元のtriangle(3,6)の値を引数として受け取り、returnで指定したbase * height / 2の処理の結果である9という値を呼び出し元に戻り値として返している。

returnで戻り値を返した時点で関数内の処理は終了する。そのため、returnより下の行に書かれた
処理は実行されない。

呼び出し元のtriangle(3,6)は戻り値に置き換わり、４という値となるため、そのままではコンソール上では出力されない。戻り値をコンソール上で出力するためにはconsole.log(呼び出し元)と書く。

戻り値が返された呼び出し元は、変数や定数に代入することもできる。