Оператори typeof та instanceof у JavaScript

JavaScript – це вільно типізована мова, тому немає ніяких обмежень на тип змінної. Наприклад, якщо створити змінну з типом string, пізніше можна присвоїти цій змінній number:

let message = 'Hello';
message = 15; // ok

Такий динамізм дає гнучкість, але з іншого боку забирає впевненість, що змінна містить значення певного типу. Наприклад, уявімо що функція greet(name) очікує рядковий аргумент, однак викликати цю функцію можна з будь-яким типом аргументу:

function greet(name) {
  return `Hello, ${name}!`;
}

console.log(greet('Jhon')); // Hello, Jhon!
console.log(greet(true)); // Hello, true!
console.log(greet([1])); // Hello, 1!

Тож іноді виникає потреба використання таких операторів JavaScript як: typeof (для перевірки типу значення), або instanceof (для перевірки типу екземпляра).

Оператор typeof

typeof у JavaScript – це оператор, який дозволяє визначити тип виразу, що обчислюється до значення, тип якого нам потрібно отримати:

const typeAsString = typeof expression;

На місці expression бути змінна, accessor властивості об’єкта, виклик функції, тощо.

Розглянемо приклади роботи оператора typeof у JavaScript:

function greet(name) {
  return `Hello, ${name}!`;
}
console.log(typeof greet); // function
console.log(typeof greet('Jhon')); // string

const name = 'Jhon';
console.log(typeof name); // string

const person = {
  name: 'Jhon',
  age: 30,
};
console.log(typeof person); // object

Як було показано в попередньому прикладі, typeof об’єкта повертає object, при цьому typeof null також обчислюється як object:

console.log(typeof null); // object

Також за допомогою typeof можна узнати, чи визначена змінна. Якщо ні – typeof повертає рядок 'undefined'. Тобто typeof myVar === 'undefined' повертає значення true, якщо myVar не визначено:

let name;

console.log(typeof name); // undefined
console.log(typeof name === 'undefined'); // true

Оператор instanceof

Функції JavaScript можуть створювати об’єкти:

function Person(name, age) {
  this.name = name;
  this.age = age;
}

const jhon = new Person('Jhon', 30);
console.log(jhon.name); // Jhon

new Person('Jhon', 30) – це виклик конструктора, що створює екземпляр Person. JavaScript надає можливість перевірити, що певний екземпляр було створено за допомогою певного конструктора. Для цього використовується оператор instanceof:

const jhon = new Person('Jhon', 30);
console.log(jhon instanceof Person); // true

Починаючи з ES2015, новим способом створення об’єктів є використання синтаксису класів. Перепишемо попередній приклад з використанням класу:

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}

const jhon = new Person('Jhon', 30);

Оскільки jhon було створено за допомогою класу Person, а саме const jhon = new Person('Jhon', 30) – виклик jhon instanceof Person поверне значення true:

const jhon = new Person('Jhon', 30);
console.log(jhon instanceof Person); // true

instanceof та батьківський клас

Створимо клас Employee, що розширює батьківський клас Person:

class Employee extends Person {
  constructor(name, age, job) {
    super(name, age);
    this.job = job;
  }
}

const manager = new Employee('Jhon', 30, 'manager');
console.log(manager instanceof Employee); // true

Очікувано, що manager є екземпляром класу Employee. Але в той же час, manager також є екземпляром базового класу Person:

const manager = new Employee('Jhon', 30, 'manager');
console.log(manager instanceof Person); // true

Отже, object instanceof Constructor повертає значення true, якщо об’єкт є екземпляром Constructor, або ж Constructor є батьківським класом для класу екземпляра.

Підсумок

typeof – це оператор, який дозволяє визначити тип значення, до котрого обчислюється вираз (змінна, accessor властивості об’єкта, виклик функції, тощо). Оператор instanceof дає змогу перевірити, що вказаний екземпляр було створено за допомогою певного конструктора.

Мітки: