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.prototype.toString.call(data) не равен значит переменная не массив ().

Var data = new Array("hello", "world"); var isArr = Object.prototype.toString.call(data) == ""; console.log(isArr);

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

Function isArray(data) { return Object.prototype.toString.call(data) == "" }

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

Послесловие

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

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

Я решил написать цикл статей, под названием «Сложно о простом». Этот цикл будет посвящён языку JavaScript. Почему «сложно о простом»? Потому что всё, что я буду рассказывать я буду рассказывать учитывая особенности работы интерпретатора, начиная с типов данных. Всё это будет делаться для того, что бы потом можно было рассказать просто о сложном, например, о способах наследования в JavaScript и прочих патернах.

JavaScript – это объектно-ориентированный язык программирования, с прототипной организацией.
Что значит «с прототипной организацией», мы поговорим в следующей статье (она обязательно будет), а вот почему он «объектно-ориентированный» и всё ли в JS - объект, мы узнаем сегодня.
Для выполнения своих целей JS`у достаточно всего 9 типов. Причём только 6 из них доступны программе, оставшиеся же 3 доступны лишь на уровне реализации и используется спецификацией. На первый взгляд(и это первое заблуждение) всё в JS является объектами. Так вот пять из шести доступных программе типов являются так называемыми примитивами и не есть объектами(ниже я поясню почему и как их путают с объектами). Эти пять примитивов это:

- String (s=’str’)
- Number (n=10)
- Boolean (b=true)
И как я их называю «философские типы»:
- null (v = null)
- undefined (u=undefined)

Философские по тому, что null означает, что переменной присвоено ничего, а undefined – означает, что в переменную присвоили пустоту. Чем отличается «ничего» от «пустоты» в данном случае – поразмыслите на досуге. Сейчас мы этого делать не станем.

Шестой, доступный программе тип(объектный) – это:
- Object (не путайте с конструктором Object, мы сейчас ведём речь лишь об абстрактных типах!) – единственный тип, представляющий объекты в JavaScript.
Объект - это структура данных(целый их набор), представленный в виде набора пар «ключ-значение». Значением может быть любой из типов данных - тогда это будет свойство объекта, или даже функция - тогда это будет метод объекта.

Есть превеликое множество способов работы с примитивами. Начиная тем, что их можно присвоить в переменные через литералы или через конструкторы и заканчивая тем, что примитивы можно вовсе не объявлять в переменные, работая с ними на прямую. Так же примитивы могут быть в глобальных переменных и в локальных.

Вот несколько примеров:

Var v1; //undefined (пустая) локальная переменная var v2="2"; //строковая локальная литеральная переменная var v3 = new String(2); //строковая локальная, объявленная через конструктор переменная. Создаст новый объект типа String v4 = String(2); //строковая глобальная переменная вызванная через конструктор. Создаст переменную window.v4 "2".length; // строка не станет переменной но её можно уже использовать как Объект 34..toString(); //число не станет переменной но его уже можно использовать как объект 12. toString(); //число не станет переменной но его уже можно использовать как объект (22).toString();//число не станет переменной но его уже можно использовать как объект

В последних 4-х командах, как раз хорошо видно как примитив путают с объектом – ведь мы же вызываем метод, через точку – прямо как у объекта. Действительно создаётся впечатление, что эти примитивы – объекты.

Заблуждение усугубляется, когда мы проверяем тип переменной, например

Var v = null; typeof v;

И получаем в ответ «object».

А если мы напишем:
var v = null; v instanceof Object;

То в голове вообще возникнет каша, потому, что результат последней строчки будет «false». То есть переменная v имеет тип object, но не унаследована от типа Object. Что за дела?!

Для начала объясню подвох с typeof null. Этот оператор возвращает тип объекта. А дело в том, что оператор typeof возвращает строковое значение, взятое из жёстко закреплённой таблицы, где прописано: «для null – возвращать «object»». Оператор же instanceof – проверяет принадлежит ли что-то к указанному типу данных. Как он это делает, я расскажу в следующей статье, но, уверяю вас, в данном случае он отработал верно, примитив null ни в коем случае не унаследован от типа Object – он сам по себе, примитив – низшая ступень развития.

Ладно, с typeof и instanceof разобрались, но методы то у примитивов вызываются – как у объектов прям! Как, если это не объект?

Тут дело вот в чём. Существует такая вещь как функции-обёртки(конструкторы)(и снова всё прояснится во второй статье). Они есть для всех примитивов (Number(), Boolean(), String()), а так же и другие. Их суть состоит в том, что бы из примитива создать объект, у которого будут вспомогательные методы для работы с данным типом примитива.
Например переменную можно создать так:

Var num = new Number(23.456);

В таком случае из примитива 23.456 мы получим объект.
Для типа number конструктор Number() имеет вспомогательный метод toPrecision() – он определяет для числа количество значимых цифр. Например, если числу 23.456 установить количество значимых цифр 4, то мы получим число 23.45.
И вот когда мы пытаемся обратится к примитиву как к объекту:

(23.456). toPrecision(4);

Интерпретатор временно оборачивает, примитив в объект вызовом new Number(23.456) и потом уже у этого объекта вызывает метод toPrecision(), который у него теперь есть. Таким образом, многие ошибочно считают, что всё в JS есть объектом.

Так же есть ещё один пример вводящий в заблуждение и вызывающий недопонимание происходящего. Вот код:

Var str = ‘str’; str.test = ‘test’; //ошибки не будет, программа продолжит работать, но console.log(str.test); //undefined

Если бы мы считали, как раньше, что str – это объект, мы бы удивились, почему он не запомнил в себе новое свойство test. Но теперь мы знаем, что при обращении к примитиву как к объекту, он временно оборачивается в объект типа String. Но после выполнения операции эта обёртка исчезает, а вместе с ней и новое свойство test. Вот и всё, никакой магии.

На самом деле, забегая наперёд, во время оборачивания примитива в объект, выстраивается целая цепочка наследования (как это организовано мы поговорим позже), но по сути получается такая вот «матрёшка»:

Object(Number(<примитив>)). Родителем любого объекта в JS, так или иначе, будет Object. При вызове свойства в объекте поиск проходит по всей этой «матрёшке» пока не найдёт в одном из объектов это свойство или вернёт undefined или если искали метод, то выбросит исключение. Таким образом, у примитива также доступны свойства объекта Object. Как работает прототипное наследование и о его тонкостях мы поговорим во второй статье.

Для интриги над второй статьёй, которую я хочу выпустить, расскажу про ещё один момент связанный с функциями конструкторами - это преобразование типов. JS - это не строго типизированный язык. Это значит, что в момент объявления переменной мы не обязаны указать какого она типа, и более того во время работы программы в эту переменную можно ложить данные абсолютного любого типа. А так же мы можем использовать, например, строковые переменные в математических действиях или наоборот, числа в операции конкатенации. Пример:

Var str = "abc"; str+1; // "abc1"

Здесь примитив типа number - 1, будет преобразован в строковый примитив. В объектах эта возможность доступна через вызов метода toString(), в объектах типа number, есть метод valueOf(), который вернёт примитив типа number. Но мы вроде как говорили что методы могут быть только у объектов. Значит в процессе преобразования примитива из одного типа в другой, происходит тоже оборачивание в объект? Уверяю вас что нет. Вызов этого метода происходит не явно, когда функция-конструктор вызывается интерпретатором без оператора new. Что за волшебный оператор new и что происходит когда функция-конструктор вызывается без него, да и что блин в конце то концов за функция-конструктор такая, мы поговорим в следующей статье. Пока поверьте мне на слово - преобразование типов происходит сразу - из примитива в примитив.

Пока, конечно, больше вопросов чем ответов, однако, поверьте, всё станет намного прозрачнее после прочтения второй статьи. Здесь я в основном заинтриговал и поднял ряд вопросов - так сказать взбудоражил умы. Но всё же кое-что можно вынести и из этой статьи:
1. Не смотря на расхожее мнение «всё в JS является объектами» - это не так, мы выяснили, что из 6 доступных программисту типов данных аж 5 является примитивами и лишь один представляет тип объектов.
2. Про объекты мы узнали, что это такая структура данных, которая содержит в себе пары «ключ-значение». При значением может быть любой из типов данных (и это будет свойство объекта) или функция (и это будет метод объекта).
3. А вот примитивы – это не объекты. Хотя с ними и можно работать как с объектом (и это вызывает заблуждение что примитив – это объект), но…
4. Переменные можно объявить как по простому (литерально) (var a = ‘str’), так и через функцию-конструктор (обёртка)(var a = new String(‘str’)). Во втором случае мы получим уже не примитив, а объект созданный функцией-обёрткой String(). (что за магический оператор new и что такое функция-конструктор мы узнаем дальше).
5. Узнали, что именно за счёт создания обёртки над примитивом (new String(‘str’)) c ним можно работать как с объектом. Именно эту обёртку создаёт интерпретатор вокруг примитива, когда мы пытаемся работать с ним как с объектом, но после выполнения операции она разрушается (поэтому примитив никогда не сможет запомнить свойство, которое мы ему присвоим a.test = ‘test’- свойство test исчезнет с обёрткой).
6. Узнали, что у объектов есть метод toString() который возвращает строковое представление объекта (для типа number valueOf() – вернёт числовое значение).
7. Поняли, что при выполнении операций конкатенации или математических операциях примитивы могут переопределить свой тип в нужный. Для этого они используют функции-обёртки своих типов, но без оператора new (str = String(str)).(в чём разница и как это работает, поговорим дальше)
8. И наконец, узнали, что typeof берёт значения из жёстко зафиксированной таблицы (вот откуда ещё одно заблуждение, основанное на typeof null //object).

Урок №3
Типы данных в языке JavaScript

В прошлом уроке мы выяснили, что переменная — это именованная область памяти, которая хранит в себе какие-либо данные (значения).

У каждого значения в JavaScript, имеется свой тип данных . Всего в JavaScript существует 6 типов данных, в этом уроке по JavaScript, мы рассмотрим 4 типа данных:
— числовой тип данных number ,
— строковый тип данных string ,
— логический тип данных boolean ,
— неопределённый тип данных undefined .

Остальные два изучим чуть позже:
— объектный тип данных object
— пустой тип данных null

Оператор typeof

Прежде чем рассмотреть типы данных JavaScript , познакомимся сначала с оператором typeof , он позволяет узнать какой тип данных присвоен переменной, делается это следующим образом:

Alert(typeof имяПеременной);

После этого скрипт должен выдать какое-либо сообщение: number , string , boolean , undefined , object .

Тип данных: число (number)

Когда переменной, в качестве значения, присваивается какое-либо число (без кавычек) , её тип данных становится number

Var myNumber; myNumber = 5; alert(typeof myNumber);

В первой строке мы создали переменную с именем myNumber , во второй строке, присвоили переменной значение 5 , в третьей с помощью оператора typeof вычислили тип данных у переменной myNumber , а функция alert() показала нам результат этих вычислений.

В итоге, данный скрипт выведет нам сообщение number . Если число обрамить кавычками (одинарными "5" или двойными "5" ) , то оно превратится в строку string .

Тип данных: строка (string)

Когда переменной в качестве значения присваивается какое-либо значение, заключённое в двойные " " или одинарные кавычки " " , то её тип данных становится string .

Var myString; myString = "Привет, я строка JavaScript!"; alert(typeof myString);

В первой строке мы создали переменную с именем myString , во второй строке, присвоили переменной значение "Привет, я строка JavaScript!" , в третьей с помощью оператора typeof вычислили тип данных у переменной myString , а функция alert() показала нам результат этих вычислений. В итоге, данный скрипт должен вывести нам сообщение string .

Тип данных: логический тип данных (boolean)

Когда переменной в качестве значения присваивается true или false , без кавычек , то её тип данных становится boolean .

Тип данных boolean — это логический тип данных, он имеет всего два значения: true (правда) или false (ложь) .

Var myBoolean; myBoolean = true; alert(typeof myBoolean);

В первой строке мы создали переменную с именем myBoolean , во второй строке, присвоили переменной значение true , в третьей с помощью оператора typeof вычислили тип данных у переменной myBoolean , а функция alert() показала нам результат этих вычислений. В итоге, данный скрипт должен вывести нам сообщение boolean .

Логический тип данных, мы изучим более подробно в следующих уроках, посвящённых операциям сравнения, логическим операциям и оператору ветвления if

Тип данных: undefined

Тип данных undefined появляется тогда, когда переменная объявлена, но не инициализирована, т.е. переменная создана, но значения ей не присвоили.

Var myUndefined; alert(typeof myUndefined);

В первой строке мы создали переменную с именем myUndefined , во второй строке с помощью оператора typeof вычислили тип данных у переменной myUndefined , а функция alert() показала нам результат этих вычислений. В итоге, данный скрипт должен вывести нам сообщение undefined .

Доступ к значению переменной

Чтобы получить доступ, к значению переменной, нужно обратиться к ней по имени:

В первой и второй строках кода мы создали переменные myString и myNumber , в третьей и четвёртой строках присвоили переменным значения "Привет, МИР!" и 5 , в пятой и шестой строках с помощью функции alert() вывели результаты Привет, МИР! и 5

В процессе работы компьютерные программы манипулируют значениями, такими как число 7 или текст "HelloWorld!". Каждое значение, которое может быть представлено и обработано в языке программирования относится к определённому типу данных . Тип данных определяет типы значений, которые используются в языке программирования.

В JavaScript типы данных можно разделить на две категории: простые (их также называют примитивными ) типы и составные (их также называют ссылочными или объекты ).

• string - текстовые строки (обычно их называют просто - строки)
• number - числа
• boolean - логические (булевы) значения

Так же к простым типам относятся два специальных значения:

• null
• undefined

К составным типам данных относятся:

• function - функции
• array - массивы
• object - объекты

Разница между простыми и составными типами

Разница между простыми и составными типами проявляется при копировании значений.

Когда переменной (параметру функции, свойству или элементу массива) присваивается значение простого типа, например число, то в переменную записывается само значение (в данном случае - число). При выполнении присваивания одной переменной (со значением простого типа) другой переменной происходит копирование значения. В результате каждая переменная имеет свою копию значения и изменения в одной из переменных никак не сказывается на значении другой:

Var num1 = 10; var num2 = num1; // Копируем значение alert("num1: " + num1 + // 10 "\nnum2: " + num2); // 10 num1 = 15; // Изменяем значение alert("num1: " + num1 + // 15 "\nnum2: " + num2); // 10

Когда переменной (параметру функции, свойству или элементу массива) присваивается значение составного типа, например объект, то в переменную записывается ссылка на значение (в данном случае - ссылка на объект). При выполнении присваивания одной переменной (в значении которой ссылка на составное значение) другой переменной происходит копирование ссылки на составное значение. В результате обе переменные ссылаются на одно и то же составное значение и любые внесённые изменения в значении одной из переменных будут сказываться на другой переменной:

Var o1 = {x:10}; var o2 = o1; // Копируем ссылку на объект alert("o1.x: " + o1.x + // 10 "\no2.x: " + o2.x); // 10 o2.x = 15; // Изменяем значение alert("o1.x: " + o1.x + // 15 "\no2.x: " + o2.x); // 15

null и undefined

Тип null имеет всего одно значение - null . Значение null является ссылкой на пустой объект и имеет специальное назначение - обычно оно используется для инициализации переменной, которой впоследствии будет присвоен объект.

Тип undefined имеет всего одно значение - undefined . Значение undefined указывает на изначальное отсутствие какого-либо значения. Получить значение undefined можно следующим образом:

• При обращении к переменной, которая была объявлена, но не была инициализирована.
• При обращении к несуществующему свойству объекта.
• При обращении к несуществующему элементу массива.
• При обращении к параметрам функции, которые не были инициализированы аргументами при вызове функции.
• Возвращается функциями, которые не имеют возвращаемого значения.
• Возвращается оператором typeof, если операндом является несуществующая переменная.

Идентификатор undefined является именем предопределённой глобальной переменной, которая инициализирована значением undefined . Переменная undefined доступна только для чтения.

Объекты обёртки

Каждый раз, когда в программе предпринимается попытка обратиться к свойству или методу значения примитивного типа, интерпретатор временно преобразует примитивное значение в объект соответствующего типа. Временные объекты, в которые преобразуются значения примитивного типа, называют объектами обёртками . Эти объекты используются интерпретатором для доступа к нужному свойству или методу. Сразу после обращения к свойству или методу объект обёртка уничтожается. Объекты обёртки создаются только для значений типа number , string и boolean . Значения null и undefined не имеют объектов оберток: любые попытки обратиться к свойствам этих значений будут вызывать ошибку.

Если для объекта обёртки попытаться установить новое свойство то, новое свойство не будет сохранено, так как объект обёртка уничтожается сразу после того, как выполнит свою работу:

Var str = "текст"; str.len = 5; // Установить свойство со значением. Сразу после этого объект уничтожается alert(str.len); // undefined, так как предыдущий объект обёртка уже уничтожен

Объекты обёртки можно рассматривать просто как реализацию удобства для работы со значениями примитивного типа и вообще не думать о них.

Programming languages all have built-in data structures, but these often differ from one language to another. This article attempts to list the built-in data structures available in JavaScript and what properties they have; these can be used to build other data structures. Wherever possible, comparisons with other languages are drawn.

Dynamic typing

JavaScript is a loosely typed or a dynamic language. Variables in JavaScript are not directly associated with any particular value type, and any variable can be assigned (and re-assigned) values of all types:

Var foo = 42; // foo is now a number foo = "bar"; // foo is now a string foo = true; // foo is now a boolean

Data types

The latest ECMAScript standard defines eight data types:

• Seven data types that are :

Primitive values

All types except objects define immutable values (values, which are incapable of being changed). For example and unlike to C, Strings are immutable. We refer to values of these types as "primitive values".

Boolean type

Boolean represents a logical entity and can have two values: true , and false . See Boolean and Boolean for more details.

Null type

Properties

In JavaScript, objects can be seen as a collection of properties. With the object literal syntax , a limited set of properties are initialized; then properties can be added and removed. Property values can be values of any type, including other objects, which enables building complex data structures. Properties are identified using key values. A key value is either a String or a Symbol value.

There are two types of object properties which have certain attributes: The data property and the accessor property.

Data property

Associates a key with a value and has the following attributes:

Accessor property

Associates a key with one or two accessor functions (get and set) to retrieve or store a value and has the following attributes:

Note: Attribute is usually used by JavaScript engine, so you can"t directly access it (see more about Object.defineProperty()). That"s why the attribute is put in double square brackets instead of single.

"Normal" objects, and functions

A JavaScript object is a mapping between keys and values. Keys are strings (or Symbol s) and values can be anything. This makes objects a natural fit for hashmaps .

Functions are regular objects with the additional capability of being callable.

Dates

When representing dates, the best choice is to use the built-in Date utility in JavaScript.

Indexed collections: Arrays and typed Arrays

Arrays are regular objects for which there is a particular relationship between integer-key-ed properties and the "length" property. Additionally, arrays inherit from Array.prototype which provides to them a handful of convenient methods to manipulate arrays. For example, indexOf (searching a value in the array) or push (adding an element to the array), etc. This makes Arrays a perfect candidate to represent lists or sets.

Typed Arrays are new to JavaScript with ECMAScript 2015 and present an array-like view of an underlying binary data buffer. The following table helps you to find the equivalent C data types:

TypedArray objects

Keyed collections: Maps, Sets, WeakMaps, WeakSets

These data structures take object references as keys and are introduced in ECMAScript Edition 6. Set and WeakSet represent a set of objects, while Map and WeakMap associate a value to an object. The difference between Maps and WeakMaps is that in the former, object keys can be enumerated over. This allows garbage collection optimizations in the latter case.

One could implement Maps and Sets in pure ECMAScript 5. However, since objects cannot be compared (in the sense of "less than" for instance), look-up performance would necessarily be linear. Native implementations of them (including WeakMaps) can have look-up performance that is approximately logarithmic to constant time.

Usually, to bind data to a DOM node, one could set properties directly on the object or use data-* attributes. This has the downside that the data is available to any script running in the same context. Maps and WeakMaps make it easy to privately bind data to an object.

Structured data: JSON

JSON (JavaScript Object Notation) is a lightweight data-interchange format, derived from JavaScript but used by many programming languages. JSON builds universal data structures. See JSON and JSON for more details.

More objects in the standard library

JavaScript has a standard library of built-in objects. Please have a look at the reference to find out about more objects.

Determining types using the typeof operator

The typeof operator can help you to find the type of your variable. Please read the for more details and edge cases.

Specifications