【JavaScript】関数function( ){ }で処理をまとめる

関数は複数の処理をまとめたものです。関数も変数と同様に定義し、function(){ }内に処理を記します。関数名();で関数を呼び出すと処理をまとめて実行することができます。

//関数の定義
const pet = function(){
 console.log("dog");
 console.log("cat");
};

//関数の呼び出し
pet();

function()を省略して書くこともできます。function()の代わりに「() =>」を記します。これをアロー関数と呼びます。

const pet = ()=>{
 console.log("dog");
 console.log("cat");
};

pet();

引数とは関数に与える追加情報のようなものです。引数名をアロー関数内（function()内でも良いです）に示すと、その引数に対して後から値を入れることができます。

const pet = (name)=>{
 console.log(name);
};

//引数nameにたろうを代入した関数を実行する
pet("たろう");

関数内に計算式を入れておけば、関数に引数を入れて呼び出すだけで、簡単に値を出力することができます。

//税込み価格計算関数
function tax(price){
   return price + price * 0.1
}

console.log(tax(1000));

引数は複数個指定することができます。その際は「,」で引数名を区切ります。関数を実行する時も、値を２つ渡します。

const pet = (name,food)=>{
 console.log(`名前は${name}です。${food}を食べます。`);
};

pet("たろう","肉");

呼び出し元から返される値を戻り値と呼びます。ある関数を呼び出して、その関数から返される値、ということです。returnの後に続くものが戻り値となります。これを実行すると、「たろう肉」と出力されます。

const pet = function(name,food){
 return `${name}+${food}`;
};

const namefood = pet("たろう","肉");
console.log(namefood);

また、returnは関数の実行を終了させる役割もあります。returnの後に書かれた処理は実行されないので、注意が必要です。

条件式をreturnすると、true・falseを返すこともできます。下のコードでは「true」が出力されます。

const pet = function(name,food){
 return name === "たろう" && food ==="肉";
};

console.log(pet("たろう","肉"));

関数内の定数は関数の外では使えない

関数内で定義した変数は関数の外では使用することはできません。この変数が使える範囲のことをスコープと呼びます。これは関数だけに限らず、ifやwhileなどの{ }内で定義された変数も同様の性質を持ちます。

関数の外で定義された変数は、関数内でも関数の外でも使用することができます。

練習がてらに作ってみましょう！色んな書き方ができます。

const Max = (a,b,c)=>{
  let max = a
  if(max < b){
    max = b;
    };
  if(max < c){
    max = c;
  }
  return max;
};

console.log(Max(23,45,24));

関数はオブジェクトに含めることもできます。呼び出すには、変数名.プロパティ名()を記します。

const kansu = {
 kansu1: ()=>{
   console.log("関数です")
 }
};

kansu.kansu1();