Основы Javascript

Эта статья первая в цикле статей о самом главном инструменте любого Frontend-разработчика, а именно - о Javascript.

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

Типы данных

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

Примитивные типы данных

Javascript предоставляет нам семь примитивных типов данных:
1) Number - число
2) String - строка
3) Boolean - логический тип
4) Undefined - специальный тип, означающий неопределённое значение
5) Null - специальный тип, означающий отсутствие значения
6) BigInt - тип для больших чисел
7) Symbol - тип, представляющий собой уникальные идентификаторы

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

const numOne = 50;
const numTwo = 50;

Что же произойдёт при выполнении этого кода ?
Javascript выделит фиксированный объем памяти для каждой переменной и добавит в стек две пары "ключ-значение".

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

Ссылочные типы данных

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

Изменения начинаются уже в самом начале, Javascript выделяет память для переменной типа Object, и сохраняет в стек пару "ключ-значение". Однако, именно здесь находится самый интересный момент - в графе "значение" у нас не будет тех данных, который мы хотим записать в переменную. Вместо этого, там будет находиться ссылка на эти данные. Сами же данные будут храниться в так называемой куче (Heap).

Возникает логичный вопрос - а что произойдет, если мы создадим вторую переменную и присвоим ей значение ранее созданного объекта ?
А произойдёт очень интересный момент.
Во вторую переменную у нас сохранится ссылка на ту же самую область памяти в куче, что и у первой переменной.

let object1 = {
  name: 'Alex',
  age: 23
};
let object2 = object1;

object2.age = 20;

console.log(object1);

Что же будет выведено в консоли ?

Ответ удивит.

И object1, и object2 ссылаются на одну и ту же область памяти, следовательно, когда с помощью второй переменной мы модифицируем объект, мы меняем не адрес ячейки памяти, а данные, которые находятся в этой ячейке. Как следствие, после обращения к этим данным с помощью первой переменной мы увидим изменённые данные.

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

Итоги

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