はじめに
typescript の関数宣言とアロー関数の違いについて触れる機会があったため、まとめてみました。
関数宣言
function greet(name?: string): string {
return Hello, ${name};
}
functionで関数宣言しているため、pythonに慣れているエンジニアからすると、分かりやすい。
アロー関数
const greet = (name?: string): string => {
return Hello, ${name};
}
ぱっと見でtypescriptに見慣れていないエンジニアからすると？が生まれる。
関数宣言とアロー関数の違い
関数宣言
関数名をスコープ内で一意の識別子として使用できます。
どんな恩恵があるのか？
function greet(name: string): string {
return `Hello, ${name}!`;
}
function greet(age: number): string { // エラー！ 関数名が重複しています
return `You are ${age} years old.`;
}
console.log(greet("Alice")); // "Hello, Alice!"
このコードで実行すると、関数名が重複しているためエラーが出る。
アロー関数
スコープ内で関数名を一意の識別子として使用できない。
どんな恩恵があるのか？
const greet = (name: string): string => {
return `Hello, ${name}!`;
};
const greet = (age: number): string => { // エラー！ 関数名が重複しています
return `You are ${age} years old.`;
};
console.log(greet("Alice")); // エラー！ greet は既に定義されています
こちらのコードも重複でエラーが出る。
関数宣言の課題
意図しない動作 同じ名前の関数が複数存在すると、意図しない動作が発生する可能性があります。
function greet(name: string): string {
return `Hello, ${name}!`;
}
let greet = "こんにちは"; // 変数 greet が定義されました
console.log(greet("Alice")); // "こんにちは" と出力される
どちらも重複によるエラーが発生するが、関数宣言では関数名と変数名が同一である場合に意図しない動作が発生する。サンプルプログラムだと、はじめに定義したgreetが後に記述しているgreetで変数の書き換えが行われている。
アロー関数は、変数定義をconstにすることで変数の書き換えが出来ないので、今回のような意図しない動作が発生しない。
まとめ
可読性の観点からだと関数宣言を優先したくなる。 コードが複雑だったり膨大になったときにはアロー関数のほうを採用しようと思う。