Зарегистрируйтесь для доступа к 15+ бесплатным курсам по программированию с тренажером

Семантика массивов 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

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

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

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

Ошибки, сложный материал, вопросы >
Нашли опечатку или неточность?

Выделите текст, нажмите ctrl + enter и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.

Что-то не получается или материал кажется сложным?

Загляните в раздел «Обсуждение»:

  • задайте вопрос. Вы быстрее справитесь с трудностями и прокачаете навык постановки правильных вопросов, что пригодится и в учёбе, и в работе программистом;
  • расскажите о своих впечатлениях. Если курс слишком сложный, подробный отзыв поможет нам сделать его лучше;
  • изучите вопросы других учеников и ответы на них. Это база знаний, которой можно и нужно пользоваться.
Об обучении на Хекслете

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

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

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

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

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

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

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

Логотип компании Альфа Банк
Логотип компании Aviasales
Логотип компании Yandex
Логотип компании Tinkoff
Рекомендуемые программы

С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.

Иконка программы Фронтенд-разработчик
Профессия
Разработка фронтенд-компонентов веб-приложений
27 октября 8 месяцев
Иконка программы Node.js-разработчик
Профессия
Разработка бэкенд-компонентов веб-приложений
27 октября 8 месяцев

Есть вопрос или хотите участвовать в обсуждении?

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

Отправляя форму, вы соглашаетесь c «Политикой конфиденциальности» и «Условиями оказания услуг»