JavaScriptのnullとundefinedの違いを徹底解説！関数の戻り値がundefinedになる理由を初心者向けにやさしく解説

1. JavaScriptのundefinedとは何か

1. JavaScriptのundefinedとは何か

JavaScriptのundefinedとは、値がまだ決まっていない状態を表す特別な値です。プログラミング未経験の方に分かりやすく言うと、空っぽの箱のような状態です。箱は用意されているけれど、中身がまだ入っていないというイメージです。

JavaScriptでは、変数を用意しただけで中身を入れていないと、自動的にundefinedになります。これはエラーではなく、仕様として決まっている動作です。

let message;
console.log(message);

undefined

このように、変数を宣言しただけでは値が入っていないため、undefinedが表示されます。JavaScript初心者がつまずきやすいポイントなので、まずはundefinedは未設定の状態と覚えておきましょう。

2. nullとundefinedの違いを理解しよう

2. nullとundefinedの違いを理解しよう

JavaScriptにはnullという値もあります。nullとundefinedの違いは、意図的かどうかです。undefinedは自動的に入る値ですが、nullは開発者がわざと空にするときに使います。

たとえば、机の上にコップがない状態を想像してください。まだ置いていないのがundefinedです。わざと何も置かないと決めたのがnullです。

let data1;
let data2 = null;

console.log(data1);
console.log(data2);

undefined
null

この違いを理解することは、JavaScriptの基礎理解にとても重要です。特に関数の戻り値がundefinedになる理由を知るためには、この違いが欠かせません。

3. 関数の戻り値とは何か

3. 関数の戻り値とは何か

関数とは、ひとまとまりの処理をまとめたものです。そして戻り値とは、その関数が実行されたあとに返してくる結果のことです。料理に例えると、材料を入れて完成した料理が戻り値です。

JavaScriptでは、returnというキーワードを使って値を返します。

function add(a, b) {
  return a + b;
}

let result = add(3, 5);
console.log(result);

8

この例では、add関数が計算結果をreturnで返しています。そのため、resultには8が入ります。

4. 関数の戻り値がundefinedになる理由

4. 関数の戻り値がundefinedになる理由

では、なぜ関数の戻り値がundefinedになるのでしょうか。その理由は、returnを書いていないからです。JavaScriptでは、関数の中にreturnが無い場合、自動的にundefinedを返す仕様になっています。

function greet() {
  console.log("こんにちは");
}

let value = greet();
console.log(value);

こんにちは
undefined

この例では、greet関数は文字を表示するだけで、値を返していません。そのため、valueにはundefinedが入ります。これが関数の戻り値がundefinedになる一番多い理由です。

JavaScriptの関数設計では、何を返すのかを意識することがとても大切です。returnを書き忘れると、意図せずundefinedが返ることになります。

5. returnを書いてもundefinedになるケース

5. returnを書いてもundefinedになるケース

実は、returnを書いていてもundefinedになる場合があります。それは、returnのあとに値を書いていないときです。

function sample() {
  return;
}

let result = sample();
console.log(result);

undefined

この場合、returnはありますが、返す値が指定されていません。そのため、undefinedが戻り値になります。JavaScriptでは、値を指定しないreturnはundefinedを返すと覚えておきましょう。

6. 条件分岐とundefinedの関係

6. 条件分岐とundefinedの関係

条件分岐を使うときにも注意が必要です。ある条件のときだけreturnを書いていると、それ以外の場合はundefinedになります。

function checkNumber(num) {
  if (num > 10) {
    return "大きい";
  }
}

console.log(checkNumber(20));
console.log(checkNumber(5));

大きい
undefined

この例では、十より大きいときだけ文字を返します。それ以外の場合はreturnが実行されないため、undefinedになります。JavaScriptのバグの原因としてよくあるので、すべてのパターンで値を返す設計を意識しましょう。

7. undefinedを防ぐための考え方

7. undefinedを防ぐための考え方

JavaScriptで関数の戻り値がundefinedになるのを防ぐには、必ずreturnを書くこと、そしてすべての分岐で値を返すことが大切です。特に初心者の方は、関数を作ったら最後に必ずreturnがあるか確認する習慣をつけましょう。

また、nullとundefinedの違いを理解しておくことで、データが未設定なのか、意図的に空なのかを正しく判断できます。JavaScriptの基礎をしっかり固めることで、エラーの少ないプログラムが書けるようになります。

JavaScriptの関数、戻り値、return、null、undefinedの違いを理解することは、フロントエンド開発やサーバーサイド開発でも必須の知識です。基礎を大切にしながら、少しずつ実際にコードを書いて慣れていきましょう。

まとめ

まとめ

ここまでJavaScriptのnullとundefinedの違い、そして関数の戻り値がundefinedになる理由について基礎から丁寧に確認してきました。JavaScriptにおけるundefinedは未定義を表す特別な値であり、変数を宣言しただけで値を代入していない場合や、関数でreturnを書かなかった場合に自動的に設定されるという特徴があります。一方でnullは開発者が意図的に何もない状態を表すために代入する値です。この違いを正しく理解することは、JavaScript基礎学習において非常に重要です。

特に初心者が混乱しやすいポイントは、関数の戻り値がundefinedになる場面です。JavaScriptでは関数の中にreturnが無い場合、自動的にundefinedを返します。これはエラーではなく仕様です。しかし、プログラミング初心者にとっては予期しない結果に見えるため、バグと勘違いしてしまうことが多くあります。関数設計を行う際には、常に戻り値を意識し、すべての分岐で値を返すように心がけることが大切です。

また、条件分岐と組み合わせた場合にも注意が必要です。ある条件のときだけreturnを書いていると、それ以外のケースではundefinedが返ります。これはJavaScriptの仕様上当然の動作ですが、実務や開発現場では思わぬ不具合の原因になります。JavaScriptの関数設計では、どの入力値に対しても必ず明確な戻り値を返すという意識を持つことが品質向上につながります。

nullとundefinedの違いを正しく理解することは、データの状態管理にも直結します。未設定なのか、意図的に空にしているのかを区別できることで、フロントエンド開発やサーバーサイド開発、さらにはAPI設計においても明確な仕様を作ることができます。JavaScriptの基礎文法である変数宣言、関数定義、returnの使い方、条件分岐の書き方を一つ一つ丁寧に確認しながら学習を進めることが、理解を深める近道です。

ここで改めて、undefinedが返らないように意識したサンプルコードを確認してみましょう。すべての分岐で必ず値を返す関数設計を意識することが重要です。

function safeCheckNumber(num) {
  if (num > 10) {
    return "大きい";
  } else {
    return "小さいまたは同じ";
  }
}

let result1 = safeCheckNumber(20);
let result2 = safeCheckNumber(5);

console.log(result1);
console.log(result2);

大きい
小さいまたは同じ

このように、すべての条件でreturnを書くことで、関数の戻り値がundefinedになることを防ぐことができます。JavaScriptの学習では、動作結果を必ずconsoleで確認しながら理解を深めることが大切です。実際にコードを書き、undefinedがどのような場面で発生するのかを体験することで、知識が定着します。

JavaScriptのnullとundefinedの違い、関数の戻り値、returnの役割、条件分岐との関係を総合的に理解することで、エラーの少ない堅牢なプログラムを書く力が身につきます。基礎を軽視せず、なぜundefinedが表示されるのかを常に考える姿勢が、初心者から中級者へ成長するための重要なポイントです。