Code Fix

初級

関数が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));
出力: undefined期待: 8 (エラーにはなりません)

return文が無いと、計算した値は関数の外に返されずundefinedになります。

直し方: (空) を return result; にします。

この問題を解いてみる →

広告
広告スロット(未設定)

パターン2

 1  function square(n) {
 2    const result = n * n;
 3                        
                ^
 4  }
 5  console.log(square(5));
出力: undefined期待: 25 (エラーにはなりません)

resultを計算しても、return文が無ければ呼び出し側には渡りません。

直し方: (空) を return result; にします。

この問題を解いてみる →

パターン3

 1  function greet(name) {
 2    const message = "Hi " + name;
 3                         
                ^
 4  }
 5  console.log(greet("Al"));
出力: undefined期待: Hi Al (エラーにはなりません)

messageを組み立てても、returnしなければ関数の戻り値はundefinedのままです。

直し方: (空) を return message; にします。

この問題を解いてみる →

パターン4

 1  function triple(n) {
 2    const result = n * 3;
 3                  
             ^
 4  }
 5  console.log(triple(4));
出力: undefined期待: 12 (エラーにはなりません)

3倍の計算をしても、return文が無ければ呼び出し側にはundefinedしか渡りません。

直し方: (空) を return result; にします。

この問題を解いてみる →

パターン5

 1  function shout(word) {
 2    const message = word.toUpperCase();
 3                         
                ^
 4  }
 5  console.log(shout("hi"));
出力: undefined期待: HI (エラーにはなりません)

文字列を大文字化しても、returnし忘れると外側からは見えません。

直し方: (空) を return message; にします。

この問題を解いてみる →

よくある誤解

「最後に書いた変数が自動的に返されるはず」という思い込みは誤りです。値を返すには必ずreturn文が必要で、書き忘れても構文エラーにはならないため気づきにくいバグになります。

実務での勘所

アロー関数の中括弧を省略した書き方(x => x * 2)は、returnを書かなくても自動的に式の値を返します。ただし中括弧を付けた瞬間(x => { return x * 2 })、通常の関数と同じルールに戻り、returnを書かなければundefinedになります。デバッグのためにconsole.logを1行足そうとして中括弧を追加し、returnを書き忘れて突然undefinedが返るようになった、という事故は実務でも頻繁に起きます。

演習をはじめる

関連するエラー

広告
広告スロット(未設定)