go on program

JavaScriptの関数の作成方法について

2020/07/03

関数とは使い回せる便利なプログラムの集まりです。
関数を作ることで同じ動作のプログラム内で何度でも使い回すことができます。
あらかじめ、用意しておくことで関数を呼び出し、楽をすることができます。
修正が発生した場合でも、その関数を変更することで全体変更する必要が無くなります。

関数の基本

基本の型は下記の通りになります。関数名はわかりやすい名前で作成しましょう。

function 関数名 (引数名, 引数名) {
 //処理を記述する
 return //戻り値(または返り値)
}

function testscoring(score){
     if(score>80){
      console.log("大変よくできました");
     }else if(score>60){
      console.log("よくできました");
    }else{
        console.log("頑張りましょう");
    } 
}
testscoring(67);
//結果は、「よくできました」が表示されます。
let score = 85;
testscoring(score);
//結果は、「大変よくできました」が表示されます。

ローカル変数

関数内でのみ有効になる変数をローカル変数と言います。
必ず、”return”で返すようにしましょう。

function testscoring(score){
    let testresult;
    if(score>80){
        testresult = "大変よくできました";
        return testresult;
    }else if(score>60){
        testresult = "よくできました";
        return testresult;
    }else{
        testresult = "頑張りましょう";
        return testresult;
    } 
}
let score = 85;
testresult = testscoring(score);
console.log(testresult);

アロー関数

アロー関数を使うことで、関数をより短く書くことができます。

let testresult = (score) =>{
    if(score>80){
        testresult = "大変よくできました";
        return testresult;
    }else if(score>60){
        testresult = "よくできました";
        return testresult;
    }else{
        testresult = "頑張りましょう";
        return testresult;
    } 
}
testresult(86);
//"大変よくできました"が表示されます。

関数式

関数を変数に入れているのが関数式になっていて、関数名がアロー関数と同様に宣言してなくても使うことができます。

let testresult = function(score){
    if(score>80){
        testresult = "大変よくできました";
        return testresult;
    }else if(score>60){
        testresult = "よくできました";
        return testresult;
    }else{
        testresult = "頑張りましょう";
        return testresult;
    } 
}
testresult(76);
//"よくできました"が表示されます。

コールバック関数

引数に関数を入れることができるコールバック関数があります。

function 関数名( 別の関数名 ) {
//処理を記述する
}

function scoring(fun){
    if(window.confirm("採点しますか?")){
        fun();
    }
}
scoring(
    function(){
    console.log("よくできました");
});

おさらい

簡単な関数から書いて慣れるようにしましょう。
一つ一つの関数の動きを理解することで慣れてくると思います。

関連記事
RELATED