null値は、普通のオブジェクト指向言語にはよくあるものですが、undefined値というのは、JS独特の概念のようです。
どちらも「値が入っていませんよ」ということを示しているので、混乱する人が相当数いるような気がしていますので、説明しておきます。
null値は何もない値という意味
nullは値がないことを示します。
|
1 2 3 |
var value1 = 123; value1 = null; console.log(value1); // null と表示される |
null は、数値でも文字でもBooleanの値でも配列でもオブジェクトでもなく、何もない値。を示すときに代入されるものです。
JSには変数にどんな型のものでも代入できるので、配列を代入してたものに、null を入れたり、オブジェクトを代入してたものに、null を入れたりすることができます。
存在していたものが、存在しなくなった、ということを示したりします。
undefinedは定義されていない値という意味
変数は宣言されていないときにはエラーになります。
|
1 |
console.log(value1); // ReferenceError: value1 is not defined というエラーになります。 |
エラーにならないように宣言はしてみます。しかし、変数に値は設定しないと、undefined になります。サンプルプログラムをみてみましょう。
|
1 2 3 4 5 6 |
var value1; console.log(value1); // undefined と表示される value1 = 1; console.log(object1.value1); // 1 と表示される value1 = undefined; console.log(value1); // undefined と表示される |
undefined という値が定義されているので、それを代入することもできて、一度値を入れてからまた元の初期化状態にすることもできます。
オブジェクトのプロパティを変数として使う場合も多いので、そちらでもサンプルを書いておきます。
|
1 2 3 4 5 6 7 8 |
var object1 = {}; console.log(object1.value1); // undefined と表示される object1.value1 = '1'; console.log(object1.value1); // 1 と表示される object1.value1 = undefined; console.log(object1.value1); // undefined と表示される |
値が存在するか、しないかを判定する
null も undefind も、下記のように値があるかどうかを判定することができます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
var value1; if (value1) { // value1 は undefined console.log('値ある'); } else { console.log('値ない'); // こちらが表示される } var value1 = 1; if (value1) { // value1 は 1 console.log('値ある'); // こちらが表示される } else { console.log('値ない'); } var value1 = null; if (value1) { // value1 は null console.log('値ある'); } else { console.log('値ない'); // こちらが表示される } var value1 = 1; if (value1) { // value1 は 1 console.log('値ある'); // こちらが表示される } else { console.log('値ない'); } |
以前に、false 属性に書きました。
null も undefined も False 属性をもつので、値が存在しているかどうかの判定を上のように書けたりします。このようなコードは実際の業務ではよく見かけます。null と undefined どちらも同じように使えるために、同じようにつかうプログラマはとても多いのです。どちらを使っていいのか、よくわからなくなってしまいます。
他の言語では、undefined というものは存在せず、null だけで済まされているものも多くあります。JavaScript には undefined なんていう不思議な値がなぜ存在しているんだろうと、思わなくもありません。ですが、JS では区別されています。
プログラマはあいまいなものをそのままにしておかず、厳密にしておかなければ、動作を間違えてしまう場合があります。実際に、null と undedfined の値の違いで処理が分岐されている場合があり、それを明確に区別したくなる場面はあり、区別しないとプログラムが書けないという場面はあります。
ちゃんと区別しておきましょう。
厳密にいうと、null と undefined は意味は違う。
「null値は何もない値」という意味で、「undefinedは定義されていない値」という意味です。
これをどのように区別するかというと、何も値がないことを示すには「null」を代入します。そして、定義されていない値、を示す必要はないので、「undefined」は、自分のプログラムで代入する必要がありません。
変数を自分で未定義に初期化する場面というのは、プログラムを書いていて、ほぼないです。つまり、代入する値としては、「undefined」を使わないということです。
何もない値を使いたいときは、「null」を代入しましょう。
例をあげます。JavaScript では、このようなプログラムを書く場合がとても多いです。
|
1 2 3 4 5 6 7 8 9 10 |
var data = getJsonData('http://....com/api/...'); // data に JSON が入ってきて処理をする if (data) { if (data.item1) { if (data.item1.value1) { console.log('value1の値は' + value1 + 'です'); } } } |
この場合には、data という変数に、どこからかとってきたJSONデータを格納しています。JSONデータなのでさまざまな形式になる可能性があり item1 や value1 が未定義、つまり undefined の場合があります。
なので、undefined かどうかの判定が必要になります。
本来は厳密に書くとすると、このように書くのがよいでしょう。
|
1 2 3 4 5 6 7 8 9 10 11 |
const = isUndefined = function(value) { return (typeof value === 'undefined'); }; if (!isUndefined(data)) { if (!isUndefined(data.item1)) { if (!isUndefined(data.item1.value1)) { console.log('value1の値は' + value1 + 'です'); } } } |
そして、これは、data.item1.value1 が未定義なのか、明示的にデータがないことを示す null が代入されているかを判定することができます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
const isUndefined = function(value) { return (typeof value === 'undefined'); }; const isNull = function(value) { return (value === null); }; if (!isUndefined(data)) { if (!isUndefined(data.item1)) { if (isUndefined(data.item1.value1)) { console.log('value1定義されていません。'); } else { if (isNull(data.item1.value1)) { console.log('value1の値はnullで空です'); } else { console.log('value1の値は' + value1 + 'です'); } } } } |
このような場合に、null と undefined を区別することができるようになるのです。
データが存在しないことを自分で示す時は「null」を代入する、データが存在しないような、JSON データがくるときは、「undefined」で判定する、「undefined」は自分では代入しない。
このようにしておくと、プログラムの見通しがよくなります。
undefined は未定義を示すので、関数引数に使われる
このような場面でも使われます。関数の引数が存在するかどうか、です。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
function A(value1, value2) { if (!isUndefined(value1)) { console.log(value1); } if (!isUndefined(value2)) { console.log(value2); } } A(); // 何も表示されない A(1); // 1 が表示される A(1,2); // 1 と 2 が表示される |
引数を2つとっているか、1つとっているか、が判定できるというわけです。
まとめ
- null と undefined については、どちらも値がないという意味で似ている。
- 使い方を分けておいた方がよい。
- null は自分で空の値を示すために代入するときに使うとよい。
- undefined は元から値が存在しないとき、に使い、自分で代入はしない。
このようなことを学んでおくと、役に立つと思います。
似たような違うものを厳密にしっかり区別することができたら、プログラマとしての腕が一段階も二段階もあがっていきますので、わからなくなったときは、またこのページを見直して便利に使ってください。
