【JavaScript】関数、ローカルスコープ、グローバルスコープ、引数、戻り値

関数について理解を整理しました。
アロー関数ではなく、function構文で説明しています。

関数

処理をまとめたもの。
たとえるなら自動販売機、ツクールならコモンイベント。

関数を作る＝処理内容（商品）を登録しておく。
関数を呼ぶ＝ボタンを押して処理（商品）を取り出す。

関数を作る、実行する

    function 関数名(){
        実行内容;
    }
    関数名();

    function hello(){
        console.log("こんにちは");
    }
    hello();//関数helloを実行

引数と戻り値を加える場合
　引数……関数に与える値、入力値
　戻り値……関数に与えて戻る値、出力値

    function 関数名(引数){
        実行内容;
        return 戻り値
    }
    関数名(引数);

    function hello(name){
        return "hello" + " " + name;
    }
    let greet = hello("taro");
    console.log(greet);

実行結果

hello taro

引数は,区切りで複数与えることもできる

    function hello(firstName,lastName){
        return "hello" + " " + firstName + " " + lastName;
    }
    let greet = hello("taro","yamada");
    console.log(greet);

実行結果

hello taro yamada

ローカルスコープ

関数で定義された変数（var,let）は関数内でしか使用できない。

    function hello(){
        let name = "you";
        console.log(`スコープ内からこんにちは${name}さん`);
    }
    hello();
    console.log(`スコープ外から、こんにちは${name}さん`);

実行結果。

    スコープ内からこんにちはyouさん

変数nameの値を使用できる

    スコープ外から、こんにちはさん

hello関数の外なので変数nameが使用できない

グローバルスコープ

・関数の外(function{}の外)で変数、定数を定義した場合、関数の外で扱える
・同名の変数、定数が存在する場合はローカル変数が優先される

    let name = "who";
    function hello(){
        let name = "you";
        console.log(`ローカル変数のあなたは${name}さん`);
    }
    hello();
    console.log(`グローバル変数のあなたは${name}さん`);

実行結果

    ローカル変数のあなたはyouさん
    グローバル変数のあなたはwhoさん

引数

関数名()の"()"に与える追加情報。

関数を作る時に引数を設定すれば、処理内容と紐づけられる。

    function hello(name){
        console.log(`引数を使って、こんにちは${name}さん`);
    }

関数を使うときは()内に値を指定する。

    hello("who");

実行結果

    引数を使って、こんにちはwhoさん

複数の引数がある場合は","で区切る。

    function hello(lastName,firstName){
        console.log(`引数を使って、こんにちは${lastName} ${firstName}さん`);
    }
    hello("Tailor","Swift");

実行結果

    引数を使って、こんにちはTailor Swiftさん

戻り値

returnを使って値を戻す（returnする）

    function add(a,b){
        return a + b;//引数aとbの足し算
    }
    console.log(add(1,2));//戻ることを期待して、引数に1と2を与えて実行

実行結果

    3

応用：
①処理内容を関数を作る＝呼び出されたときに対応する仕組み。自販機
②関数の外から引数を渡す変数を作る＝呼び出す処理。コインを入れてボタンを押す所作

    function add(a,b){
        return a + b;
    }
    let sum = add(1,2);
    console.log(sum);