issetの代わりに使える！JavaScriptで変数の存在を確認する4つの方法

2024-04-02

JavaScriptで変数が存在するか確認する方法

typeof 演算子は、変数の型を返す演算子です。変数が存在しない場合は undefined を返します。

const name = "John Doe";

console.log(typeof name); // "string"

const age;

console.log(typeof age); // "undefined"

in 演算子を使用する

in 演算子は、オブジェクトのプロパティが存在するかどうかを確認するために使用できます。変数がオブジェクトのプロパティである場合は true を返し、そうでない場合は false を返します。

const person = {
  name: "John Doe",
  age: 30,
};

console.log("name" in person); // true
console.log("age" in person); // true
console.log("address" in person); // false

hasOwnProperty メソッドは、オブジェクト自身がプロパティを持っているかどうかを確認するために使用できます。

const person = {
  name: "John Doe",
  age: 30,
};

console.log(person.hasOwnProperty("name")); // true
console.log(person.hasOwnProperty("age")); // true
console.log(person.hasOwnProperty("address")); // false

オプションチェーン演算子 (?.) は、プロパティが存在しない場合にエラーが発生しないようにするために使用できます。

const person = {
  name: "John Doe",
};

console.log(person?.age); // undefined
console.log(person?.address); // undefined

注意点

typeof 演算子は、変数が宣言されていないか、初期化されていない場合にのみ undefined を返します。変数が null に設定されている場合は object を返します。
in 演算子は、オブジェクトのプロパティのみを検査します。変数がグローバル変数またはローカル変数の場合、この方法は機能しません。
hasOwnProperty メソッドは、オブジェクト自身がプロパティを持っているかどうかのみを確認します。プロパティがプロトタイプチェーンに存在するかどうかは確認しません。
オプションチェーン演算子は、プロパティが存在しない場合に undefined を返しますが、エラーは発生しません。

JavaScriptで変数が存在するか確認するには、いくつかの方法があります。それぞれの方法には長所と短所があるので、状況に応じて適切な方法を選択する必要があります。

// 1. typeof 演算子を使用する

const name = "John Doe";

console.log(typeof name); // "string"

const age;

console.log(typeof age); // "undefined"

// 2. in 演算子を使用する

const person = {
  name: "John Doe",
  age: 30,
};

console.log("name" in person); // true
console.log("age" in person); // true
console.log("address" in person); // false

// 3. hasOwnProperty メソッドを使用する

console.log(person.hasOwnProperty("name")); // true
console.log(person.hasOwnProperty("age")); // true
console.log(person.hasOwnProperty("address")); // false

// 4. オプションチェーン演算子を使用する

console.log(person?.age); // undefined
console.log(person?.address); // undefined

JavaScriptで変数が存在するか確認するその他の方法

try...catch ブロックを使用して、変数へのアクセス時にエラーが発生するかどうかを確認できます。

try {
  const name = "John Doe";
  console.log(name); // "John Doe"
} catch (error) {
  console.log("変数 'name' は存在しません");
}

try {
  const age;
  console.log(age);
} catch (error) {
  console.log("変数 'age' は存在しません");
}

Object.keys メソッドを使用して、オブジェクトのプロパティの配列を取得できます。

const person = {
  name: "John Doe",
  age: 30,
};

const keys = Object.keys(person);

console.log(keys.includes("name")); // true
console.log(keys.includes("age")); // true
console.log(keys.includes("address")); // false

const person = {
  name: "John Doe",
  age: 30,
};

const keys = Object.getOwnPropertyNames(person);

console.log(keys.includes("name")); // true
console.log(keys.includes("age")); // true
console.log(keys.includes("address")); // false