【JavaScript入門】typeof・instanceof・in演算子の使い方

どうもフロントエンドエンジニアのまさにょんです！

今回は、知っていると役立つtypeof演算子、instanceof演算子、 in演算子の使い方についてまとめて解説します。

1 typeof演算子の使い方
2 instanceof演算子の使い方
3 in演算子の使い方
4 まとめ
5 JavaScript書籍 Ver. 中級-上級者向け
6 JavaScript書籍 Ver. 初級者向け
7 参考・引用
8 最近の投稿

typeof演算子の使い方

まずtypeof演算子は、型の判定・識別に使います。

TypeScriptにtypeof型演算子がありますがそれとこちらは別なのでご注意ください。

【TypeScript入門】keyofとtypeofの使い方 | オブジェクトから型を生成する方法

【 TypeScriptでのtypeof型演算子の説明】

JavaScriptのtypeof演算子では「 typeof 値」で型の判定ができます。

実行結果は、型のString表記になります。

nullだけはtypeof 演算子での型判定が特殊でobjectとして判定されるので要注意です。

また、typeof 演算子で型の判定をするときは、実行結果が型のString表記であることから文字列で判定することに注意してください。

typeof-演算子-基本構文

構文: 「 typeof 値 」
実行結果(返り値): 判定された型のstring表記
注意点: 型の判定をするときは、文字列であることに注意！

// < typeof-演算子: 型のCheck >

// 1. typeof-演算子(JavaScript): 「 typeof 値 」で型の判定ができる。
// null だけ特殊な判定なので要注意！

console.log(typeof ''); // string
console.log(typeof true); // boolean
console.log(typeof 12); // number

console.log(typeof ['apple', 'grape', 'orange']); // object
console.log(typeof {apple: 'りんご', grape: 'ぶどう', orange: 'オレンジ'}); // object

console.log(typeof function momoChan (){ console.log('Myao') }); // function

const Arrow = ()=> { console.log('アロー関数') };
console.log(typeof Arrow); // function

console.log(typeof Symbol('ももちゃん')); // symbol
console.log(typeof BigInt(123456789012345)); // bigint

console.log(typeof undefined); // undefined
console.log(typeof null); // object
// nullは、typeof-演算子の判定が、objectなので要注意です！

// 2. typeof-演算子で型の判定をするときは、文字列であることに注意！
const robotama = 'ロボ玉';
if (typeof robotama === 'string') console.log('文字列です');

if (typeof Arrow === 'function') console.log('関数です');

if (typeof null === 'object') console.log('nullは歴史的な経緯でObject扱いです');

instanceof演算子の使い方

instanceof演算子でObjectが特定のClassに属しているかどうかを確認することができます。

また、継承元の親Classも判定することができます。

注意点とすると、Objectに対してClass判定をする演算子なので、Primitive Typeには使えないことです。

instanceof-演算子-基本構文

構文: 「 Object instanceof Class 」
実行結果(返り値): true/false
注意点: Primitive-Typeには使えない！

// 1. instanceof-演算子: instanceof 演算子でObjectが特定のClassに属しているかどうかを確認することができます。
// また継承も考慮されます。

// 構文: 「 Object instanceof Class 」
// 実行結果(返り値): true/false

const object = {
    apple: 'りんご',
    apple_panchi: 'りんごパンチ'    
};
console.log(object instanceof Object); // true

// Array-Classは、Object-Class(親Class)でもある。
const array = [1, 2, 3];
console.log(array instanceof Array); // true
console.log(array instanceof Object); // true

// Primitive-Typeは、判定できない。
const boolean = true;
console.log(boolean instanceof Boolean); // false
console.log(boolean instanceof Object); // false

function Car(make, model, year){
    this.make = make;
    this.model = model;
    this.year = year;
};

const auto = new Car('Honda', 'Accord', 1998);

console.log(auto instanceof Car); // true

// Car-Classは、Object-Class(親Class)でもある。
console.log(auto instanceof Object); // true

in演算子の使い方

in演算子は、指定されたkey名がObject内にある場合に、trueを返します。

注意点とすると、key名をstring表記する必要があることです。

in-演算子-基本構文

構文: 「 "key名" in Object 」
実行結果(返り値): true/false
注意点: key名はstring表記する！

// < in-演算子: keyのCheck >

// in-演算子は、指定されたkey名がObject内にある場合に、trueを返します。

const myCar = { make: 'Nissan', model: 'DAYZ', year: 2018 };

console.log('make' in myCar); // true

// in-演算子を使った、keyの存在Check
if ( 'owner' in myCar ) console.log(`この車の所有者は、${myCar.owner}です`); else console.log('owner登録がありません'); // owner登録がありません

if ( 'make' in myCar && 'model' in myCar) console.log(`この車は${myCar.make}の${myCar.model}という車種です`); // この車はNissanのDAYZという車種です

以上、簡単にですが、typeof演算子と instanceof演算子、in演算子について解説しました。

ぜひ活用してみてください。