javascriptの構成要素-関数-

更新履歴

2020/10/14 7:40 「関連記事」セクションを独立
2020/10/11 11:30 コード例を修正
2020/10/11 11:10　「関数の中の関数」を追加
2020/10/08 21:20 「関数のスコープ」を追加
2020/10/07 07:20 「関数の使い方」「関数の引数」を追加
2020/10/03 10:00 初回投稿

この記事の目的

javascriptの関しての知識をまとめています．
参考サイトの内容を要約あるいは抜粋，それらの解釈を中心に書いています．
「5. 数値と演算子」以降では参考サイトの一部または全部が英語のためそれの翻訳を含んでいます．
コード上の明らかな間違いがありましたらコメントいただければ幸いです．

その1（立ち位置，主な機能，変数，数値と演算子）はこちら
その2（文字列と配列）はこちら
その3（条件式と繰り返し文）はこちら

関数

関数とは，再利用可能なコードのかたまり．特定の機能を持つものを関数として定義しておくことで，あとは関数名と引数により呼び出すことができる．

ブラウザ組み込み関数

これまで登場した，文字列操作や配列の操作，また乱数の作成を行うときに用いていたのも関数の1つ．

    let departureAirport = 'Narita International Airport';
    let arrivalAirport = departureAirport.replace('Haneda', 'Kansai');
    // replace('置換する文字列','置換後の文字列')は文字列オブジェクトのもつメソッド（関数）
    console.log(departureAirport); // Narita International Airport
    console.log(arrivalAirport); // Kansai International Airport

    let myArray = ['I', 'have', 'a', 'pen'];
    let madeStringFromArray = myArray.join(' ');
    // join('連結時の文字列')は配列オブジェクトの持つメソッド．
   console.log(madeStringFromArray); // I have a pen

関数の使い方

関数を定義する部分と関数を使う部分に2つに分かれている．

    //関数の定義
    function myFunction() {
        alert('hello world!');
    }
    //関数の使用
    myFunction();

名前をつけない関数（匿名関数）というものも定義，使用できる．イベントハンドラで使われることが多い．匿名関数はこのほかの使い方もできるが，コードの可読性から行っても以下のようなイベント発火のレスポンスとして用いるにとどめた方が良い．

    const myButton = document.querySelector('button');
    myButton.onclick = function() {
        alert('hello');
    }

関数の引数

excelの関数でもよく登場するが，関数がその機能を発揮するために必要とする変数，配列のこと．例えば，ある100個の数値の平均を求める場合には当然．その100個の数値が入った配列が必要となる．引数は英語でargumentと言うが，他にパラメーター、プロパティ、アトリビュート（属性）などと呼ばれることもある．

    let a = [1];
    const n = 100;
    for (let i = 1; i < n; i++){
        a.push(i + 1);
    }
    console.log(GetAverage(a)); // 50.5

    //関数の定義
    function GetAverage(a) {
        let n = a.length;
        let average = 0;
            for (let i = 0; i < n; i++){
                average += a[i];
            }
        return average /= n;
    }

関数のスコープ

関数内で定義されている変数や配列は基本的にその関数内からしかアクセスできない．言い換えると関数内で定義された変数や配列は「ローカル」変数/配列であるといい，その関数内にしかスコープを持たない．

対照的に関数の外側で定義された変数や配列は関数を跨いでアクセスすることが可能でこれらを「グローバル」変数/配列という．

プログラミング言語学習では必ず言われることだが関数のスコープをむやみに広げず，必要とあらば引数を介して変数や配列を受け渡すことが推奨される．

let x = 8; //グローバル変数
    console.log(add(x)); // 10
    console.log(subtract(x)); // 4

    function add() {
        let y = 2; //ローカル変数
        return x + y;
    }

    function subtract() {
        let z = 4; //ローカル変数
        return x - z;
    }
    alert(y); //error: Uncaught ReferenceError: y is not defined

関数の中の関数

関数は特定の機能をもつものであるので，その機能を実現するためにいくつかのステップが必要とされる場合，関数の中で関数を呼び出すことによりステップごとに分割できる

    function ImportTextFromFile() {
        let fileName;
        let importedText;

        OpenFile(fileName);
        ImportText(fileName, importedText);
        DisplayContents(importedText);
}

    function OpenFile(fname) {
        // 省略
    }
    function　ImportText(fname, text) {
        // 省略
    }
    function DisplayContent(text) {
        // 省略
    }

参考サイト

関数

neigetale’s blog