関数でできること
関数を使用することで、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(呼び出し元)と書く。
戻り値が返された呼び出し元は、変数や定数に代入することもできる。