はじめに
最近JavaScriptの基礎力を上げようと思い練習問題を毎日解いています。教材が少し古いものでfunction関数を使っていました。そこで発生した疑問である関数宣言と関数式についての記事になります。
関数の定義の仕方
JavaScriptの関数の定義の仕方には２種類があります。「関数宣言」「関数式」という2つの種類があります。
関数宣言
functionを使い関数を宣言します。
function hello() {
console.log("Hello World")
}
hello();
// 出力結果 Hello World
hello関数を宣言した後に関数の関数を実行します。
function sum(num_1, num_2) {
return num_1 + num_2;
}
console.log(sum(1, 2));
// 出力結果 3
hello関数を宣言した後に引数を渡して関数を実行します。
関数式
関数宣言で書いた先ほどの関数を関数式で書いてみます。
const hello = function() {
console.log("Hello World")
}
hello();
// 出力結果 Hello World
helloという変数に対してfunction関数を代入しています。
const sum = function(num_1, num_2) {
return num_1 + num_2;
}
console.log(sum(1, 2));
// 出力結果 3
関数宣言と関数式の違いについて
関数宣言と関数式は、書き方だけでなくホイスティングというJavaScript独特の挙動にも違いがあります。ホイスティングは、関数が定義される前にその関数を呼び出せるかどうかに影響します。これを見ていきましょう。
関数宣言のホイスティングについて
ホイスティングとは関数が宣言されるより前に記述されていても実行される機能のことです。
関数式の場合
console.log(sum(1, 2));
const sum = function(num_1, num_2) {
return num_1 + num_2;
}
// 出力結果 Uncaught ReferenceError: Cannot access 'sum' before initialization
このように関数が宣言されるより前にsumを実行しているのでエラーになってしまいます。
関数宣言の場合
console.log(sum(1, 2));
function sum(num_1, num_2) {
return num_1 + num_2;
}
// 出力結果 3
関数宣言の場合はホイスティングにより先にsumを実行していますがエラーが発生しません。
アロー関数で発生したホイスティングエラー
現在は基本的に関数を宣言するときにはアロー関数で宣言することが多いと思います。前提としてアロー関数は関数式になります。今回私がこの記事を書こうと思ったのもアロー関数が関数式であるということを理解していなかったため起きました。問題集の回答がfunctionで書かれておりそれをアロー関数に修正した際にホイスティングのエラーが発生しました。
修正前
module(5);
module(7);
module(26);
const module = (num) => {
for (let i = 1; i <= 25; i++) {
if (num > 25) {
console.log(num);
} else if (i % num === 0) {
console.log(i);
}
}
};
アロー関数は関数式になります。ですのでホイスティングによる巻き上げは機能しません。
修正後
const module = (num) => {
for (let i = 1; i <= 25; i++) {
if (num > 25) {
console.log(num);
} else if (i % num === 0) {
console.log(i);
}
}
};
module(5);
module(7);
module(26);
終わりに
今回、JavaScriptの関数宣言と関数式の違いについて理解を深めることができました。特に、ホイスティングの挙動を意識することで、エラーを回避し、正しく関数を使い分けることができます。アロー関数の扱いにも注意しながら、さらにコードの最適化を図っていきたいと思います。
参考