関数がreturn文を書き忘れてundefinedを返してしまう
計算結果を変数に入れても、return文で明示的に返さない限り、関数はundefinedを返します。JavaScriptは他言語と違い、最後に評価した式を自動で返すことはありません。
なぜエラーが出ないのか
出力: undefined
(エラーなし)- JavaScriptは何も報告しません。文法として正しいためです
出力: undefined- 実際の挙動 — 期待した結果と食い違っている箇所
見つけ方- エラーが出ないので、出力を目で確かめるか、コードを目で追うしかありません。この種の誤りが最も発見が遅れます
このエラーが出る典型パターン
パターン1
1 function double(n) { 2 const result = n * 2; 3 ^ 4 } 5 console.log(double(4));
return文が無いと、計算した値は関数の外に返されずundefinedになります。
直し方: (空) を return result; にします。
パターン2
1 function square(n) { 2 const result = n * n; 3 ^ 4 } 5 console.log(square(5));
resultを計算しても、return文が無ければ呼び出し側には渡りません。
直し方: (空) を return result; にします。
パターン3
1 function greet(name) { 2 const message = "Hi " + name; 3 ^ 4 } 5 console.log(greet("Al"));
messageを組み立てても、returnしなければ関数の戻り値はundefinedのままです。
直し方: (空) を return message; にします。
パターン4
1 function triple(n) { 2 const result = n * 3; 3 ^ 4 } 5 console.log(triple(4));
3倍の計算をしても、return文が無ければ呼び出し側にはundefinedしか渡りません。
直し方: (空) を return result; にします。
パターン5
1 function shout(word) { 2 const message = word.toUpperCase(); 3 ^ 4 } 5 console.log(shout("hi"));
文字列を大文字化しても、returnし忘れると外側からは見えません。
直し方: (空) を return message; にします。
よくある誤解
「最後に書いた変数が自動的に返されるはず」という思い込みは誤りです。値を返すには必ずreturn文が必要で、書き忘れても構文エラーにはならないため気づきにくいバグになります。
実務での勘所
アロー関数の中括弧を省略した書き方(x => x * 2)は、returnを書かなくても自動的に式の値を返します。ただし中括弧を付けた瞬間(x => { return x * 2 })、通常の関数と同じルールに戻り、returnを書かなければundefinedになります。デバッグのためにconsole.logを1行足そうとして中括弧を追加し、returnを書き忘れて突然undefinedが返るようになった、という事故は実務でも頻繁に起きます。