Типы Null String Undefined Boolean Number и другие.

В этом уроке по JS мы познакомимся с типами данных, научимся их преобразовывать и поработаем с оператором typeof.

Что такое типы данных в JS

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

Динамическая типизация

JS является динамически типизированным. То есть тип данных переменной меняется динамически в момент присвоения либо смены её значения. А не в момент объявления.

Например:

let userName; // Объявляем переменную
console.log(typeof userName);
userName = "Алексейка"; //Строка (String)
console.log(typeof userName);
userName = 58; // Число (Number)
console.log(typeof userName);

Объявляем переменную "userName" далее присваиваем некое значение Алексейка, а потом меняем значение на число 58. Так как же получить текущий тип данных переменных? Получить его можно с помощью оператора typeof. Теперь после каждого нашего действия, будет выводиться консоль нашу переменную вместе с оператором typeof. Тут мы четко видим, что тип данных нашей переменной менялся когда мы присваивали, либо меняли ее значение. Простыми словами - переменная никак не привязана к определённому типу, тип данных присваивается переменной вместе с значением. в JS существует 8 отдельных типов данных. Ряд из них называют примитивными

Так же существуют более сложный тип Object. На самом деле их даже 9, сущ еще тип который вам чуток знаком - это Function. По сути это тот же object выведенные в отдельный тип, для простоты определения типа для фукций. Информация по некоторым типам на столько много, что подробно нужно их изучать отдельно прям, они слишком глобальны, это можно сказать отдельная пара для изучения. Но сегодня, мы поговорим обо всех их, чтобы нам было хотя бы понятно поверхностно, для чего они и что они значат.

Undefined – неопределенный тип

Первый тип, неопределенный тип, переменная вернет этот тип данных, если она была объявлена, но ей не было присвоено никакого значения - т.е. она была не определена. Посмотрим на пример:

let userName; //Объявляем переменную
// Получаем тип данных
console.log(typeof userName);
// Получаем значение переменной
console.log(userName);

Объявляем переменную userName, но не присваиваем никакого значения, таким образом получает тип данных Undefined. Далее мы попробуем получить значения и тоже получим Undefined. Т.е. этот тип данных содержит всего одно одноименное значение Undefined и используется только для того, чтобы проверить была ли определена переменная или нет. Вот один из более сложных примеров, где на практике проверяется определена ли переменная или нет:

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

if (userName === undefined) {
	console.log('Переменная НЕ определена');
} else {
	console.log('Переменная определена');
}
// либо с помощью оператора typeof

if (typeof userName === 'undefined') {
	console.log('Переменная НЕ определена');
} else {
	console.log('Переменная определена');
}

1 способ проверяем значение переменной. 2 способ проверяет тип данных. На примере видно, что в обоих случаях мы получаем ответ "Переменная НЕ определена" Потому что нигде не была объявлена переменная. === - стравнивает ещё и тип данных. По другому его называют "Строгое равенство"

Тип данных Null

Null так же как и undefined содержит только одно значение - null Вот один из примеров:

// Пример
let userName = null;
console.log(userName);

Однако в js Null не является ссылкой на несуществующий объект, либо на нулевым указателям, как это сделано на других языках. Это специальное значение, которое представляет собой "ничего", т.е. пустое место, так что не стоит путать null с undefined. Дело в том, что переменная возвращающая null, определена, просто ее значение будет "ничего" Вот еще один пример:

// Пример
// Попытка обратиться в объекту которого нет
let block = document.querySelector('.block');
// Получаем null
console.log(block);

Где в переменной block я пытаюсь получить некий объект которого не существует, при попытке вывести в консоль, я получаю Null. (добавляем код)

// Вернет тип object
console.log(typeof block);

Стоит отметить, что при получении типа данных такой переменной с помощью оператора typeof мы получим тип object. Прикол в том, что это официально признанная ошибка оператора timeof которая тянется еще со времен создания js и до сих пор оставлена для совместимости. Конечно же null не является объектом, это специально значение с отдельным типом данных.

