今回は関数というしくみの理解をさらに深めていきます。

---

１　関数をつくる

　前回は単純な足し算、割り算を使った関数だったので独自の関数を作ってみます。

HTML（一部）

<script>
    function calcArea(base, height){
        let area = (base * height) / 2;
        return area;
    }
    let a = 12;
    let b = 24;
    let c = calcArea(a, b);
    document.write("<p>三角形の面積：" + c + "</p>");
</script>

ブラウザ

　ありそうでなかった（？）三角形の面積を求める関数です。

---

２　関数の上書き

　ここからは、関数のしくみやルールの紹介です。

HTML（一部）

<script>
    function helloSan(name){
        document.write("<p>" + name + "さん、こんちには。</p>");
    }
    a = "鈴木";
    helloSan(a);
</script>

ブラウザ

　これは関数 helloSan を定義して、その後に「鈴木」を代入した変数 a を引数として、その関数 helloSan を呼び出しています。

　次に関数 helloSan を上書きしてみましょう。

HTML（一部）

<script>
    function helloSan(name){
        document.write("<p>" + name +"さん、こんちには。</p>");
    }
    function helloSan(name){
        document.write("<p>こんにちは、" + name + "さん。</p>");
    }
    a = "鈴木";
    helloSan(a);
</script>

ブラウザ

　後から定義したものが適用されていることがわかると思います。

---

３　変数のスコープ

　次はスコープ（有効な範囲）という考え方です。

HTML（一部）

<script>
    let a = "関数の外側";
    function display(){
        let b = "関数の内側";
        document.write("<p>" + a + "です。</p>");
        document.write("<p>" + b + "です。</p>");
    }
    display();
    document.write("<p>----------------</p>");
    document.write("<p>" + a + "です。</p>");
    document.write("<p>" + b + "です。</p>");
</script>

ブラウザ

　注目したいのは、関数内と関数外に同じ記述があることです。
「document.write(“<p>” + a + “</p>”);」と「document.write(“<p>” + b + “</p>”);」の部分ですね。
　しかし実行結果をみると、関数内の write メソッドは両方実行されて「関数の外側」「関数の内側」と表示されているのに対して、関数外の write メソッドは「関数の外側」という部分しか実行されていません。

HTML（一部）

<script>

    function display(){
        let b = "関数の内側";

        document.write("<p>" + b + "です。</p>");
    }

    document.write("<p>" + b + "です。</p>");

</script>

　分かりやすいように変数 b の部分のみを抜き書きしてみました。
　見てわかるように、変数 b を利用できるのは関数内にある場合であり、関数の外にある場合は利用できないのです。
　これがローカルスコープという考え方です。
　そしてローカルスコープを持つ変数のことをローカル変数といいます。

HTML（一部）

<script>
    let a = "関数の外側";

    function display(){

        document.write("<p>" + a + "です。</p>");

    }

    document.write("<p>" + a + "です。</p>");
</script>

　ところが変数 a は関数の外に定義されています。
　このような場合は、関数内であろうと外であろうと利用が可能となります。
　これがグローバルスコープという考え方です。
　そしてグローバルスコープを持つ変数のことをグローバル変数といい、これはプログラム全体で使用可能です。

---

４　次回

　さて次回も引き続き「関数」です。
　さらに関数の性質を理解していきましょう。