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

Ссылки JS: Массивы

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

typeof []; // 'object'

В чём разница между ссылочными и примитивными типами данных и почему об этом нужно знать?

С точки зрения прикладного программиста, разница проявляется при изменении данных, их передаче и возврате из функций. Мы уже знаем, что массив можно менять, даже если он записан в константу. Здесь как раз и проявляется ссылочная природа. Константа хранит ссылку на массив, а не сам массив, и эта ссылка не меняется. А вот массив поменяться может. С примитивными типами такой трюк не пройдёт.

Другой способ убедиться в том, что массивы являются ссылками – создать несколько констант, содержащих один массив, и посмотреть, как они меняются:

const items = [1, 2];
// Ссылаются на один и тот же массив
const items2 = items;
items2.push(3);

console.log(items2); // => [1, 2, 3]
console.log(items); // => [1, 2, 3]
items2 === items; // true

Сравнение массивов тоже происходит по ссылке. Это может быть очень неожиданно с непривычки. Одинаковые по структуре массивы имеют разные ссылки и не равны друг другу:

[1,2,3] === [1,2,3]; // false

Более того, если передать массив в какую-то функцию, которая его изменяет, то массив тоже изменится. Ведь в функцию передается именно ссылка на массив. Посмотрите на пример:

const f = (coll) => coll.push('wow');

const items = ['one'];
f(items);
console.log(items); // => ['one', 'wow']
f(items);
console.log(items); // => ['one', 'wow', 'wow']

Проектирование функций

Проектируя функции, работающие с массивами, есть два пути: менять исходный массив или формировать внутри новый и возвращать его наружу. Какой лучше? В подавляющем большинстве стоит предпочитать второй. Это безопасно. Функции, возвращающие новые значения, удобнее в работе, а поведение программы становится в целом более предсказуемым, так как отсутствуют неконтролируемые изменения данных.

Изменение массива может повлечь за собой неожиданные эффекты. Представьте себе функцию last(), которая извлекает последний элемент из массива. Она могла бы быть написана так:

// Метод .pop извлекает последний элемент из массива
// Он изменяет массив, удаляя оттуда этот элемент
const last = (coll) => coll.pop();

Где-то в коде, вы просто хотели посмотреть последний элемент. А в дополнение к этому, функция для извлечения этого элемента, взяла и удалила его оттуда. Это поведение очень неожиданно для подобной функции. Оно противоречит большому количеству принципов построения хорошего кода (например cqs, этот принцип рассматривается в курсе по функциям). Правильная реализация данной функции выглядит так:

const last = (coll) => coll[coll.length - 1];

В каких же случаях стоит менять сам массив? Есть ровно одна причина по которой так делают – производительность. Именно поэтому некоторые встроенные методы массивов меняют их, например reverse() или sort():

const items = [3, 8, 1];

// Нет присвоения результата, массив изменяется напрямую
items.sort();
console.log(items); // => [1, 3, 8]

items.reverse();
console.log(items); // => [8, 3, 1]

https://repl.it/@hexlet/js-arrays-references-sort

Обычно в документации каждой функции отдельно подчёркивают, изменяет ли она исходный массив или возвращает результатом новый массив, не модифицируя исходный. Например, метод concat(), в отличие от sort(), возвращает новый массив, о чём написано в документации.

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


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

  1. Продуманная оптимизация

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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