【React初心者メモ】無名関数

無名関数とは

無名関数とは、その名の通り「名前のついていない関数」のことです。

通常の関数：

function greet() {
  console.log("こんにちは");
}

無名関数：

// function() のあとに関数名がない
const greet = function() {
  console.log("こんにちは");
};

使われる場面

1．変数に代入して使う

アロー関数：

const sayHello = () => {
  console.log("Hello!");
};
sayHello();

fuction関数：

const sayHello = function() {
  console.log("Hello!");
};
sayHello();

2．引数として関数を渡すとき（コールバック関数）

アロー関数：

setTimeout(() => {
  console.log("1秒後に表示されます");
}, 1000);

fuction関数：

setTimeout(function() {
  console.log("1秒後に表示されます");
}, 1000);

3．配列の高階関数（map, filterなど）で使う

アロー関数：

const nums = [1, 2, 3];
const doubled = nums.map(num => num * 2);

fuction関数：

const nums = [1, 2, 3];
const doubled = nums.map(function(num) {
  return num * 2;
});
console.log(doubled); // [2, 4, 6]