【JavaScript・初学者】Reactでよく使われる頻出記法 / 関数について

はじめに

Reactを学習していましたが、JavaScriptの記法についてフワッとしている部分がよくあったので、簡単ですが今回は関数について少し調べました。

関数の種類

関数宣言(文)

function func(number) {
  return number + 1
}

関数式

const func = function (number) {
  return number + 1
}

アロー関数

const func = (number) => {
  return number + 1
}

関数宣言と関数式 / アロー関数の違い

明確な違いは、関数の呼び出しの挙動が異なることです。

関数宣言の場合、ブラウザがレンダリングする際に関数を巻き上げることで、関数宣言を最初に読み込みます。

イメージとしては、例えば下記の関数宣言がファイルの100行目に書かれているとします。
その際にブラウザが関数宣言の場合は、1行目に巻き上げるという処理を内部的に行なっています。

実際のコード

console.log("50行目")

// 100行目
function func(number) {
  return number + 1
}

内部処理

// 1行目
function func(number) {
  return number + 1
}

console.log("50行目")

その為、ブラウザの挙動によって最終的には1行目に定義される事と変わらないので、関数宣言で定義した場合は、どこからでも呼び出すことができます。

console.log("50行目")

// 100行目
func(2)
function func(number) {
  return number + 1
}
// => 2

関数宣言

console.log("50行目")

// 100行目
function func(number) {
  return number + 1
}
func(2)
// => 2

一方で関数式もしくはアロー関数の場合は、関数宣言と異なりブラウザの巻き上げる対象からは外れる仕様となっている為、定義した後に関数を呼び出さないとエラーになってしまいます。

関数式

func(1)
const func = function (number) {
  return number + 1
}
// => Uncaught ReferenceError: func is not defined

関数式

const func = function (number) {
  return number + 1
}
func(1)
// => 2

アロー関数

func(1)
const func = (number) => {
  return number + 1
}
// => Uncaught ReferenceError: func is not defined

アロー関数

const func = (number) => {
  return number + 1
}
func(1)
// => 2