JavaScriptの変数の初期化とnull・undefinedの違いを徹底解説！初心者向け完全ガイド

1. JavaScriptの変数とは何か

1. JavaScriptの変数とは何か

JavaScriptの変数とは、データを一時的に保存しておくための名前付きの箱のようなものです。プログラミング初心者の方は、まずここをしっかり理解することが大切です。変数には数字や文字列、真偽値などを入れることができます。

JavaScriptでは、主にlet、const、varというキーワードを使って変数を宣言します。宣言とは、これからこの名前の箱を使いますとコンピュータに伝えることです。

let name = "太郎";
let age = 20;
console.log(name);
console.log(age);

太郎
20

このように、変数に値を入れて使うのが基本です。しかし、値を入れずに宣言だけすることもできます。ここからundefinedの話につながります。

2. 変数の初期化とは何か

2. 変数の初期化とは何か

変数の初期化とは、変数を宣言すると同時に最初の値を代入することをいいます。たとえば、let score = 0; のように書くと、scoreという変数は最初から0という値を持っています。

一方で、宣言だけして値を入れない場合もあります。そのとき、JavaScriptでは自動的にundefinedという値が入ります。これは値がまだ設定されていませんという意味です。

let message;
console.log(message);

undefined

このundefinedは、JavaScriptが自動的に入れる特別な値です。プログラマが明示的に入れたわけではありません。ここがnullとの大きな違いです。

3. undefinedとは何か

3. undefinedとは何か

undefinedとは、値が未定義であることを表す特別な値です。日本語で考えると、まだ決まっていない状態といえます。変数を宣言したけれど、まだ何も代入していないときに使われます。

また、存在しないプロパティにアクセスしたときや、関数が値を返さなかったときにもundefinedになります。

let user = { name: "花子" };
console.log(user.age);

undefined

この例では、ageという情報は存在していないため、undefinedが返っています。エラーではなく、未定義であるという意味です。

4. nullとは何か

4. nullとは何か

nullは、値が何もないことをプログラマが意図的に表すための値です。わざと空にしていますという意味になります。つまり、undefinedはまだ決まっていない、nullは何もないと決めた、という違いがあります。

たとえば、あとでデータが入る予定だけれど、今は空であることを明示したいときに使います。

let selectedUser = null;
console.log(selectedUser);

null

このように、nullは自分で代入します。自動的に入るundefinedとは役割が異なります。

5. nullとundefinedの違いを比較

5. nullとundefinedの違いを比較

JavaScriptのnullとundefinedの違いを整理すると、次のようになります。undefinedは初期化されていない状態、nullは意図的に空である状態です。初心者の方は、自然に空いている箱と、空にすると決めた箱という例えで覚えると理解しやすいでしょう。

比較演算子にも注意が必要です。イコール二つの比較では同じと判断されることがありますが、イコール三つでは異なる型として扱われます。

console.log(null == undefined);
console.log(null === undefined);

true
false

イコール二つは値だけを比較し、イコール三つは型も含めて比較します。型とはデータの種類のことです。nullとundefinedは似ていますが、型が異なるため厳密比較ではfalseになります。

6. 実務での使い分けと注意点

6. 実務での使い分けと注意点

JavaScriptの開発現場では、変数の初期化をしっかり行うことがバグ防止につながります。特に初心者の方は、undefinedのまま使ってしまい、エラーになることが多いです。

たとえば、値があるかどうかを確認するときは、条件分岐を使います。

let email;

if (email === undefined) {
  console.log("メールアドレスは未設定です");
}

メールアドレスは未設定です

一方で、値をリセットしたいときはnullを使うと意図が明確になります。JavaScriptの可読性を高めるためにも、undefinedとnullの違いを理解して正しく使い分けることが重要です。

JavaScriptの基礎である変数の初期化、null、undefinedの違いをしっかり理解しておくと、エラーの原因特定やデバッグ作業がとても楽になります。これらはフロントエンド開発やWebアプリ開発でも頻繁に登場する重要な知識です。初心者のうちに基礎を固めておくことが、JavaScript学習の近道になります。

まとめ

まとめ

今回はJavaScriptの変数の初期化とnullとundefinedの違いについて、基礎から丁寧に確認してきました。JavaScriptにおける変数とは、値を一時的に保存するための箱であり、letやconstやvarを使って宣言します。そして変数の初期化とは、宣言と同時に最初の値を代入することを意味します。ここを理解することが、JavaScript基礎学習の第一歩です。

undefinedは、変数を宣言したがまだ値が代入されていない状態を表す特別な値です。JavaScriptエンジンが自動的に設定するものであり、未定義という意味を持ちます。一方でnullは、開発者が意図的に何もない状態を示すために代入する値です。つまりundefinedは未設定、nullは意図的に空という違いがあります。この違いを正確に理解することは、JavaScriptのバグ対策やエラー回避に直結します。

また、比較演算子にも注意が必要です。等価比較ではnullとundefinedは同じと判断されますが、厳密比較では型の違いにより異なる値として扱われます。JavaScriptの型の仕組みを理解し、イコール二つとイコール三つを適切に使い分けることが重要です。プログラミング初心者の方は、必ず厳密比較を基本にする習慣を身につけることで、予期しない挙動を防ぐことができます。

実務においては、変数の初期化を明確に行うことが可読性向上につながります。たとえば、まだ値が入っていないことを表現したい場合はundefinedの状態を確認し、値を意図的に空にしたい場合はnullを使います。このような使い分けができるようになると、コードの意味が明確になり、他の開発者にも伝わりやすくなります。

JavaScriptの変数管理、nullとundefinedの違い、初期化の重要性は、フロントエンド開発やWebアプリ開発だけでなく、Nodeを使ったサーバーサイド開発でも頻繁に登場します。基礎を曖昧にせず、今回学んだ内容を繰り返し確認することが、JavaScript上達への近道です。

サンプルプログラムで復習

最後に、JavaScriptの変数初期化とnullとundefinedの違いを整理するサンプルプログラムを確認しましょう。コードを読みながら、どのタイミングでundefinedになり、どのタイミングでnullになるのかを意識してみてください。

let userName;
let userEmail = null;

console.log(userName);
console.log(userEmail);

if (userName === undefined) {
  console.log("userNameは未定義です");
}

if (userEmail === null) {
  console.log("userEmailは意図的に空です");
}

undefined
null
userNameは未定義です
userEmailは意図的に空です

このように、JavaScriptの変数をどのように初期化するかによって、undefinedとnullの意味が変わります。JavaScriptの基礎文法を正しく理解し、意図を持って変数を扱うことが重要です。