Boolean

Вообще он должен уже быть вам знаком еще со времен pascal или delphy Boolean – это Булевый или логический тип. Может принимать только два значения: true (истина) и false (ложь).

// Пример
let willYouMarryMe = true;
if (willYouMarryMe) {
	console.log(':)');
} else {
	console.log(':(');
}

На примере мы создали переменную willYouMarryMe и значение у нее true. При проверке мы получим веселый смайлик, но стоит поменять на значение false, мы получим грустный смайл.

//Так же можно использовать
//с операторами сравнения
let trueOrFalse = 58 < 18;
console.log(trueOrFalse);

Так же переменная может сама получать одно из этих значений, например с помощью оператора сравнения. на примере здесь переменной trueOrFalse, я задал некую задачку, что 58 < чем 18. Выводим в консоль и видим false, это не правда и ложь. Но стоит нам заменить это на > и сразу значение в нашей консоли поменяется.

Тип Number

Это уже от логично и так название "число" т.е. числовой тип данных представляет собой значение в виде целых чисел, а так же с плавающей запятой. это мы и можем видеть в примере:

let userAge = 20;
let userHeight = 1.83;
console.log(userAge);
console.log(typeof userAge);
console.log(userHeight);
console.log(typeof userHeight);

Но не только числа могут быть number, существуют специальные числовые значение такие как infinity и -Infinity

// Infinity 
let getInfinity = 58 / 0;
console.log(getInfinity);
console.log(typeof getInfinity);

Infinity это математическая бесконечность значение которое больше любого числа, получить его мы можем например делением на ноль. как видим на примере, вы получаем значение infinity, а тип данных number. (добавляем в 58 минус) В -infinity тоже самое, просто у нас отрицательные числа.

Так же есть специальное числовое значение NaN, оно означает вычислительную ошибку. Это результат неправильно, либо неопределённой математической операции.

// NaN
let getNan = 'Многочлен' / 10;
console.log(getNan);
console.log(typeof getNan);

Если где - то в математическом выражении есть NaN, то результатом вычислений с его участием будет NaN. Если у нас был бы более сложный код, либо функция, то вся бы функция вернула бы нам значение NaN.

Тип данных BigInt

Это еще один тип данных, он такой же как integer, как бы логично это не выглядело) Как понятно из названия, он тоже числовой, но поддерживает очень большие числа. Дело в том, что в JS тип данных number не может содержать числа чем 9007199254740991, или меньше, чем -9007199254740991. А BigInt:

//BigInt
const bigInteger = 12345678901234567890123456789n;
console.log(typeof bigInteger);

он может пригодиться в редких случаях, например при работе с криптографией либо секундомерах которые работают с микросекундами и т д. Он был введен, для того чтобы была возможность работать с числами произвольной длинны и для того, чтобы получить значение такого числа, нужно нашему числу добавить буковку N и таким образом мы получим bigint.

Тип данных String

Известный всем, тип данных "строка" Для того, чтобы вывести данный тип данных, нужно взять любое наше значение в кавычки. Уже мы с вами это разбирали, но напомню, что кавычки бываю 3ех типов.

let userName = "Фрилансер по жизни";
console.log(typeof userName);
let userNameV2 = 'Фрилансер по жизни';
console.log(typeof userNameV2);
let userNameV3 = `Фрилансер по жизни`;
console.log(typeof userNameV3);

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

let userAge = 36;
let userAgeInfo = `Возраст: ${userAge}`;
console.log(userAgeInfo);

Например здесь это является ${userAge}. В данном случае я встрил в строку переменную userAge и получил в уже вот такой результат. Строки вообще большая тема, ее тоже нужно разбирать полностью, на нее спокойно уйдет целая пара.

Тип данных Object

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

let userInfo = {
	name: "Алексис",
	age: 22
}
console.log(userInfo);
console.log(typeof userInfo);

