JS 関数　後編　(JSアウトプット)

あいさつ

初めての人は初めまして！知っている人はこんにちは！
中学生バックエンドPGのAtieです！
今回は今までの奴と比べて難易度が跳ね上がります
それでは！

匿名(無名)関数と関数式

匿名関数と関数式について解説していきます！

匿名関数とは”関数の名前がなくても実行できる関数”です
コールバック関数に一度きりで使われる場合によく使われます
普通の関数と匿名関数の文法を比べてみました！

/*普通の関数*/
function 関数名 (仮引数1,仮引数2) {
    //処理
};

/*匿名関数*/
const 変数名 = function(仮引数1,仮引数2){
    //処理
};

違いは名前が関数名なのか変数名なのかの違いです
関数式は関数を変数に入れる式です

const 変数名 = function(仮引数1,仮引数2){  //関数式
    //処理
};

匿名関数も変数名で実行できます

変数名();

コールバック関数

コールバック関数とは関数の引数に渡される関数のことです
「ん？」
例えばAという処理が終わったらBという処理をしたいとします
普通ならこう書きますよね？

function A () {
    //Aの処理
}
function B () {
    //Bの処理
}
A()
B()

しかしコールバック関数を使うとこのような書き方ができます

function A (fn) {
    //Aの処理
    fn()
}
function B () {
    //Bの処理
}
A(B())

コールバック関数を使うとこのように書くことができます
先ほど「関数式」というのを習いましたよね？
関数式は変数に関数を入れることでしたが
今回は引数に関数を入れています

コードを例に解説すると
関数Aと関数Bを定義しました
関数Aの引数にはfn(functionの略)を入れておいて関数Aの処理が終わったら引数fnを実行します
関数Aを実行するときに引数に関数Bを渡しているので関数Aの中で実行されるfnは関数Bになります

これがコールバック関数です
そしてこの関数を引数として受け取る関数を高階関数といいます
なので構文はこのようになります

function 高階関数 (コールバック関数) {
    //処理
}

もちろんコールバック関数に引数を渡すこともできます

function A (fn,number) {  //第二引数にnumberという引数を受け取る
    //Aの処理
    fn(number)            //関数fnにnumberという引数を渡す
}
function B () {
    //Bの処理
}
A(B(),6)                  //第二引数に6を渡すことで関数fnに引数を渡せる

コールバック関数に匿名関数を入れることも可能です

A(function () {
    //関数の処理
})

こうすることで引数に直で関数を書き込むことができます
もちろん実行できます

コールバック関数の実践的使い方は
例えばAという処理で実行するかどうかを聞いて関数Bを実行するなら実行する
実行しないなら実行しないということができます
少し実践的な関数です

function CanYouRun (fn) {
    if (window.confirm("実行しますか？") === true) {
        fn()
    };
};

この関数は条件分岐をしています
window.confirmはOKかキャンセルを聞きOKだったらTrue
キャンセルだったらFalseが返ってくるのでifの条件式に「帰ってくる値がtrueだったら実行」としています
そしてtrueだったら引数に渡された関数fnが実行されます

GithubのDeleteの関数を作る

今回はGithubのリポジトリ削除の挙動をまねします

使うのはwindow.promptです
このメソッドは実行すると画面に入力フォームを出し入力された文字列を戻り値とするメソッドです
では書いていきます

function deleteRipository () {
    console.log("削除しました");
};

function questionDelete (fn) {
    if (window.prompt("実行しますか?") === "実行") {
        fn();
    };
};

questionDelete(deleteRipository);

まずはリポジトリを削除する関数を定義し消すかどうかを聞く関数を定義しました
if分にwindow.promptを条件式にしました
実行と入力されたらif分はtrueになり関数fnが実行されます

さいごに

最後まで読んでいただきありがとうございました！
今回はJSの関数です
わからなかったら一度で理解しようとせず何度もこの記事を読んでみてください
それでもわからなかったらぼくのTwitterにDMをください！
プログラミング学習の相談にのりますよ！
次回はwebAPiです！
では！また次回の記事で！

Twitterしています→AtieのTwitter

学習、参考資料

【JavaScript入門 #7】匿名関数、高階関数、コールバック関数を攻略せよ！【ヤフー出身エンジニアの入門プログラミング講座】