Что делает оператор typeof и в каком формате возвращает данные?

Краткий ответ

Оператор typeof определяет тип данных и возвращает строку с названием типа:

typeof 42;        // "number"
typeof "hello";   // "string"
typeof true;      // "boolean"
typeof undefined; // "undefined"
typeof null;      // "object" (особый случай!)
typeof NaN;       // "number" (особый случай!)

Важные особенности:

typeof null возвращает "object" (историческая ошибка)
typeof NaN возвращает "number" (NaN технически число)
Всегда возвращает строку, а не сам тип

Как работает typeof

Синтаксис

// Как оператор (без скобок)
typeof value;
 
// Как функция (со скобками)
typeof(value);
 
// Оба варианта работают одинаково
console.log(typeof 42);    // "number"
console.log(typeof(42));   // "number"

Возвращаемые значения

Тип данных	Результат typeof	Пример
Number	”number”	`typeof 42`
String	”string”	`typeof "hello"`
Boolean	”boolean”	`typeof true`
Undefined	”undefined”	`typeof undefined`
Symbol	”symbol”	`typeof Symbol()`
BigInt	”bigint”	`typeof 123n`
Function	”function”	`typeof function(){}`
Object	”object”	`typeof {}`
Array	”object”	`typeof []`
Null	”object”	`typeof null`

Примеры использования

Базовые типы

// Числа
console.log(typeof 42);        // "number"
console.log(typeof 3.14);      // "number"
console.log(typeof Infinity);  // "number"
console.log(typeof NaN);       // "number" ⚠️
 
// Строки
console.log(typeof "hello");   // "string"
console.log(typeof 'world');   // "string"
console.log(typeof `template`); // "string"
 
// Логический тип
console.log(typeof true);      // "boolean"
console.log(typeof false);     // "boolean"
 
// Undefined
let x;
console.log(typeof x);         // "undefined"
console.log(typeof undefined); // "undefined"

Особые случаи

// null — историческая ошибка!
console.log(typeof null);      // "object" ⚠️
 
// Функции
function greet() { return "Hi!"; }
console.log(typeof greet);     // "function"
 
// Стрелочные функции
const arrow = () => {};
console.log(typeof arrow);     // "function"
 
// Объекты и массивы
console.log(typeof {});        // "object"
console.log(typeof []);        // "object"
console.log(typeof new Date()); // "object"

ES6+ типы

// Symbol (ES6)
const sym = Symbol('id');
console.log(typeof sym);       // "symbol"
 
// BigInt (ES2020)
const big = 123n;
console.log(typeof big);       // "bigint"

Особые случаи: null и NaN

typeof null === “object”

Это историческая ошибка в JavaScript, которую нельзя исправить:

console.log(typeof null);      // "object" (неправильно!)
console.log(null === null);    // true
console.log(typeof null === "object"); // true
 
// Правильная проверка на null
function isNull(value) {
  return value === null;
}
 
// Или проверка на "пустоту"
function isEmpty(value) {
  return value === null || value === undefined;
}

Почему так произошло? В первой версии JavaScript значения представлялись как тег типа + значение. Объекты имели тег 0, а null представлялся как NULL-указатель (0x00), поэтому получил тег объекта.

typeof NaN === “number”

NaN (Not a Number) технически является числовым типом:

console.log(typeof NaN);       // "number"
console.log(NaN === NaN);      // false (уникальное свойство!)
 
// Правильная проверка на NaN
console.log(Number.isNaN(NaN));     // true
console.log(Number.isNaN("hello")); // false
 
// Устаревший способ (менее точный)
console.log(isNaN(NaN));       // true
console.log(isNaN("hello"));   // true (приводит к числу!)

Практические применения

1. Проверка типов перед операциями

function safeAdd(a, b) {
  if (typeof a === "number" && typeof b === "number") {
    return a + b;
  }
  throw new Error("Аргументы должны быть числами");
}
 
console.log(safeAdd(5, 3));    // 8
// safeAdd("5", 3);            // Error

2. Условная логика

function processValue(value) {
  switch (typeof value) {
    case "string":
      return value.toUpperCase();
    case "number":
      return value * 2;
    case "boolean":
      return !value;
    case "undefined":
      return "Значение не определено";
    default:
      return "Неизвестный тип";
  }
}
 
console.log(processValue("hello")); // "HELLO"
console.log(processValue(5));       // 10
console.log(processValue(true));    // false

3. Валидация параметров функции

function createUser(name, age, isActive) {
  // Проверяем типы параметров
  if (typeof name !== "string") {
    throw new Error("Имя должно быть строкой");
  }
  if (typeof age !== "number" || age < 0) {
    throw new Error("Возраст должен быть положительным числом");
  }
  if (typeof isActive !== "boolean") {
    throw new Error("isActive должно быть boolean");
  }
  
  return { name, age, isActive };
}

