Зарегистрируйтесь, чтобы продолжить обучение

Семантика массивов JS: Абстракция с помощью данных

В предыдущем уроке сказано, что массив — самый простой способ представить точку. Но правильный ли это способ? Давайте разберёмся.

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

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

  • Список стоп-слов
  • Список пользователей
  • Список уроков курса
  • Список ходов шахматной партии (порядок важен)

Применительно к нашей графической библиотеке массив подходит, например, для хранения коллекции точек или набора отрезков.

Сама точка не является коллекцией. Это единое целое, части которого не имеют смысла сами по себе. Между ними нельзя установить никакого порядка, в отличие от, скажем, списка пользователей. А код работающий с конкретной точкой, представленной массивом, всегда ожидает, что массив состоит из двух элементов, каждый из которых имеет определённую позицию. Другими словами, массив используется как структура для описания составного объекта (то есть такого, который описывается не одним значением, а несколькими, в данном случае — двумя числами-координатами).

В такой ситуации правильнее использовать объект:

const point = { x: 2, y: 3 };
const symmetricalPoint = { x: -point.x, y: point.y };

Кода стало чуть больше, но семантика важнее. Такой код проще понимать, потому что вместо странных point[0] или point[1] появляются совершенно понятные с первого взгляда конструкции: point.x. Даже при выводе на экран сразу понятно, о чём идёт речь.

Представьте, как будет выглядеть представление отрезка на массивах. Как массив массивов:

const point1 = [2, 3];
const point2 = [-8, 10];
const segment = [point1, point2];

// код сложный для понимания
point1[1];
point2[0];
segment[1][0];

Понять, что это отрезок, нереально без понимания контекста. Единственное, что частично спасает ситуацию — хорошие имена переменных, но этого мало.

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

const point1 = { x: 3, y: 4 };
const point2 = { x: -8, y: 10 };
const segment = { beginPoint: point1, endPoint: point2 };

// такой код уже проще для понимания
point1.x;
point2.y;
segment.endPoint.y;

Запомните простое правило: код, который заставляет думать — неговорящие имена, плохие абстракции, неправильные структуры данных, сильная зависимость от контекста — плохой код (при этом важно не путать лёгкость и простоту).

Использование объекта сразу даёт ещё одно крайне важное преимущество — расширяемость. Индексированный массив, используемый как структура, хрупок. Поменять местами значение аргументов нельзя — сломается весь код, который рассчитывал на определённый порядок, либо придётся всё переписывать. Расширить тоже просто так не получится: часть кода, конечно, продолжит работать, но часть может сломаться (например, [x, y] = point). А использование объекта не полагается на порядок ключей и уж точно не зависит от их количества. В любой момент можно добавить новый ключ, и программа почти наверняка останется работоспособной.

Какие ещё данные нужно представлять в виде объектов? Любую одиночную сущность:

  • Пользователь
  • Курс
  • Урок
  • Платёж
  • Шахматная партия (помимо даты, имён и места, она содержит набор ходов)

Дополнительные материалы

  1. Ментальное программирование 1
  2. Ментальное программирование 2
  3. Simple Made Easy

Аватары экспертов Хекслета

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты

Для полного доступа к курсу нужен базовый план

Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.

Получить доступ
1000
упражнений
2000+
часов теории
3200
тестов

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно

  • 130 курсов, 2000+ часов теории
  • 1000 практических заданий в браузере
  • 360 000 студентов
Отправляя форму, вы принимаете «Соглашение об обработке персональных данных» и условия «Оферты», а также соглашаетесь с «Условиями использования»

Наши выпускники работают в компаниях:

Логотип компании Альфа Банк
Логотип компании Aviasales
Логотип компании Yandex
Логотип компании Tinkoff
Рекомендуемые программы
профессия
Верстка на HTML5 и CSS3, Программирование на JavaScript в браузере, разработка клиентских приложений используя React
10 месяцев
с нуля
Старт 26 декабря
профессия
Программирование на JavaScript в браузере и на сервере (Node.js), разработка бекендов на Fastify и фронтенда на React
16 месяцев
с нуля
Старт 26 декабря
профессия
Программирование на JavaScript, разработка веб-приложений, bff и сервисов используя Fastify, проектирование REST API
10 месяцев
с нуля
Старт 26 декабря

Используйте Хекслет по-максимуму!

  • Задавайте вопросы по уроку
  • Проверяйте знания в квизах
  • Проходите практику прямо в браузере
  • Отслеживайте свой прогресс

Зарегистрируйтесь или войдите в свой аккаунт

Отправляя форму, вы принимаете «Соглашение об обработке персональных данных» и условия «Оферты», а также соглашаетесь с «Условиями использования»