Типы данных и приведение типов

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

Примитивные типы

Примитивные типы — это базовые «кирпичики» данных в JavaScript. Их шесть.

string — строка, любой текст. Строки записываются в одинарных, двойных или обратных кавычках:

let city = 'Санкт-Петербург';
let greeting = "Добро пожаловать";
let message = `Добро пожаловать в ${city}`; // шаблонная строка
js

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

number — число. В JavaScript нет отдельных типов для целых и дробных чисел — это всегда просто number:

let age = 320;
let price = 4.99;
let temperature = -5;
js

Есть специальные числовые значения: Infinity (бесконечность) и NaN (Not a Number — «не число»). NaN появляется, когда результат математической операции не является числом:

console.log(0 / 0);       // NaN
console.log('abc' * 2);   // NaN
js

boolean — логический тип, может принимать только два значения: true или false. Используется для условий и флагов состояния:

let isOpen = true;
let hasError = false;
js

undefined — значение, которое переменная имеет по умолчанию, если ей ничего не присвоено:

let result;
console.log(result); // undefined
js

null — явное «пустое» значение. В отличие от undefined (переменная просто не инициализирована), null — это намеренное «здесь ничего нет»:

let selectedUser = null; // пользователь ещё не выбран
js

symbol и bigint — более специфичные типы, которые в базовой разработке встречаются редко. Просто знайте, что они существуют.

Оператор typeof

Узнать тип значения можно с помощью оператора typeof:

console.log(typeof 'привет');   // string
console.log(typeof 42);         // number
console.log(typeof true);       // boolean
console.log(typeof undefined);  // undefined
console.log(typeof null);       // object  ← об этом ниже
js

Объекты

Помимо примитивов в JavaScript есть объекты. Объект — это набор данных в формате «ключ: значение». С его помощью можно описать что-то составное:

const city = {
  name: 'Санкт-Петербург',
  foundedYear: 1703,
  isCapital: false,
};

console.log(city.name);        // Санкт-Петербург
console.log(city.foundedYear); // 1703
js

Обратиться к свойству объекта можно через точку (city.name) или через квадратные скобки (city['name']).

Массивы — это тоже объекты, просто с числовыми ключами и удобным синтаксисом:

const attractions = ['Эрмитаж', 'Петергоф', 'Исаакиевский собор'];
console.log(attractions[0]); // Эрмитаж
console.log(attractions.length); // 3
js

Ключевое отличие объектов от примитивов: примитивы хранятся «по значению», а объекты — «по ссылке». На практике это значит, что две переменные могут указывать на один и тот же объект:

const a = { count: 1 };
const b = a; // b указывает на тот же объект
b.count = 99;
console.log(a.count); // 99 — изменение через b затронуло a
js

Приведение типов

JavaScript умеет автоматически преобразовывать типы, и это поведение поначалу может удивить. Например:

console.log('5' + 2);   // '52' — число превратилось в строку
console.log('5' - 2);   // 3   — строка превратилась в число
console.log(true + 1);  // 2   — true это 1
console.log(false + 1); // 1   — false это 0
js

Что здесь происходит? Когда оператор встречает несовместимые типы, он пытается привести их к общему знаменателю. Правила этого приведения определены в спецификации языка и работают предсказуемо — просто нужно их знать.

Особого внимания заслуживает сравнение. В JavaScript есть два оператора равенства:

• == — нестрогое равенство, при сравнении JavaScript приводит типы;
• === — строгое равенство, типы не приводятся.

console.log(5 == '5');   // true  — строка привелась к числу
console.log(5 === '5');  // false — разные типы
console.log(null == undefined);  // true
console.log(null === undefined); // false
js

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

«Странное» поведение JS

Вот несколько примеров, которые часто цитируют как «странности» JavaScript:

console.log(typeof null);      // 'object' — известный баг в языке, сохранён для обратной совместимости
console.log(NaN === NaN);      // false — NaN не равен самому себе
console.log([] + []);          // '' — два пустых массива складываются в пустую строку
console.log([] + {});          // '[object Object]'
js

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

В реальном коде такие ситуации встречаются редко, если использовать === и следить за типами. Не нужно бояться JavaScript — нужно понимать его правила.

В следующем уроке поговорим о функциях — одной из ключевых концепций в программировании.