JavaScript（関数）

関数

「いくつかの処理をまとめたもの」

関数の定義

以下のように関数の用意をすることを「関数を定義する」と呼ぶ

//関数の書き方
const 定数名 = function(){
    まとめたい処理
} 

//例
const introduce = function(){
    console.log(“こんにちは”);
    console.log(“私は山田太郎です”);
} ;

関数の呼び出し

関数を定義しただけでは処理は実行されない

「定数名()」で関数の処理を実行できる

//例
const introduce = function(){
    console.log(“こんにちは”);
    console.log(“私は山田太郎です”);
} ;
introduce();

アロー関数

「function()」の部分を「() =>」と書く
この書き方のことをアロー関数と呼ぶ

//例
const introduce = function(){
    console.log(“こんにちは”);
    console.log(“私は山田太郎です”);
} ;

↓↓↓

const introduce = ()=>{
    console.log(“こんにちは”);
    console.log(“私は山田太郎です”);
} ;

引数

関数に与える追加情報のようなもの

const 定数名 = (引数名)=>{
    ・
}

//例
const introduce  = (name)=>{
    ・
}

引数（追加情報）を受け取る、関数（処理）の呼び出し

「定数名(値)」
と書いて呼び出す
関数は指定した値を受け取り、その値は引数に代入される

（後から情報を設定できるってこと！）

複数の引数を、受け取る

（追加情報が増える）

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

//例
const introduce = (name, age) => {
    console.log(`私は${name}です。`)
    console.log(`私は${age}歳です。`)
}
introduce(“山田太郎” , 22);

//コンソール
私は山田太郎です。
私は22際です。

戻り値

呼び出し元で受けとる処理結果を戻り値と呼ぶ
関数が戻り値を返すと言う

呼び出し元
「定数名(2 ,5);」
引数
「const add = (number1,number2) =>」
戻り値
「7」

戻り値のある関数

関数の中で return を使うと、呼び出し元で値を受け取れるようになる
「return 値」と書くことで、関数はその値を戻り値として返す
関数の呼び出し部分を定数に代入することができる

returnは関数の処理を終了させる性質を持っている
returnをした後に処理を入れても実行されないので注意！

//例
const add = (a,b) => {
    return a + b ;
    console.log(“計算しました”);
} 
add(1,3);
//コンソール
4

//下線部分は表示されない！

スコープ

関数の引数や変数は、その関数内でしか使うことができない
それぞれの定数や変数の使用できる範囲のことを スコープ と呼ぶ

//関数内で定数を定義した場合

const introduce = () => {
    const name = “山田太郎”;
    ・
    ・
    //定数name使える（スコープ)
}
//定数nameが使えない

//関数外で定数を定義した場合
const name = “山田太郎”;
const introduce = () => {
    ・
    ・
    //定数name使える（スコープ)
}
//定数name使える（スコープ)