ホーム » JavaScript nullに関する必須ガイド

JavaScriptのnullに関する必須ガイド

概要: このチュートリアルでは、JavaScript のnullとその効果的な処理方法について学びます。

JavaScriptのnullとは

JavaScriptのnullは、特殊な値nullを含むプリミティブ型です。

JavaScriptではnull値を使用して、オブジェクト値の意図的な欠落を表します。

nullを返す変数または関数がある場合、想定されるオブジェクトを作成できなかったことを意味します。

次の例では、コンストラクタが引数radiusを受け入れるCircleクラスを定義します。Circleクラスには、指定された半径を持つ新しいCircleオブジェクトを返すcreate()という静的メソッドがあります。

class Circle {
    constructor(radius) {
        this.radius = radius;
    }
    get area() {
        return Math.PI * Math.pow(this.radius, 2);
    }

    static create(radius) {
        return radius > 0 ? new Circle(radius) : null
;
    }
}Code language: JavaScript (javascript)

これにより、半径10を持つ新しいCircleオブジェクトが作成されます

let c = Circle.create(10);
console.log(c.area); // 31.41592653589793Code language: JavaScript (javascript)

ただし、次の例では、radius引数がcreate()メソッドに渡されないため、nullが返されます

let c2 = Circle.create();
console.log(c2); // nullCode language: JavaScript (javascript)

値がnullかどうかを確認する

値がnullかどうかを確認するには、次のように厳密等価演算子===を使用します

value === nullCode language: JavaScript (javascript)

以下の例

const rect = null;
const square = {
    dimension: 10
};

console.log(rect === null); // true
console.log(square === null); // falseCode language: JavaScript (javascript)

rect === nullは、rect変数がnull値に割り当てられているため、trueに評価されます。一方、square === nullはオブジェクトに割り当てられているため、falseに評価されます。

値がnullでないことを確認するには、厳密不等演算子（!==）を使用します

value !== nullCode language: JavaScript (javascript)

JavaScriptのnull機能

JavaScriptのnullには、次の機能があります。

1) nullは偽です

false、0、空の文字列（''）、undefined、NaN、nullは、偽の値です。つまり、JavaScriptは条件式でnullをfalseに変換します。例:

const square = null;
if (square) {
    console.log('The square is not null');
} else {
    console.log('The square is null');
}Code language: JavaScript (javascript)

出力

The square is nullCode language: JavaScript (javascript)

この例では、square変数はnullであるため、ifステートメントはそれをfalseと評価し、else句のステートメントを実行します。

2) typeof nullはobjectです

typeof valueは値の型を返します。例:

console.log(typeof 10); // 'number'Code language: JavaScript (javascript)

驚くべきことに、typeof nullは'object'を返します

console.log(typeof null); // 'object'Code language: JavaScript (javascript)

JavaScriptでは、nullはプリミティブ型であり、オブジェクトではありません。これは、JavaScriptの最初のバージョンから修正されない可能性がある歴史的なバグです。

一般的なJavaScriptのnullの間違い

JavaScriptでは、関数を呼び出してオブジェクトを取得することがよくあります。その後、そのオブジェクトのプロパティにアクセスします。

ただし、関数がオブジェクトではなくnullを返した場合、TypeErrorが発生します。例:

let classList = document.querySelector('#save').classList;Code language: JavaScript (javascript)

この例では、idがsaveの要素を選択し、そのclassListプロパティにアクセスします。

ページにid saveを持つ要素がない場合、document.querySelector('#save')はnullを返します。その結果、null値のclassNameプロパティにアクセスするとエラーになります

Uncaught TypeError: Cannot read property 'classList' of nullCode language: JavaScript (javascript)

これを回避するには、null合体演算子(?.)を使用できます。

object ?. property

null合体演算子は、null（またはundefined）値のプロパティにアクセスしようとしたときにエラーをスローする代わりに、undefinedを返します。

次の例は、エラーではなくundefinedを返すnull合体演算子を使用しています

let classList = document.querySelector('#save')?.classList;Code language: JavaScript (javascript)

JavaScript の null と undefined

null と undefinedはどちらもプリミティブ値です。

undefinedは初期化されていない変数やオブジェクトプロパティの値です。

たとえば、値を初期化せずに変数を宣言すると、変数の評価結果はundefinedになります

let counter;
console.log(counter); // undefinedCode language: JavaScript (javascript)

nullは意図的にオブジェクトが存在しない状態を表す一方、undefinedは意図せず値が存在しない状態を表します。

言い換えると、nullは存在しないオブジェクトを表す一方、undefinedは初期化されていない変数を表します。

ゆるい等価演算子（==）を使用すると、null と undefined は等しくなります

console.log(null == undefined); // trueCode language: JavaScript (javascript)

厳密等価演算子 ===はnullとundefinedを区別します。たとえば

console.log(null === undefined); // falseCode language: JavaScript (javascript)

まとめ

  • Javascript のnullは、nullという1つの値を持つプリミティブ型です。
  • JavaScript は、存在しないオブジェクトを表すためにnull値を使用します。
  • 値がnullかどうかを確認するには、厳密等価演算子（===）を使用します。
  • typeof nullは'object'を返しますが、これはJavaScriptの歴史的なバグであり、修正されない可能性があります。
  • nullである可能性があるオブジェクトのプロパティにアクセスするには、null合体演算子（?.）を使用します。

このチュートリアルは役に立ちましたか？
How to Check if an Array Contains a Value in Javascript
前へ
Javascriptで配列に値が含まれているかどうかを確認する方法