🐣

JavaScript:関数宣言と関数式どちらを使えば良い?

2024/03/05に公開

関数宣言と関数式の違いについて

①:重複時の挙動

🔹関数宣言の場合

✅ 重複文にて上書き

function overWrite() {
  console.log('fn1');
}

//重複文
function overWrite() {
  console.log('fn2'); 
}

//実行文
overWrite();
//出力結果:『fn2』

🔹関数式の場合

✅ エラーとなる

const overWrite = function fn() {
  console.log('fn1');
}

//重複文
const overWrite = function fn() {
  console.log('fn2');
}

//エラー文:Identifier 'overWrite' has already been declared (at index.js:17:7)
//『'overWrite'はすでに宣言されています』

基本的にconstは変数の再宣言が出来ません。


②実行文の記述位置

🔹関数宣言の場合

✅ 先に実行文を書いてもOK

//実行文
early();

function early() {
  console.log('fn1');
}
//実行結果:fn1

🔹関数式の場合

✅ エラーとなる

//実行文
early();

//定義文
const fn = function early() {
  console.log('fn1');
}

//エラーとなる
//エラー文:early is not defined
//『'early'は定義されていません』

まとめ

📣関数宣言の場合

  • ①重複して記述した場合は後からの記述で上書きされる
  • ②実行文を先に書いても問題ない

✍️関数式の場合

  • ①重複して記述するとエラーとなる
  • ②実行文を先に書くとエラーとなる

ケースバイケースなのでしょうが、基本的には間違いを防ぐためにも関数式で書く方が良いのかな?と思いました😇


📕参考書
独習JavaScript 新版
🎥参考動画
【JS】ガチで学びたい人のためのJavaScriptメカニズム


✍️もりけん塾にてJavaScriptの基礎を学習中です☺️

Discussion