- JavaScriptで空文字、null、undefinedを判定する方法
- 空文字、null、undefinedはどう違うのか？
- nullとundefinedの判別方法
「JavaScriptで空文字、null、undefinedを判定する方法が知りたい」
「nullとundefinedって何が違うのかわかりやすく教えてほしい」
そんな方向けに、JavaScriptのサンプルコード付きで解説します。
目次
JavaScriptで空文字、null、undefinedを判定する方法
JavaScriptで空文字、null、undefinedを判定する方法について解説します。
判定方法は複数ありますが、今回は一例としてif文を使います。
ただし、データ型によって判定方法は異なるので正しい判別方法を使うようにしましょう。
空文字の判別方法
if文を使用して空文字を判定する方法です。
if文では、空文字はfalseとして評価されるため、空文字である場合にfalseとなる処理をすることができます。
具体的には、文字列の長さが0かどうかを調べます。
if("") {
console.log('true');
} else {
console.log('false');
}
上記コードを実行した結果はこちらです。
falseこのように、if文で空文字を判定すると、JavaScriptではfalseになります。
nullの判別方法
if文を使用してnullを判定する方法です。
if文では、nullがfalseとして評価されるため、nullである場合にfalseとなる処理をすることができます。
if (null) {
console.log('true');
} else {
console.log('false');
}
上記コードを実行した結果はこちらです。
false
このようにif文でnullを判定すると、JavaScriptではfalseになります。
undefinedの判別方法
if文を使用してundefinedを判定する方法です。
if文ではundefinedがfalseとして評価されるため、undefinedである場合にfalseとなる処理をすることができます。
if(undefined) {
console.log('true');
} else {
console.log('false');
}上記コードを実行した結果はこちらです。
false
このようにif文でundefinedを判定すると、JavaScriptではfalseになります。
正しい判定方法を知っていることはプログラミングにおいて重要なスキルですので、しっかり覚えるようにしましょう。
空文字、null、undefinedはどう違うのか？
空文字、null、undefinedはプログラミングでよく使われる特別な値です。
しかし、それぞれの違いを理解してない人が意外と多かったりします。
- 空文字は文字列の長さが0であることを表し、空文字列を表すためには文字列を宣言してその値を空にします
- nullは値が何も含まれていないことを示し、変数を宣言してその値をnullに設定することで表現します
- undefinedは変数が宣言されただけで値が割り当てられていないことを示し、変数を宣言するだけで値を割り当てません
下記のコードは、空文字、null、undefinedそれぞれの値を表すためのコード例です。
空文字を表すコード
var emptyString = "";nullを表すコード
var myNull = null;undefinedを表すコード
var myUndefined;
それぞれの値は異なる状態を表しているため、使い分けに注意が必要です。
適切に使い分けてプログラムを実装しましょう。
【紛らわしい】nullとundefinedの判別方法
JavaScriptにおいてnullとundefinedの違いを理解し、それらを正しく判別する方法について習得することは大切です。
nullとundefinedは似たような性質を持つため、混同されることがよくあります。
それぞれの違いについても解説していきますね。
undefinedとは、値が定義されていない状態であることを示します。
一方、nullは値が存在しない状態を表し、それぞれ異なる意味や用途があります。
つまりnullとundefinedは別物なのですが、コードの書き方によっては同じ扱いになることもあるのです。
if(null == undefined){
console.log('nullとundefinedは同じです');
} else {
console.log('nullとundefinedは違います');
}nullとundefinedは違うので、本来はfalse判定されるはずなのですが実行結果は以下のようになります。
nullとundefinedは同じです
もうひとつサンプルコードを見てみましょう。
if(null === undefined){
console.log('nullとundefinedは同じです');
} else {
console.log('nullとundefinedは違います');
}上記コードの実行結果は以下の通り。
nullとundefinedは違います
似たような2つのサンプルコードなのですが、その違いは==（等価演算子）を使ってるか===（厳密等価演算子）を使ってるかです。
- ==（等価演算子）は値が同じかだけを確認するため、trueになります
- ===（厳密等価演算子）は値と型が同じかを確認するため、falseになります。
そのため、nullとundefinedは値は同じですが、型が異なることが分かります。
==（等価演算子）を使うと、JavaScriptは暗黙的に型変換を行い、nullとundefinedを同じとみなします。
一方、===（厳密等価演算子）を使う場合は、値だけでなく型も含めて比較するためnullとundefinedは違うと判定されます。
判別方法まとめ
nullとundefinedを正しく判別したい場合は、===（厳密等価演算子）を使用するようにしましょう。
型の違いは無視して値だけで判定したい場合は、==（等価演算子）を使うようにしましょう。
まとめ
今回は、『JavaScriptで空文字を判定する方法【初心者向けに解説】』というテーマで話していきました。
JavaScriptの空文字判定は実務でも高頻度で使用します。
「JavaScriptで空文字、null、undefinedを判定する方法が知りたい」
「nullとundefinedって何が違うのかわかりやすく教えてほしい」
そんなプログラミング初心者の方にとって、基礎学習の参考になっていたら幸いです。
本記事は以上となります。
