Типы данных JavaScript

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

Типы данных js

В языке JavaScript есть следующие типы данных:

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

• String — строка;
• Number — число;
• BigInt — большое число (для значений, превышающих Number.MAX_SAFE_INTEGER);
• Boolean — булевое значение (true или false);
• Undefined — неопределенное значение;
• Null — отсутствие значения или объекта (специальное “пустое” значение);
• Symbol — уникальный идентификатор, полезный для создания уникальных ключей объектов.

Объектные типы:

• Object — объект, содержащий пары «ключ-значение» (словарь);
• Array —  массив;
• Function — функция, блок кода, выполняющий определенное действие;
• Map — карта, коллекция пар “ключ-значение” с поддержкой любого типа ключей;
• Set — множество, коллекция уникальных значений;
• Date — дата и время;
• RegExp — регулярное выражение, шаблон для работы со строками.

Примитивные значения

Примитивные значения — это те типы данных, которые нельзя отнести к объектам. Они хранятся как отдельные значения, а не в виде ссылок. Каждое такое значение неизменно после своего создания. В языке JavaScript существует 7 примитивных типов данных:

1. String

String — это тип данных для отображения текстовых данных. Строки здесь создаются при помощи одинарных (”), двойных (“”), или шаблонных кавычек (“). Строки неизменны, то есть любая операция над строкой создает новую строку.

const greeting = "Hello, world!";
const name=`JavaScript`; // Шаблонная строка
const message = `Hello, ${name}!`; // Интерполяция переменных

 

2. Number

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

Специальные значения:

• NaN (Not-a-Number) — обозначение результата неправильных арифметических операций.
• Infinity и -Infinity — результат деления на ноль.

const age = 26;
const price=19.99;
const negative=-6;

 

3. BigInt

Этот тип нужен для отображения крупных числовых значений, превышающих Number.MAX_SAFE_INTEGER. BigInt создается путем добавления n в число:

const largeNumber = 12345678901234567890n;

 

4. Boolean

Булевый тип (Boolean) может иметь одно из двух значений: true или false. Как правило, его используют для условных проверок.

const isJavaScriptFun = true;
const isWinterCold = false;

 

5. Undefined

Этот тип присваивается объявленной переменной, не получившей какого-либо значения. То есть, такая переменная существует, но у нее нет значения.

let user;
console.log(user); // undefined

 

6. Null

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

const emptyValue = null;

 

7. Symbol

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

const id = Symbol("id");

 

Объекты

Объекты в JavaScript — это сложные структуры, содержащие несколько значений. Они могут хранить разные типы данных вместе. К объектным типам относят массивы, функции и специальные объектные типы, такие как Map и Set.

Как создать объект в JavaScript

Объект в JavaScript создается при помощи фигурных скобок {}, внутри которых указываются пары ключ-значения, разделенные запятыми. Ключи могут быть строчками или значениями Symbol. Значения могут иметь любой тип (включая функции). Давайте посмотрим это на примере кода:

const user = {
 name: "Mary",
 age: 30,
 isMember: true
};

 

Как получить доступ к свойствам объекта

Доступ к свойствам объекта можно получить через точку (.). Такая запись используется, если название свойства известно и соответствует стандартным именочным правилам (без пробелов и спецсимволов).

console.log(user.name); // Mary

 

Также доступ можно получить через квадратные скобки [ ]: Этот метод используется с динамическими именами или при наличии спецсимволов и пробелов.

const property = "age";
console.log(user[property]); // 30

 

Как добавить, поменять и удалить свойства объекта

Можно добавить любое новое свойство к объекту. Надо только присвоить значение новому ключу.

user.email = "mary@example.com";

 

Для изменения текущих свойств объекта выполняются аналогичные действия.

user.age=18;

 

Удалить свойства объекта можно, используя оператор delete.

delete user.isMember;

 

Как перебрать свойства объекта

Чтобы перебрать все свойства объекта, следует применить цикл for…in, или воспользоваться методами Object.keys(), Object.values(), Object.entries().

Пример для for…in:

for (let key in user) {
 console.log(key, user[key]);
}

 

Пример для Object.keys(). Здесь он возвращает массив ключей объекта.

console.log(Object.keys(user)); // ['name', 'age', 'email']

 

Пример для Object.values(), где возвращает массив значений объекта.

console.log(Object.values(user)); // ['Mary', 18, 'mary@example.com']

 

Пример для Object.entries(), в котором возвращается массив пар [ключ, значение].

console.log(Object.entries(user)); // [['name', 'Mary'], ['age', 18], ['email', 'mary@example.com']]

 

Вложенные объекты

Каждый объекты может иметь внутри себя другие объекты. Так создаються сложные структуры данных.

const user = {
 name: "Mary",
 address: {
 city: "Los Angeles",
 zip: "10001"
 }
};
console.log(user.address.city); // Los Angeles

 

Методы объектов

