【プロゲート復習】Javascriptで関数を使ってみよう

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

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

  • 関数とは
  • 変数のスコープ

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

Javascriptで関数を学びたい!

プロゲートの復習がしたい!

前回では、配列について学びました。今回は、関数に触れていきましょう

プログラミングでの『関数』とは

今回は、関数について学びます!関数まで理解できれば、プログラミングの根っこの知識は一通り習得したことになります!

関数って難しそうだけどがんばろう!

関数とは、処理を1まとめに入れたものです。

例えば、『食べる』という行為を詳しく書くと、

お箸をもつ 食べ物をつかむ 口に入れる 噛む 飲み込む

という1連の流れを一言で『食べる』としています。

しかし、誰かに『食べる』ことを命令するとき、いちいち1連の流れを説明せずに、『食べて』というでしょう。

プログラムの世界でも、1連の流れをいちいち命令するのがめんどくさいのです。

そこで、『関数』として1まとめにしておくのです。

処理をまとめて入れた箱のようなイメージだね!

実は、ずっと使ってきたconsole.log()も関数の1つです。

本来コンソールにログを出力するには、もっとコードを書かなければいけないのですが、Javascriptのデフォルトで、console.log()を用意してくれているので、1行で出力できるようになっています!

ちなみに、配列の時にでてきた、push()も関数です。

関数のメリットは以下の通り

  • 1連の流れをまとめておける
  • 同じコードを2度以上書かなくて済む

 

関数を作ってみよう

それでは実際に関数を作ってみましょう

関数をつくるには、下画像のように、function() 関数名{} と書き、{}内に関数で実行させたい命令を書きます。

では実際に例を書いてみましょう。

function eat(){

    console.log("お箸をもつ");
    console.log("食べ物を掴む");
    console.log("口に入れる");
    
}

関数名eat にログ出力の処理が3つ入っています。

関数を呼び出そう

関数を作れたら、実際に呼び出してみましょう

呼び出すときは『関数名()』と書くことで呼び出すことができます。

例えば、さっきつくった関数を呼び出すときは、下コードのようにします。

function eat(){

    console.log("お箸をもつ");
    console.log("食べ物を掴む");
    console.log("口に入れる");

}

eat();

関数内の処理が実行されましたね。

1度作った関数は何度でも呼び出すことができます!

関数は呼び出さないと処理が実行されません。呼び出して初めて処理を実行できます

変数のスコープを理解しよう

関数を学ぶには、変数のスコープについて理解しておく必要があります。

スコープとは変数が使える範囲を決定するものです。

スコープには、ローカルスコープグローバルスコープがあります。

ローカルスコープ

関数内で定義された変数は、ローカルスコープを持ち、その変数が定義された関数内でしか使うことはできません。

また、ローカルスコープをもつ変数のことをローカル変数と呼びます。

変数foodは、関数eat内でしか使う事ができません

グローバルスコープ

関数の外で定義された変数は、グローバルスコープというスコープを持ち、プログラムのどこでも使うことができます。また、グローバルスコープをもつ変数のことをグローバル変数と呼びます。

今までの学習で使ってきたのは全てグローパル変数です。

変数foodは、プログラムのどこでも使うことができます

ローカル変数とグローバル変数の

ローカル変数とグローバル変数の名前を一緒にしてみましょう

var food = "ハンバーグ";

function eat(){

    var food = "チキンステーキ"
    console.log(food);
}

eat();
console.log(food);

関数内で定義した変数foodは、関数外の変数foodに影響を与えていないことがわかります。

このことから、変数名が同じであってもローカル変数とグローバル変数はまったく違う変数であることがわかります。

しかし、変数名を同じにするのは基本NGと思ってください。

なぜなら、コードが長くなってくるとどれがローカル変数でどれがグローバル変数なのか分かりにくくなるからです。

それを回避するためには、変数名の付け方にルールを決めておくと良いと思います!

例えば、『グローバル変数はgから始める』と決めておけば、グローバル変数は、gNameやgFoodとなります。

こうすると、ローカル変数とかぶることはありません。

次回は関数をさらに深く学びます

今回は関数について学びました

関数は、処理をまとめておけるので、色々と使い道がありそうですね!

関数のメリットは以下の通りです。

 

  • 1連の流れをまとめておける
  • 同じコードを2度以上書かなくて済む

しかし、関数の素晴らしさはまだまだあります!次回はもう一度関数を学びます!

次回、あなたは関数の便利さに驚愕する!  多分、、

Javascriptの体系的な知識を学びたいなら以下の書籍がおすすめです。

コメント