nullとundefinedの違い

JavaScriptにおけるnullとundefinedの違いについて

nullとundefinedはJavaScriptにおける特殊な値であり、変数が値を保持していないことを示します。ただし、その意味合いは異なります。

null

• 多くの場合、オブジェクトや配列の要素が存在しない場合にnullが使用されます。
• 何かが存在するべき場所ですが、現時点では値が設定されていないことを示します。
• 意図的な値の欠如を表します。

例

let emptyObject = null; // 空のオブジェクト
let missingArrayElement = null; // 配列の欠損要素

undefined

• 関数の戻り値が明示的に指定されていない場合や、関数の引数が渡されなかった場合にもundefinedになります。
• 変数が宣言されただけで、まだ値が割り当てられていない状態です。
• 変数が初期化されていないことを示します。

let uninitializedVariable; // 未初期化の変数
function noReturnValue() {
  // 戻り値が指定されていないので、undefinedが返される
}

重要なポイント

• undefinedは他の値と比較すると常にfalseになります。
• nullはnullと比較した場合にのみtrueになります。他の値と比較するとfalseになります。
• undefinedは原始型であり、typeof undefinedは"undefined"になります。
• nullはオブジェクト型であり、typeof nullは"object"になります。

• undefinedは変数が初期化されていないことを示し、関数の戻り値が指定されていない場合や、関数の引数が渡されなかった場合にも使用されます。
• nullは意図的な値の欠如を表し、通常はオブジェクトや配列の要素が存在しない場合に使用されます。

nullの例

// 空のオブジェクト
let emptyObject = null;

// 配列の欠損要素
let array = [1, 2, null, 4];

// オブジェクトのプロパティの欠損
let person = {
  name: "John",
  age: 30,
  address: null
};

// 未初期化の変数
let uninitializedVariable;

// 関数の戻り値が指定されていない場合
function noReturnValue() {
  // 戻り値が指定されていないので、undefinedが返される
}

// 関数の引数が渡されなかった場合
function greet(name) {
  console.log("Hello, " + name);
}
greet(); // 引数が渡されていないので、nameはundefinedとなる

比較

console.log(null == undefined); // true
console.log(null === undefined); // false

console.log(typeof null); // "object"
console.log(typeof undefined); // "undefin   ed"

nullとundefinedのチェック

function isNullOrUndefined(value) {
  return value === null || value === undefined;
}

console.log(isNullOrUndefined(null)); // true
console.log(isNullOrUndefined(undefined)); // true
console.log(isNullOrUndef   ined(0)); // false

Optional Chaining (オプショナルチェイニング)

• オプショナルチェイニングを使用すると、プロパティや要素が存在しない場合にエラーが発生するのを防ぎ、デフォルト値を設定することができます。
• オブジェクトのプロパティや配列の要素が存在しない場合、nullやundefinedが返されることがあります。

let user = {
  name: "John",
  address: {
    city: "Tokyo"
  }
};

// オプショナルチェイニングを使用
let city = user?.address?.city; // cityは"Tokyo"
let state = user?.address?.state; // stateはundefined

// 従来の方法
let city2 = user.address ? user.address.city : undefined;
let state2 = user.address && user.address.state;

Nullish Coalescing (空値合体演算子)

• nullやundefinedが評価された場合に、デフォルト値を指定することができます。

let username = null;
let defaultUsername = "Guest";

// Nullish Coalescingを使用
let displayName = username ?? defaultUsername; // displayNameは"Guest"

// 従来の方法
let displayName2 = username || defaultUsername; // displayName2は"Guest" (0や空文字も評価される)

Default Parameters (デフォルトパラメータ)

• 関数の引数が渡されなかった場合に、デフォルト値を設定することができます。

function greet(name = "Guest") {
  console.log("Hello, " + name);
}

greet(); // "Hello, Guest"