Как правильно проверить тип переменной в JavaScript

JavaScript или JS (сокращенно) не простой язык и начинающие разработчики узнают об этом не сразу. По началу они узнают азы и все кажется красочным и прекрасным. Заходя чуть глубже, появляются JavaScript массивы,  объекты, callback’и и все подобное, что часто выносит мозг.

В JavaScript важно правильно проверять тип переменной. Допустим вы хотите узнать является ли переменная массивом или объектом? Как это правильно проверить? В этом конкретном случае, есть хитрости во время проверки и именно о них будет эта запись. Давайте сразу приступим.

Проверка типа переменной

Например вам нужно проверить является переменная объектом, массивом, строкой или числом. Для этого можно использовать typeof, но она не всегда выдаст правду и в примере ниже я покажу почему.

Этот пример я написал, чтобы наглядно показать, почему typeof не всегда правильный выбор.

var _comparison = {
  string : 'строка', 
  int: 99, 
  float: 13.555,
  object: {hello: 'привет'},
  array: new Array(1, 2, 3) 
};

// Вернет массив с ключами объекта
var _objKeys = Object.keys(_comparison);

for(var i = 0; i <= _objKeys.length - 1; i++) {
        // выведем в консоль тип каждой переменной
  console.log(typeof _comparson[_objKeys[i]]);
}

Результат выполнения кода:

string 
number 
number 
object
object

Верно? — Нет, конечно. Есть две проблемы. Каждая из них будет подробно описана и предложено решение.

Первая проблема: float число, выводится как number

_comparison.float не является числом и вместо number должно быть float (число с плавающей точкой).Чтобы это исправить, можно создать функцию с проверкой как в коде ниже.

var _floatNumber = 9.22;
var _notFloatNumber = 9; 

console.log(isFloat(_floatNumber ));
console.log(isFloat(_notFloatNumber ));
console.log(isFloat(''));

function isFloat(n){
    return Number(n) === n && n % 1 !== 0;
}

Функция isFloat() выполняет проверку всех значений на числа с плавающей точкой. Сначала проверяется равна ли переменная n числу (Number(n) === n) и если да, то делается еще одна проверка на деление с остатком и если остаток есть, то возвращается булевой (true или false) результат (n % 1 !== 0).

В примере выше она возвращает true, false и false. Первое значение имеет float тип, второе нет — это обычное число и последнее всего лишь пустая строка, которая не подходит под правила.

Вторая проблема: массив определился как объект

В самом первом примере, массив отобразился как объект и это не очень хорошо, так как иногда вам нужно использоваться именно этот тип и ничего больше.

Есть несколько способов для проверки переменной на тип массива.

Первый вариант (хороший вариант). Проверяем принадлежность data к массиву с помощью instanceof (подробнее).

var data = new Array('hello', 'world');
var isArr = data instanceof Array;

Второй вариант (хороший вариант). Метод Array.isArray() возвращает булевое значение, которе будет зависеть от того является ли переменная массивом или нет (подробнее).

var data = new Array('hello', 'world');
var isArr = Array.isArray(data);

Третий вариант (самый лучший, но длинный). Для удобности, вы можете сделать этот способ функцией. Используя Object, мы делаем [object Array]. Если результат Object.prototype.toString.call(data) не равен [object Array] значит переменная не массив (подробнее).

var data = new Array('hello', 'world');

var isArr = Object.prototype.toString.call(data) == '[object Array]';
console.log(isArr);

Последний результат в виде удобной функции:

function isArray(data) {
  return Object.prototype.toString.call(data) == '[object Array]'
}

Теперь вы можете вызвать функции isArray() и как аргумент задать массив или что-то иное и посмотреть результат.

Послесловие

Запись получилась достаточно большой, чем изначально задумывалась. Но я ей доволен, потому что она достаточно кратко и четко описывает затруднения при проверке переменных в JavaScript и как их обойти.

Если у вас остались какие-либо вопросы — пишите их ниже к этому записи. Я буду рад помочь.