0
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2020-05-08

関数について理解を整理しました。
アロー関数ではなく、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);
0
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?