ТИПЫ ДАННЫХ В JAVASCRIPT (ПРАВИЛЬНЫЙ ПОДХОД)

Вступление

В официальной документации написано, что в javascrtipt-е 6 типов. Но js в силу историчности и в силу отсутствия типизации имеет не очевидные типы, поэтому лучше воспринимать количество типов как 7 типов.  Сейчас всё расскажу. Не пугайтесь это легко проверить.

Скажу сразу, что я использую редактор кода Visual Studio Code крайне рекомендую его вам в том числе. Многие серьезные фронтенд разработчики используют его. Фронтенд специалисты — это разработчики кто как раз-таки работает с JavaScript-ом css и html.

Только браузер и ничего больше

Запустив файл в хроме, мы ничего не увидим потому что ничего еще не написали. Поэтому пока запустите консоль нажав сочетание клавиш ctrl+shift+J. Эта консоль встроена в каждый браузер. Самая попсовой считается в хроме.

Чтобы начать работать с JavaScript вам нужен только браузер. В моем случае это google chrome. Откройте браузер я открою стартовую страницу google.ru, но вы можете открыть любую др. Пока просто запустите консоль нажав сочетание клавиш ctrl+shift+J. Подобная консоль встроена в каждый браузер. Самая попсовая считается в хроме. Собственно, в браузере установлена среда, которая понимает js и умеет работать с ним. Удалим лишнее в консоли если что-то есть (Clear console Ctrl+L). В открытой консоли мы можем написать любую цифру, например, 1 и нажать enter.

Всё что выводится после нажатия «enter» проверит специальная программа-переводчик, которая называется компилятор. Он встроен в нашем случае в хром. Это как бы и есть та самая среда, о которой я говорил выше. По сути компилятор — это тот самый переводчик, который читает написанное нами на javascrip-е и переводит всё прочитанное компьютеру в его нолики и единицы. Но пока не стоит заморачиваться.

Главное обратите внимание, что, когда мы написали цифру 1 и после нажатия нам тупо вернулась эта единичка обратно в консоль. Вот этот процесс так и называется возврат. Запомните этот процесс чуть позже мы используем этот возврат уже в выражениях в Javascritp коде. (Вообще всё что возвращает и присваивает значение называется выражением, всё остальное инструкции) Мы также можем очень просто использовать арифметические операции типа плюс, минус, умножение и деление. Можем тут же умножать делить цифры и тут же в консоли к нам возвращается результат.

Основные типы данных

Число

В нашем первом примере мы использовали первый тип данных — число. Число также может быть целым или дробным. (Показать)

Строка

Следующий типа данных это строка. Строку в js получают через двойные или одинарные кавычки. Напишите любые символы в этих кавычках, и вы получите еще один тип данных — строку. Вы даже можете написать цифры в кавычках и таким образом этот литерал всё равно останется строкой (литералы — это всё что мы пишем сейчас голые цифры, строки, обрамленные в кавычки, и они, литералы представляют из себя тупо значения). Тут всё крайне просто и понятно с числами и строками в обычной бытовой жизни мы часто сталкиваемся поэтому такой тип данных интуитивно понятый нам.

Булевой тип

Далее непривычный для многих людей булевой тип данных.

Булевой тип это два набора символом false и true которые так и переводятся с анг. Истина и ложь или фальшь, если хотите.

Их суть невероятно простая, например, тут же в консоли мы можем спросить компилятор, а правда ли 1 == 1 (когда мы сравниваем два литерала на языке js, то это два символа «равно» т.к. один символ используется для другой цели, но об этом чуть позже. Такая пара двух символов мощный инструмент в языке js и называется оператором сравнения. Таких операторов сравнения несколько к ним мы еще вернемся). В итоге нажав enter мы получим значение true. Получается, что компилятор генерирует и возвращает в консоль результат литерального значения true, который указывает на тип данных Boolean отображая слово true или false. Фактически он прав, ведь действительно 1 Равно 1 и это истина полная правда. Тогда как написав 1 == 2 мы получим false. Кажется, всё хорошо и наш с вами компилятор не сломан и работает верно. Вы даже можете сравнить true с true. Как вы думаете, что вернется в консоль? По-моему, логично две истины равны истине.

Все три типа относят к основным типам данных.

Специальные типы данных

Undefined

Тип undefined по своему названию кто знает английский хорошо, наверное, уже догадываются что это не определенный тип. Когда что-то вернулось, но вернулось без определенного типа данных.

