関数とは？

JS プログラミング 初心者

関数とは何か？

タスクや表計算を実行する文の集まり:MDN ちょっとわかりにくい。。

料理で例えるなら

子供に料理を手伝ってもらうとき

  • 兄:野菜を切ってもらう
  • 弟:かき混ぜる

自分は炒めることに集中できる、この手伝ってくれる子供たちが関数
オブジェクトのメソッド = 関数

関数の宣言

// 普通の関数(メソッド)宣言
const foo = {
  alert: function () {},
}

//省略した記述
const foo = {
  alert () {},
}

関数の基本

書式

function foo(仮引数1, 仮引数2) {
  return 関数の返り値 ;
},

// 関数名は同士を先頭にしたり、キャメルケースがよく見られる
function addName() {}

//例
function cut(food) {
  //切る処理

  const cutFood = food.slice();
  return 関数の返り値;
}

// 関数を使用して、使いやすいように変数へ代入している
const cutCarrot = cut(carrot); 
const cutPotato = cut(potato);

returnのないとき

returnが必要ない関数は、

  • 料理を出す
  • ゴミを捨てる

といった処理は返り値がいらない
ゴミ捨て係がいれば、その人にゴミを渡せば捨ててくれる
この場合は返してもらうものがないと理解することができる。

function throwAway (food) {
  delete food;
  // returnは付けない
}

より具体的な例

function isTweetable(text) {
  return text.length <= 140 ;
};

// return無しの関数
function alertTweetable(text) {
  if(isTweetable(text)) {
    alert("you can tweet!");
  }
};

匿名(無名)関数について理解する

関数は値として利用できる(関数式)

const isTweetable = function(text) {
  return text.length <= 140 ;
};

関数ではfunctionの後に名前を書かないといけないが、書かなくても利用できるのが匿名関数となる。

コールバック関数について理解する

関数の中で関数を実行するもの

書式

function 高階関数(コールバック関数) {
  コールバック関数();
}

料理での例

手洗いで考える、子供に手を洗いしたか確認 自分で確認はめんどくさい、子供の

//通常
function bring(food) {
  if ( /* 手洗いを追えたら */ ) {
    // 食材を持ってきてもらう
  }
}

function peer(food) {
  if ( /* 手洗いを追えたら */ ) {
    // 食材の皮をむいてもらう
  }
}

function cut(food) {
  if ( /* 手洗いを追えたら */ ) {
    // 食材を切ってもらう
  }
}



//コールバック関数
// fn はfunctionの略 , 手洗いを終えたらやってほしい処理を引数として関数を渡す
function washed(fn) {
  if (/* 手洗いを終えたら */) {
    fn(); //コールバック関数の処理
  }
}

function bring(food) {
   // 食材を持ってきてもらう
}

function peer(food) {
   // 食材の皮をむいてもらう
}

function cut(food) {
   // 食材を切ってもらう
}

変更点があるときに修正しやすかったり、コード全体の見通しがよくなる

具体的な例の自作

function unfollow() {
  console.log("フォローを外しました");
}

function cancelTweet() {
  console.log("ツイートをキャンセルしました");
}

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

confirmed(unfollow);

//匿名関数を利用する場合
const cancelTweet = function() {
  console.log("ツイートをキャンセルしました");
};

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

confirmed(cancelTweet);

//直接関数の内容を渡すのも可能
//一度しか利用しないときはこのような形が利用される。
confirmed(function() {
  console.log("ツイートをキャンセルしました");
});

//githubの削除確認の例

function confirmed(fn) {
  const input = window.prompt("実行しますか？");
  fn(input);
}

confirmed(function (input) {
  if (input == "実行") {
    console.log("リポジトリを削除");
  }
});

コールバック関数の使用例

const btn = document.getElementByID("button");
btn.addEventListener("click", function() {
  console.log("フォロー解除");
});

const foods = ["apple", "potato", "banana"];
foods.forEach(function(food) {
  console.log(food);
});