【プロゲート復習】Javascriptで関数を使おう②

プログラミング
難易度:★☆☆☆☆

この記事では、Javascriptで以下の内容に触れていきます。

  • 関数で引数を扱う
  • 関数で戻り値を扱う

対象読者は、次のような方を対象としています。

Javascriptで関数を学びたい!

プロゲートを復習したい!

前回は、関数の基礎を学びました。今回は、関数をもう少し深く学んでいきましょう!

前回のおさらい

前回は関数の基礎をまなびましたね!

function 関数名(){}』で関数を作り、『関数名()』で呼び出しでしたね!

function eat(){ console.log(“お箸をもつ”); console.log(“食べ物を掴む”); console.log(“口に入れる”); } eat();

関数の生成と、呼び出す処理です。ここで思い出しておきましょう!

関数で引数を使おう

関数で引数というものを使ってみましょう!

引数(引数)とは、関数に与える追加情報のようなものです。

関数を呼び出す時に一緒に引数を渡すことで、関数内でその値を使えるようになります。

引数を受ける関数を作ろう

それではまず、引数を受ける関数を作ってみましょう。

下のように、『function 関数名(引数){}』と書くことで引数を指定することができます。

function eat(food){
    //関数の処理
}

関数名の後の謎の()は引数のためだったんだね!

引数を受ける関数を呼び出そう

引数を受ける関数が作れたら、呼び出してみましょう!

『関数名(値)』と書きます。関数を()内の値を受け取り、引数に代入されます。

実際に呼び出してみましょう

function eat(food){
    //関数の処理
}

eat("ハンバーグ");

eat(“ハンバーグ”); と書くことで、引数foodにハンバーグを代入していますね!

引数を受け取った関数の処理

では、関数を呼び出した後の処理をみてみみましょう。

まずは以下のコードを実行してみてください

function eat(food){
    console.log(food);
}

eat("ハンバーグ");

あっ、引数で渡したハンバーグがログ出力された!

ハンバーグが引数foodに入ったというわけですね!

引数を使えば、同じ関数で、別の食べ物を表示させることもできます!

function eat(food){
    console.log(food);
}

eat("ハンバーグ");
eat("ミートボール");
eat("タコさんウィンナー");

同じ関数でも、引数の値を変えると色々なことができるんだね!

複数の引数を受け取る関数

引数は、2つ以上渡す事ができます!

実際にコードをみてみましょう

function eat(food,price){
    console.log(food + "は" + price + "円です");
}

eat("ハンバーグ", 700);

()で受け取る引数をコンマで区切ることで、複数の引数を指定できます!

引数は、並べられてる順に代入されていきます。例えば、『eat(700, “ハンバーグ”);』と呼び出すと、foodに700が入ってしまいます。

関数で戻り値を使おう

引数の次は、戻り値を学びましょう!これも超重要です!

関数は、処理結果を呼び出し元で受け取ることができます。

その処理結果を戻り値(もどりち)と呼び、このことを「関数が戻り値を返す」と言います。

戻り値のある関数を作ろう

戻り値を返すには、returnを使います!

return 値』と書くことで、関数はその値を戻り値として返します。

function tasizan(a,b){
    return a + b;
}

上の関数tasizanでは、【引数で渡された2つの値を足した値】が戻り値として、呼び出し元に返ります。

戻り値を受け取る

戻り値がある場合、関数の呼び出し部分が、そのまま戻り値に置き換わります

下のコードを実行してみましょう!

 

function tasizan(a,b){
    return a + b;
}

var sum = tasizan(2,3);
console.log(sum);

tasizan(2,3); の部分が戻り値の5に置き換わり、変数sumに5が代入されます。

関数tasizanを作れば、2つの値の足し算の結果が、いつでも得れますね!

returnによる処理の終了

returnについて詳しくみていきます。

returnは戻り値を返すだけでなく、関数の処理を終了させる性質を持っています。

つまり、return以降の処理は実行されないので注意してください。

returnした時点で強制終了されます!

関数のまとめ

以上関数について学習しました!

  • 関数を作って呼び出す
  • 変数のスコープ
  • 引数
  • 戻り値

この辺が理解できれば、関数は一旦OKです!

さて、Javascriptの基盤の勉強は一通り終わりました。

次は、今までの学習まとめ記事や、学んだ事を実践で使う記事を書いていこうと思います。

よりレベルアップしたい方は、そちらも読んでください!

また、Javascriptの参考書を1冊持っておくのも良いですね!

コメント