Ограничения typeof

1. Не различает объекты

console.log(typeof {});        // "object"
console.log(typeof []);        // "object"
console.log(typeof null);      // "object"
console.log(typeof new Date()); // "object"
 
// Более точные проверки
Array.isArray([]);                    // true
value instanceof Date;                // true для дат
Object.prototype.toString.call([]);   // "[object Array]"

2. Не работает с необъявленными переменными

// Это вызовет ReferenceError
// console.log(undeclaredVar);
 
// Но typeof работает!
console.log(typeof undeclaredVar); // "undefined"
 
// Полезно для проверки существования глобальных переменных
if (typeof window !== "undefined") {
  // Код для браузера
}

Альтернативы typeof

1. instanceof

const arr = [];
const date = new Date();
 
console.log(arr instanceof Array);  // true
console.log(date instanceof Date);  // true
console.log(arr instanceof Object); // true (массивы — объекты)

2. Object.prototype.toString

function getType(value) {
  return Object.prototype.toString.call(value).slice(8, -1);
}
 
console.log(getType([]));        // "Array"
console.log(getType({}));        // "Object"
console.log(getType(null));      // "Null"
console.log(getType(new Date())); // "Date"

3. Специальные методы

// Для массивов
Array.isArray([]);               // true
 
// Для чисел
Number.isNaN(NaN);              // true
Number.isFinite(42);            // true
Number.isInteger(42);           // true
 
// Для строк
value instanceof String;        // false для примитивов
typeof value === "string";      // true для примитивов

Задачи для практики

Задача 1

console.log(typeof typeof 42);

Ответ

"string" — `typeof 42` возвращает строку "number", а `typeof "number"` возвращает "string".

Задача 2

console.log(typeof null);
console.log(typeof undefined);
console.log(typeof NaN);

Ответ

"object", "undefined", "number" — `null` возвращает "object" (баг), `undefined` корректно, `NaN` технически число.

Задача 3

function test() {}
const arrow = () => {};
const obj = { method() {} };
 
console.log(typeof test);
console.log(typeof arrow);
console.log(typeof obj.method);

Ответ

"function", "function", "function" — все виды функций возвращают "function".

Задача 4

let x;
console.log(typeof x);
console.log(typeof y);

Ответ

"undefined", "undefined" — объявленная, но не инициализированная переменная и необъявленная переменная дают одинаковый результат с `typeof`.

Задача 5

console.log(typeof [1, 2, 3]);
console.log(typeof { length: 3 });
console.log(Array.isArray([1, 2, 3]));
console.log(Array.isArray({ length: 3 }));

Ответ

"object", "object", `true`, `false` — `typeof` не различает массивы и объекты, нужен `Array.isArray()`.

Задача 6

const sym1 = Symbol("test");
const sym2 = Symbol("test");
const big = 123n;
 
console.log(typeof sym1);
console.log(typeof big);
console.log(sym1 === sym2);

Ответ

"symbol", "bigint", `false` — новые типы ES6+ корректно определяются, символы всегда уникальны.

Практические советы

1. Помните об особых случаях

// Плохо — не учитывает особенности
if (typeof value === "object") {
  // Сработает для null, массивов, дат...
}
 
// Хорошо — точная проверка
if (typeof value === "object" && value !== null && !Array.isArray(value)) {
  // Только для обычных объектов
}

2. Используйте для проверки примитивов

// Отлично для примитивных типов
if (typeof str === "string") { /* ... */ }
if (typeof num === "number" && !Number.isNaN(num)) { /* ... */ }
if (typeof bool === "boolean") { /* ... */ }

3. Комбинируйте с другими методами

function getDetailedType(value) {
  const type = typeof value;
  
  if (type === "object") {
    if (value === null) return "null";
    if (Array.isArray(value)) return "array";
    if (value instanceof Date) return "date";
    return "object";
  }
  
  return type;
}

Резюме

typeof возвращает строку с названием типа данных
Особые случаи: typeof null === "object", typeof NaN === "number"
Отлично работает для примитивных типов
Ограничен для различения объектов (массивы, даты, null)
Безопасен для необъявленных переменных
Комбинируйте с Array.isArray(), instanceof для точности

Оператор typeof — это базовый инструмент для проверки типов в JavaScript. Знание его особенностей поможет избежать багов и писать более надежный код!

Хочешь больше статей по подготовке к собеседованию? Подпишись на EasyAdvice(@AleksandrEmolov_EasyAdvice), добавляй сайт в избранное и прокачивай себя каждый день 💪