[Javascript] Function Declaration & Function Expression

2022/08/06に公開

What's This

関数宣言と関数式、どう違ってどちらを使うべきか、調査してみた。

Function Declaration

// Function Declaration 
// 関数宣言の場合、関数名が重複しているとき、エラーにはならない。
// 後から宣言された方の関数によって上書きされることになる。
// 関数宣言で関数定義を行なった場合には、関数の宣言文より前に実行文を記述可能。
function calcAge1 (birthYear) {
return 2037 - birthYear;
}
const age1 = calcAge1(30);
console.log(age1);

先にCallして、後から定義する。
これでも通る。

const age1 = calcAge1(30);

function calcAge1 (birthYear) {
return 2037 - birthYear;
}

console.log(age1);

Function Expression

// Function Expression
// 関数式で関数名が重複している場合には、エラーが発生する。
// 関数式で関数定義を行なった場合には、関数定義よりも前に実行文を書くとエラーになる。

const calcAge2 = function (birthYear) { // 関数式は、実際には式なので、式が値を生み出すことに留意する。
    return 2037 - birthYear;            // ここの部分は、単なる値(Value)。関数は、実際には単なる値である
}                                       // 関数は文字列や数値型といった型ではない。ただ、それであると同時に、Value であるので、変数に格納することができる。
const age2 = calcAge2(1919);
console.log(age2);

同じことを式Expressionで行おうとすると、エラーになる。

const age2 = calcAge2(1919);

const calcAge2 = function (birthYear) { 
    return 2037 - birthYear;            
}                                     

console.log(age2);
ReferenceError: Cannot access 'calcAge2' before initialization

結論

で、どちらを使うかという話なのだが、好みの問題だと思うので、自分は後者を使う。
最初に関数を定義した上で、呼び出す方がなんとなく綺麗ではないかと考えるからだ。

Discussion