Основы Javascript. Часть 2

В продолжении цикла статей про основы Javacript, мы поговорим о ссылочных типах данных, методах работы с ними и косвенно затронем тему наследования. Не пугайся страшных слов, все будет изложено максимально последовательно и просто!

Ссылочные типы

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

const object1 = { name: 'Alex' }

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

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

const object1 = { name: 'Alex' }
const object2 = object1

Всё, круто, получилось... хотел бы я сказать, но нет.

Следует понимать, что в коде выше, в переменную object2 мы скопировали не сам объект, а ссылку на ячейку памяти. Следовательно - ситуация теперь такая:

"Ну и пофиг, данные то одинаковые" - первая мысль... Но не все так просто. Самое интересное будет, если мы попытаемся изменить object2. Я думаю, ты уже догадался, что произойдет:

const object1 = { name: 'Alex' }
const object2 = object1

object2.name = 'John' // вроде бы ок
console.log(object1.name) // будет выведено 'John'

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

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

Кстати о полях и методах, думаю об этом мы поговорим сейчас.

Поля (свойства)

Любой ссылочный тип данных может иметь собственные поля и методы. В коде выше мы уже объявляли поле 'name' у наших объектов. Из этих примеров можно вывести достаточно простое определение: поля (свойства) объекта - это пара "ключ-значение", которая может хранить в себе некий набор данных. Поля в свою очередь так же могут быть как объектами, так и примитивами. К примеру, давай создадим объект, который может охарактеризовать человека:

const people = {
  name: 'Alex',
  age: 23,
  city: {
    name: 'Moscow',
    postalCode: '101000',
  }
}

Что мы здесь видим ?

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

Методы

Помимо полей, объекты также могут иметь методы. Пока что, мы не будем писать кастомные методы, поговорим об уже существующих.

Обратимся к структуре выше:

const people = {
  name: 'Alex',
  age: 23,
  city: {
    name: 'Moscow',
    postalCode: '101000',
  }
}

Предположим, что такие данные нам приходят с сервера, то есть мы самостоятельно не заполняем объект, его заполняет какой-то умный дядя-бэкендер и отправляет нам. Как мы можем убедиться, что поле 'city' существует у объекта? Для этого есть дефолтный метод hasOwnProperty. Методы вызываются от самих объектов через точку как обычная функция:

people.hasOwnProperty('name') // true

Что мы сделали ?
Простым языком - спросили у нашего объекта, имеет ли он свойство 'name', на что функция нам ответила true.

Примеры ссылочных типов

Помимо объектов, о которых мы уже достаточно поговорили, Javascript предоставляет огромное множество других ссылочных типов (которые, кстати, в любом случае наследуются от объекта).
Немного посмотрим на самые распространённые из них.

Array

Массивы - основа языка Javascript. Они позволяют хранить перечисляемые однотипные элементы. Например:

const myArr = ['zero', 'one', 'two', 'three']

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

myArr[1] // 'one'

Индекс выбранного элемента указывается в квадратных скобках сразу после имени переменной.

Интересный факт: к полю обычного объекта так же можно обращаться через квадратные скобки. Для примера с Алексом из Москвы справедлива такая запись:

people['name'] == people.name // двойное равно используется для сравнения

Date

Ещё один ссылочный тип данных - дата. Для создания даты мы будем использовать следующий вариант записи:

const currentDate = new Date()
console.log(currentDate) // Date Wed May 03 2023 02:16:17 GMT+0500

Да, всё верно, на момент написания этой статьи у меня уже 2 часа ночи. Думаю, это заслуживает лайка и реакции на статью) Не забудь поделиться с друзьями, если тебе понравился материал.

Так же, помимо указанных выше типов существуют еще такие штуки как Map, Set, File, ArrayBuffer, Promise и другие ссылочные типы. Их очень много, каждый используется для конкретной задачи. Мы обязательно встретим их и обсудим более подробно.

Заключение

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

компьютер - марка, модель, цена
стол - материал, форма, количество ножек
погода - температура, скорость ветра, направление, осадки

Это очень круто поможет тебе закрепить материал данной статьи.

Подписывайся, ставь лайки и реакции, рекомендуй канал своим друзьям - это все очень мотивирует меня писать как можно больше, чаще и интереснее!
До скорых встреч, успехов!