Функции, являющиеся свойствами объекта, называются методами. Они могут делать определенные операции на объекте.

const calculator = {
 sum(a, b) {
 return a+b;
 },
 multiply(a, b) {
 return a*b;
 }
};
console.log(calculator.sum(3, 4)); // 7
console.log(calculator.multiply(3, 4)); // 12

 

this в контексте объекта

Ключевое слово this в методе объекта должно ссылаться на этот объект. Это эффективный способ взаимодействия с другими качествами объекта.

const person = {
 name: "Mary",
 greet() {
 console.log(`Hi, my name is ${this.name}!`);
 }
};
person.greet(); // Hi, my name is Mary!

 

Как создать объекты, используя Object.create()

Благодаря возможностям метода Object.create(), вы можете создавать новые объекты на основе текущего объекта-шаблона.

const prototypeUser = {
 greet() {
 console.log(`Hi, I am ${this.name}`);
 }
};

const newUser = Object.create(prototypeUser);
newUser.name = "Mary";
newUser.greet(); // Hi, I am Mary

 

Классы как способ создания объектов

В синтаксисе JavaScript классы нужны для создания шаблонов объектов. Так вы сможете создавать множество экземпляров объектов с одинаковой структурой.

class User {
 constructor(name, age) {
 this.name = name;
 this.age = age;
 }

 greet() {
 console.log(`Hi, I'm ${this.name}!`);
 }
}

const user1 = new User("Mary", 18);
user1.greet(); // Hi, I'm Mary!

 

Определение типов данных оператором typeof

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

Как работает typeof

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

console.log(typeof 24); // "number"
console.log(typeof "Hi"); // "string"
console.log(typeof true); // "boolean"
console.log(typeof undefined); // "undefined"

 

Как использовать typeof

Синтаксис оператора typeof очень прост. Его можно применять к переменным, литералам, функциям и выражениям:

Переменная:

let age = 18;
console.log(typeof age); // "number"

 

Литерал:

console.log(typeof "text"); // "string"
console.log(typeof 100); // "number"

 

Функция:

function greet() {
 return "Hi!";
}
console.log(typeof greet); // "function"

 

Выражение:

console.log(typeof(2+2)); // "number"

 

Особенности и ограничения typeof

Оператор typeof полезен программисту, но он имеет несколько особенностей, которые могут запутать новичков.

1. typeof null

Результат typeof null есть “object”, хотя это и примитивный тип. Это многолетняя ошибка, которая существует по техническим причинам и совместимости со старыми версиями JavaScript. null является отдельным типом данных, указывающим на отсутствие объекта, но typeof все равно возвращает “object”.

console.log(typeof null); // "object"

 

2. typeof для массивов

Исходя из того, что массивы в JavaScript сами по себе есть объекты, typeof для массива также вернет “object”. Это может оказаться странным. Поэтому для проверки, является ли значение массивом, лучше использовать метод Array.isArray().

const arr = [1, 2, 3];
console.log(typeof arr); // "object"
console.log(Array.isArray(arr)); // true

 

3. typeof для функций

Хотя функции являются объектами, typeof для функции вернет “function”. Это эффективно для проверки, является ли значение функцией.

function example() {} console.log(typeof example); // "function"

 

4. typeof для BigInt

BigInt выполняет работу для представления больших целых чисел. Оператор typeof возвращает “bigint” для значений этого типа.

const bigIntValue = 12345678901234567890n;
console.log(typeof bigIntValue); // "bigint"

 

Как применять typeof для проверки типов данных

Оператор typeof часто используется для динамической проверки типа данных в коде. Вот наглядный пример:

function processData(data) {
 if (typeof data === "string") {
 console.log("Это строка:", data);
 } else if (typeof data === "number") {
 console.log("Это число:", data);
 } else if (typeof data === "boolean") {
 console.log("Это буллевое значение:", data);
 } else {
 console.log("Тип неизвестен");
 }
}

processData("Hello"); // Это строка: Hi
processData(24); // Это число: 24
processData(true); // Это булевое значение: true

 

Проверка на null и Array с помощью typeof

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

Проверка на null:

let value=null;
console.log(value === null); // true

 

Проверка на массив:

let items = [1, 2, 3];
console.log(Array.isArray(items)); // true

 

Оператор typeof — очень полезный инструментом при проверке типов данных в JavaScript, но он обладает определенными ограничениями и особенностями, которые следует учитывать. Для сложных случаев, таких как проверка на null, массивы или другие специальные объекты, лучше использовать дополнительные методы, такие как Array.isArray() и сравнение с null.

Заключение

Владение навыками работы с типами данных JavaScript является базой для написания корректного и читабельного кода JavaScript. От примитивных типов, таких как Number, String и Boolean, до объектных структур, таких как Object и Array, многообразие типов позволяет надежно и быстро сохранять и обрабатывать данные. Кроме того, умение использовать преобразование типов помогает разработчику избежать ошибок и обеспечить соответствие значений ожидаемым типам.