Давайте наконец используем символ равно, который в js называется оператором присваивания. В принципе он тоже довольно знаком из жизни. Например, в физике или математике мы использовали его чтобы как бы умственно присвоить значение переменным. Например, из физики 5-го класса m масса могла быть равна чему-либо. Например, наберите m = 100 и нажмите «Enter». Нам вернулась цифра 100. Но к тому же тут же в консоли нам стала доступна переменная m. Вызовем её, которая тоже содержит цифру 100. Такой процесс передачи цифры в переменную т.е. любой символ или слово называется присваивание. Это присваивание всегда работает с права на лево, но никак наоборот. Вот оно тоже как бы возвращается с правой стороны в левую и присваивается переменной m. Любопытно, что в процессе присваивания с права на лево само значение, в нашем случае это цифра 100 продолжает возвращается в консоль. Т. о. мы можем присваивать это значение бесконечному числу переменных и значение будем возвращается. Например, a = b = 100. Где 100 присвоится сначала b т.к. присваивание идет с права на лево. Потом значение внутри b присвоится переменной а. В итоге независимые переменные a и b имеют одинаковые значения 100. Попробуйте присвоить с лева на право и получим ошибку компилятора. Вообще, чтобы процесс присваивания был полностью верный нужно перед любыми переменной ставить указатель «var», который так и переводится variable – переменная. Фактически мы говорим компилятору переменная «x» равна 10. Var (Variable) = 10. Вот так будет правильнее.

Вернёмся к «Undefined». Для этого напишите, например, var test, но ничего не присваивайте и нажмите enter. В итоге получим undefined т.е. что-то должно было вернутся, но вернулось неопределенное или «Undefined» Значение.

Объяснение типа своими словами.

Т.е. тип — это некая комбинация символов, которую мы можем использовать определенным способом, и которая имеет свое особое поведение. В типы вкладываются человеческие смыслы. Никакой технической составляющей тут нет. На уровне железа всё что мы пишем компилятор переводит в сухие нолики и единицы. Но для нас людей эти типы имеют смысл. Сам написанный литерал говорит нам какой это по смыслу тип. Давайте еще раз для закрепления.

Тупо цифры — это числовой тип, литерал это тоже тупо цифра.

Слова в кавычках это – строковый тип, литерал — это символы в кавычках.

Особые слова false и true – булевой тип, литерал – это два слова без кавычек true и false.

Составные типы данных (array, object)

Иногда просто передавать число или строку скучно, как-то не информативно, согласитесь. Хочется объединить всё в одну группу. Можно очень просто объединить все простые или как говорят примитивные типа в некоторые конструкции.

Массивы

Самый простой способ объединить их, объединить в квадратные скобки.

[1, “test”, true]

Вернется конструкция где все наши данные определенного типа будут построены по очереди.  От нуля и почти до бесконечности. Т.е. конструкция представлять из себя список значений где есть числовой ключ и значение любого типа.

0:1
1:"Test"
2:true

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

[[1,2], [2,4], [4,5]]

Таким образом переменную с типом данных массив объявляют так

Var arr = [1,2,3] //где arr сокращенно от array.

//Альтернативный способ объявления массива
new Array(1,2,3).

В итоге к одному значению можно достучаться через индекс массива т.е.

arr[0]

Объекты

Еще одна конструкция. А внутри скобок прописывается синтаксис в виде ключ : “значение”. Где значение — это примитивный тип данных опять-таки число, строка, булевой тип данных. Я уже писал пример поэтому встроенный выпадающий список, который называют intellisense удобно подсказывает нам. Обычно пишут на английском во избежание проблем с кодировками. Такая конструкция называется объектом.

{ключ : «значение»}

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

{Name : “Kate”, Age : 18, IsMarried : false}

По описанной конструкции мы уже можем сказать, что она несет в себе какую-то смысловую нагрузку из реально мира. Т.е. в данном случае описание человека в данном случае некая Kate 18 лет на замужем. Поэтому такие конструкции и называют объектами.

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

typeof (оператор)

Итак, для закрепления давайте посмотрим, как быстро прочитать тип литерала или переменной. Во многих языках не только в js также есть операторы typeof который в удобном виде возвращает нам имя типа. Давайте запустим их по очереди.

typeof 1 //вернется "number"
typeof "" //вернется "string"
typeof true //вернется "boolean"
typeof undefined //вернется "undefined"

Дальше идет что-то странное.

typeof {} //вернется "object"
typeof [] //вернется "object"
typeof null //вернется "object"
typeof function(){} //вернется "function

Как быть с 3 object. Собственно, главная проблема — это определить эти 3 типа. Но об этом поговорим потом. Главное теперь вы понимаете, что по факту типов 9, то из-за того, что 3 типа объединены в один можно сказать что типов 7. Вообще вот этот ужас с типами решается типизированными препроцессорами такими как, например, typesctip о котором я также рассказывают на канале.