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

---

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

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

Об обучении на Хекслете

• Статья «Как учиться и справляться с негативными мыслями»
• Статья «Ловушки обучения»
• Статья «Сложные простые задачи по программированию»
• Вебинар «Как самостоятельно учиться»