【JavaScript】アロー関数とかコールバック関数をざっくり解説

関数の種類が多過ぎる

JavaScriptを学習している人で、

「関数宣言とアロー関数って何が違うの？」
「=>ってなに？」
「コールバック関数どう使うの？」

このように、特に初心者のうちは関数の種類が多すぎて違いがわからないという状態に陥りがちです。

そこで今回は、JavaScriptで登場するさまざまな関数の、特徴・違い・使い方を僕なりにアウトプットしていきます。

関数ってなに？

JavaScriptにおける関数は、一連の処理をまとめて、必要なときに呼び出せる仕組みです。
「ボタンを押した時の処理」のようにしたい処理をまとめておき、実際にボタンが押された時にそれを呼び出す(実行させる)ことができます。

※数学の関数「y=f(x)とか」とはまた違ったものになります。

よく使う関数

今回お話しする関数はこれです。

関数の種類	キーワード・構文	メモ
関数宣言（function宣言）	function greet() {}	一般的な書き方
無名関数	const f = function() {}	変数に無名の関数を当ててる
アロー関数	const f = () => {}	無名関数を簡略化
即時関数	(function(){})()	文字通り今すぐ処理したい時使う
コールバック関数	setTimeout(f, 1000)	非同期処理、イベント処理で出てくる

関数宣言

function sayHello(name) {
  console.log(`こんにちは、${name}さん！`);
}

sayHello("佐藤");

基本の書き方。functionで関数を宣言して名前や引数を決める。
使う時は関数名()と書く。

無名関数

const sayHello = function(name) {
  console.log(`こんにちは、${name}さん！`);
};

sayHello("佐藤");

関数に名前がないため「無名」関数と呼ばれている。変数に対して関数自体を渡す(代入)して定義しています。
使う時は関数宣言と同じように関数名()と書く。

アロー関数

const sayHello = (name) => {
  console.log(`こんにちは、${name}さん！`);
};

sayHello("佐藤");

無名関数をスマートにした書き方。書き方が短くなるので読みやすい印象があるが、無理やり複雑な関数をアロー関数にすると一気に見にくくなるので注意。
functionを使わず=>になっているのがポイント。
さらに他の条件も揃えば以下のようにすることも可能。

const add = (a, b) => a + b;

// 関数宣言で書くとこんな感じ
function add(a, b) {
  return a + b;
};

即時関数

(function() {
  console.log("すぐ実行される関数！");
})();
// → 即「すぐ実行される関数！」が出力される

今はあまり使われなくなったやつ。定義と同時に実行される関数です。
スコープを閉じて、グローバル変数の汚染を防ぐ目的で使われることが多い。

コールバック関数

function runTask(callback) {
  console.log("処理中...");
  callback();
}

runTask(() => {
  console.log("完了！");
});

関数に関数を渡す使い方。非同期処理ではほぼこれを使う構文。setTimeout,forEach,addEventListenerなどでもよく使われる。ちなみに今回渡したのは「完了！」を出力させるアロー関数。

また、似たようなもので高階関数と呼ばれる、関数を引数として受け取る or 関数を返す関数も存在する。

const logWrapper = (fn) => {
  return (...args) => {
    console.log("処理前");
    fn(...args);
    console.log("処理後");
  };
};

const sayHello = (name) => console.log(`こんにちは、${name}さん！`);
const wrapped = logWrapper(sayHello);

wrapped("山田");

ただ、これを扱うのは難しいので「こんなものもあるのかぁ。」で大丈夫です。

まとめ

いろいろ種類はありますが、まずは関数宣言さえ扱えればOKです。他の無名関数やアロー関数はあくまで「より理解しやすく・楽」な書き方でしかないと僕は思います。
なので、色んな関数の種類でパンクしてる方がもしいれば、一度立ち戻って関数の扱い方・便利さの部分を再学習・理解してみるといいかもしれません！

【最後に告知！】僕が1 on 1でプログラミング教えます！

AI時代に求められる実務スキル & エンジニアのリアルを網羅したカリキュラムを実際の開発案件をもとに作り上げました！今、プログラミングスクールを検討している方で、

• Web開発系エンジニアを目指している
• システムエンジニアを目指している
• AI時代でも活躍できる技術力を身につけたい

そんな人だけを対象とした、エンジニアという仕事に興味を持ち、頑張ってみようと思っているあなたを現役エンジニアが応援・サポートする完全1 on 1スクールですので、こちらもご検討ください！