И содержать в себе набор необязательных свойств. Свойства в JS это пара ключ + значение, разделяются они ":" как у нас на примере это name и название. Свойства между собой, разделяю запятой. Объекты очень важное место в языке JS, они тоже должны быть изучены отдельно.

Тип данных Symbol

Символ - это уникальный идентификатор объекта, создаются новые символы с помощью одноименной функции

//Symbol
let id = Symbol("id");
console.log(typeof id);

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

Тип данных Function

Уже чуток нам знакомый тип данных, по сути это тот же Object для более простого определения функций. это сделано, так как в JS можно преобразовывать один тип в другой с помощью операторов, либо специальных функций.

//Преобразование типов

//Строковое преобразование
let userAge = 58;
console.log(userAge);
console.log(typeof userAge);

userAge = String(userAge);

console.log(userAge);
console.log(typeof userAge);

Начнем со строкового преобразования, у нас есть переменная userAge, которой присвоено значение 58, это число, тип данных number, в консоли как мы и видим. Далее с помощью специльной функции стринг, мы меняем тип данных этой переменной и теперь значение будет тоже 58, но это уже строка и мы видим, что даже вывод этих значений в консоли разного цвета.

let userTrue = true;
console.log(userTrue);
console.log(typeof userTrue);

userTrue = String(userTrue);

console.log(userTrue);
console.log(typeof userTrue);

Еще один пример, переменная userTrue, логическая и значение у нее true, это мы видим в консоли, далее мы опять используем специальную функцию string и получаем то же значение true но уже как строку.

Численное преобразование, это тоже самое, но уже в обратном порядке:

//Численное преобразование
let userAge = "58";
console.log(userAge);
console.log(typeof userAge);

userAge = Number(userAge);

console.log(userAge);
console.log(typeof userAge);

Здесь переменная 58 строка, это в консоли видно, далее с помощью функции number мы преобразовываем это значение в число и выводим в консоль. Если мы попытаемся преобразовать строку в число:

let userAge = "ПКСд3";

userAge = Number(userAge);

console.log(userAge);
console.log(typeof userAge);

Но в этой строке нет вообще никаких чисел, то мы получим NuN

Есть еще один пример, когда у вас идет автоматическое преобразование без использование спец функций.

let userAge = "72" / "2";
console.log(userAge);
console.log(typeof userAge);

Например в переменной userAge есть некое выражение, где строка 72 деляться на строку 2, в итогу мы получаем число 36 и тип данных Number.

Так же есть логическое преобразование:

//Логическое преобразование
let userAge = "23";
console.log(userAge);
console.log(typeof userAge);

userAge = Boolean(userAge);

console.log(userAge);
console.log(typeof userAge);

Переменной userAge, число 23, далее мы применяем спец функцию Boolean и теперь, это уже true и теперь тип данных Boolean. хочу отметить, что число 0, вернет false

let userAge = 0;
console.log(userAge);
console.log(typeof userAge);

userAge = Boolean(userAge);

console.log(userAge);
console.log(typeof userAge);

однако строка, содержавшее число 0, вернет true, т.к. строка не пуста

let userAge = "0";
console.log(userAge);
console.log(typeof userAge);

userAge = Boolean(userAge);

console.log(userAge);
console.log(typeof userAge);

Если вместо нуля, мы сделаем пробел, то будет тоже самое. Потому что пробел, это тоже символ, любое значение вернет нам true.

ДОМАШКА

1. Изучить теорию

2. Какой или какие из вариантов не верны:

//Вариант №1 let userAge = 36; let userInfo = "Фрилансер ${userAge}";

//Вариант №2 let userHeight = 145 / 0; //Вернется значение NaN console.log(userHeight);

//Вариант №3 let userName; //Вернется тип данных Null console.log(typeof userName);

//Вариант №4 let userSize = "45" / "8"; //Вернется тип данных Number console.log(typeof userSize);