Типы данных в JS: полный гайд для начинающих

Понимание типов данных в JavaScript — это основа, на которой строится работа любого разработчика: от первой программы «Hello, world!» до создания сложных интерфейсных приложений. Все операции: сравнения, вычисления, работа с хранилищами и настройка интерфейсов, так или иначе опираются на знание типов данных и понимание их особенностей.

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

Как JavaScript хранит данные: примитивы и объекты

На момент написания статьи стандарт ECMAScript поддерживает 8 типов данных. Из них 7 примитивных, и только 1 объектный, то есть составной.

Что такое «тип данных» и зачем это знать?

Тип данных определяет, что умеет делать конкретная переменная: можно ли её сложить с другим числом, проверить, пуста ли строка, перебрать элементы или вызвать как функцию. Физически значения хранятся по-разному, и это влияет на поведение нашего кода при копировании переменных и работе с памятью.

Все типы данных в JavaScript

Undefined — тип с единственным значением undefined. Обычно означает «значение не установлено».
Null — специальное «ничего», но уже явно присвоенное переменной. Часто используется для «очистки» содержимого.
Boolean — логические значения: true и false.
Number — все числа: целые и дробные, включая NaN, Infinity.
BigInt — большие целые числа (вышли за пределы типичного Number — 2^53-1).
String — строки, любые последовательности символов.
Symbol — уникальный и неизменяемый идентификатор. Чаще всего используется как ключи в объектах.
Object — универсальный «контейнер», может хранить любые коллекции, сложные структуры, массивы, функции.

Почему важно различать примитивы и объекты?

Примитив (undefined, null, boolean, number, bigint, string, symbol) хранится «по значению»: присваивая одну переменную другой, вы копируете само значение.

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

Пример:

let a = 1;
let b = a; // b — this is a new primitive: if a changes, b will not change.

let obj1 = {x: 10};
let obj2 = obj1; // obj2 — this is a reference to the same object. By changing obj2.x, you will also change obj1.x.

Это различие часто становится причиной путаницы у новичков. Следите, когда копируете объекты — вы работаете с одной и той же сущностью в памяти!

Как определить тип значения в вашем коде: оператор `typeof`

Оператор typeof помогает в разработке и отладке: он возвращает строку, соответствующую типу значения.

Примеры:

typeof undefined                // "undefined"
typeof true                     // "boolean"
typeof "42"                     // "string"
typeof 42                       // "number"
typeof BigInt("9007199254740991") // "bigint"
typeof Symbol()                 // "symbol"
typeof {a: 1}                   // "object"
typeof function(){}             // "function"

Важно

Для null результат неочевиден: typeof null // "object". Это историческая ошибка стандарта, её просто нужно знать.

Для массивов и функций typeof возвращает «object» и «function» соответственно, хотя оба являются подтипами объекта.

Несколько слов о каждом типе: что важно помнить на практике

Undefined

Чаще всего получаете этот тип, если объявили переменную, но не присвоили ей значение:

let a;
console.log(a);       // undefined
console.log(typeof a) // "undefined"

Boolean

Базовый инструмент для проверки условий:

let isAdult = age > 18; // true or false

Number и BigInt

Number охватывает большинство нужд, но его точности может не хватить для очень больших целых чисел. Для работы с большими числами используйте BigInt, например, при вычислениях с большими счетами.

String

Для хранения и обработки текстов — имена, описания, адреса и т.д.

Symbol

Используется редко, чаще для создания уникальных ключей в объектах или библиотечных абстракциях.

Null

Осознанное отсутствие значения. Новички зачастую путают его с undefined. Главное различие: undefined — «значение ещё не было установлено», а null — «значение явно отсутствует» (сброшено).

Object (и его подтипы)

Объекты это ассоциативные контейнеры

Чаще всего они создаются с помощью литерала объектов (фигурные скобки). Ключами в объектах выступают строки или символы, а значениями любые типы.

let user = {
  firstName: 'John',
  lastName: 'Doe',
  phone: '555-24-42'
};

console.log(user.firstName); // "John"
console.log(user['firstName']); // "John"

Функции — особый вид объекта

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

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

Функции являются подтипом объекта и называются вызываемым объектом (callable object). Познакомившись с функциями ближе, можно заметить, что с ними действительно можно обращаться, как с объектами. Например, у них есть свойство “length”, к которому можно обратится через точку после имени переменной, как мы делали это в объекте. Это свойство говорит о количество аргументов функции (переданные данные). В нашем примере вернется ноль.

function greet() { /* code */ }
console.log(typeof greet); // "function" (callable object)
console.log(greet.length); // 0

Массивы — упорядоченные коллекции

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

let arr = [1, "2", [3]];
console.log(arr[0]); // 1
console.log(arr[2]); // [3]

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

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

let userQueue = [
  {fullName: 'John Doe'},
  {fullName: 'Martha Stuart'},
  {fullName: 'Sam Sparks'}
];
let firstUserInQueue = userQueue[0];
console.log(firstUserInQueue.fullName); // "John Doe"

Несколько несложных упражнений по сохранению различных типов данных в переменные для закрепления изученного материала:

Типичные ошибки и комментарии

Копирование объектов. При выполнении let b = a (если a и b — объекты) вы копируете не сам объект, а ссылку на него. Чтобы скопировать объект по значению, используйте, например, Object.assign({}, obj) или spread-оператор {...obj}.
typeof null. Возвращает «object», хотя сам null — это не объект. Просто запомните эту особенность, иначе можно ошибиться при проверке значений.
Проверка массива. typeof arr для массива возвращает «object», а не «array». Для точной проверки используйте Array.isArray(arr).

Краткий итог: запомнить и применять

В JS существует 7 примитивных типов данных и один объектный, из которого «вырастают» функции и массивы.
Главное различие: примитивы копируются по значению, объекты — по ссылке.
Для проверки типа используйте оператор typeof, но помните исключения (особенно с null и массивами).
Типы данных не абстракция, а ежедневный инструмент: от выбора правильного типа зависит поведение кода и его надёжность.
Нарабатывайте привычку различать и правильно использовать типы: это основа работы с переменными и объектами в любом проекте.