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. Продуманная оптимизация

<span class="translation_missing" title="translation missing: ru.web.courses.lessons.mentors.mentor_avatars">Mentor Avatars</span>

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

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

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

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

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

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

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

Для полного доступа к курсу нужна профессиональная подписка

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

Получить доступ
115
курсов
892
упражнения
2241
час теории
3196
тестов

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

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

  • 115 курсов, 2000+ часов теории
  • 800 практических заданий в браузере
  • 250 000 студентов

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

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

Логотип компании Альфа Банк
Логотип компании Rambler
Логотип компании Bookmate
Логотип компании Botmother

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

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

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