JavaScript Academy · Урок

Избегание мутаций

Работайте с копиями вместо изменения данных.

«Избегание мутаций» — бесплатный урок JavaScript Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения JavaScript Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс JavaScript Academy содержит 4 уроков всего.

Почему следует избегать изменений

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

const original = [1, 2, 3];
const copy = [...original, 4];
console.log(original); // [1, 2, 3]
console.log(copy);     // [1, 2, 3, 4]

Копирование массивов с помощью spread

Оператор spread ... создаёт поверхностную копию массива, позволяя добавлять элементы, не изменяя исходный массив.

const nums = [1, 2, 3];
const more = [...nums, 4, 5];
console.log(more); // [1, 2, 3, 4, 5]
console.log(nums); // [1, 2, 3]

Копирование объектов с помощью spread

Spread работает и с объектами: он создаёт новый объект с теми же свойствами и добавленными переопределениями.

const user = { name: "Ada", age: 36 };
const older = { ...user, age: 37 };
console.log(older); // { name: "Ada", age: 37 }
console.log(user);  // unchanged

Методы массивов без изменения

Предпочитайте методы, возвращающие новые массивы: map, filter, concat, slice. Избегайте методов, изменяющих массив, например push, splice и сортировки на месте с помощью sort.

const a = [3, 1, 2];
const sorted = [...a].sort((x, y) => x - y);
console.log(sorted); // [1, 2, 3]
console.log(a);      // [3, 1, 2]

Добавление без изменения

Вместо push создайте новый массив с помощью spread или concat.

const list = [1, 2];
const added = [...list, 3]; // not list.push(3)
console.log(added); // [1, 2, 3]

Удаление без изменения

Используйте filter, чтобы получить новый массив без нужного элемента, вместо splice.

const list = [1, 2, 3, 4];
const without3 = list.filter((n) => n !== 3);
console.log(without3); // [1, 2, 4]

Изменение элемента без изменения массива

Чтобы изменить один элемент, примените map к массиву и верните новое значение для подходящего элемента.

const todos = [{ id: 1, done: false }, { id: 2, done: false }];
const updated = todos.map((t) =>
  t.id === 1 ? { ...t, done: true } : t
);
console.log(updated[0].done); // true

Поверхностное и глубокое копирование

Spread копирует только один уровень. Вложенные объекты по-прежнему остаются общими ссылками. Чтобы неизменяемо обновить вложенные данные, используйте spread на каждом изменяемом уровне.

const state = { user: { name: "Ada", age: 36 } };
const next = {
  ...state,
  user: { ...state.user, age: 37 }
};
console.log(state.user.age); // 36
console.log(next.user.age);  // 37

Защита с помощью заморозки

Object.freeze предотвращает случайное изменение объекта во время выполнения, явно обеспечивая неизменяемость (на одном уровне вложенности).

const config = Object.freeze({ env: "prod" });
config.env = "dev";       // ignored in non-strict mode
console.log(config.env);  // "prod"

const — это не неизменяемость

Распространённая ошибка: const запрещает только переназначение переменной, но не изменение содержащегося в ней значения. В массив, объявленный с помощью const, всё ещё можно добавлять элементы.

const arr = [1, 2];
arr.push(3);          // allowed - value mutated
console.log(arr);     // [1, 2, 3]
// arr = [] would throw

Итоги преимуществ

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

const prev = { count: 0 };
const next = { ...prev, count: 1 };
console.log(prev === next); // false - easy to detect change

Быстрая проверка

Избегание изменений.

Итоги

Неизменяемость означает создание новых значений вместо изменения существующих. Используйте spread для копирования массивов и объектов, предпочитайте методы без изменений (map, filter, concat), а для вложенных обновлений применяйте spread на каждом уровне. Помните: const запрещает переназначение, но не изменение; Object.freeze добавляет защиту во время выполнения. Неизменяемые обновления упрощают обнаружение изменений и написание чистого кода.

Часто задаваемые вопросы

Урок «Избегание мутаций» бесплатный?

Да — полный текст урока «Избегание мутаций» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс JavaScript Academy, подпишись на CoddyKit PRO. Курс JavaScript Academy содержит 4 уроков всего.

Чему я научусь в уроке «Избегание мутаций»?

Работайте с копиями вместо изменения данных. Ты практикуешь JavaScript Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать JavaScript Academy?

Предыдущий опыт не требуется. JavaScript Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.

Сколько времени занимает урок «Избегание мутаций»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке JavaScript Academy?

Да. Каждый урок JavaScript Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к JavaScript Academy