Почему неизменяемость так важна в JavaScript?

Почему неизменяемость так важна в JavaScript?

Что не так с изменчивостью или изменением объектов в коде?

Разве это не упрощает жизнь?

Прежде чем мы углубимся в понимание важности неизменяемости, мы должны сначала понять концепцию изменчивости и неизменяемости в разработке программного обеспечения.

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

Думайте о неизменяемости как о «сохранении как», потому что вы знаете, что она возвращает недавно измененный объект, в то время как традиционная мутация на месте будет похожа на «сохранить», означающую обновление оригинала и отказ от более раннего состояния. Структура неизменяемых данных не может быть изменена.

Данные будут исходными, и как только объект будет создан, мы не сможем изменить его состояние в неизменяемом объекте. Рассмотрим концепцию неизменности как человеческое тело, на которое не влияет внешний мир. Состояние душевного спокойствия.

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

Разработчики, которые никогда не работали с концепцией неизменяемости, могут запутаться, когда она присваивает переменной новое значение или переназначает. В JavaScript String и Numbers являются неизменяемыми типами данных.

JavaScript - не лучший язык для неизменной работы с данными. В JavaScript массивы и объекты не являются неизменяемыми. Их значения могут меняться со временем. Оба всегда передаются как ссылка, и подавляющее большинство доступных методов изменяют данные на месте. Вы можете рассмотреть приведенный ниже пример…

 const a = [2, 1, 4, 3];
console.log (а);
// вывод: [2, 1, 4, 3]
const b = a.sort ();
console.log (б);
// вывод: [1, 2, 3, 4]
console.log (а)
// вывод: [1, 2, 3, 4]

Мы присвоили массив переменной «a» и выполняем операцию сортировки. Отсортированный массив присваивается переменной «b», и вы можете видеть, что мы получаем отсортированный массив для обеих переменных после выполнения операции сортировки. Здесь объекты и массивы передаются в качестве ссылки вместо копирования обеих переменных «a» и «b», указывающих на один и тот же массив в памяти, и этот массив был напрямую изменен методом sort.

Многие методы массива - это метод мутатора. copyWithin, fill, pop, push, reverse, shift, sort, splice, unshift - все эти методы допускают изменяемость. map и filter неизменяемы, потому что они создают новый массив без изменения исходного массива. Чтобы сделать объекты и массивы неизменяемыми, вы можете использовать некоторые методы в JavaScript и создавать новые значения без изменения исходного содержимого. Не изменяйте исходное значение объекта напрямую. Считайте этот объект неизменным и возвращайте совершенно новый объект с обновленным значением.

Давайте разберемся с этой концепцией еще на одном примере. У нас есть массив данных, содержащий количество дней, в течение которых один сотрудник работал над некоторым проектом.

 var daysWorked = [7, 7, 5, 9, 8, 6, 6, 7, 9, 5];

console.log (daysWorked);

// op: [7, 7, 5, 9, 8, 6, 6, 7, 9, 5];

давайте проверим последние 6 месяцев работы

var lastSixMonths = daysWorked.slice (0,6);

console.log (lastSixMonths);

// op: [7, 7, 5, 9, 8, 6]

// отсортируем отработанные дни

var sortedDaysWorked = daysWorked.sort ();

console.log (sortedDaysWorked);

// op: [5, 5, 6, 6, 7, 7, 7, 8, 9, 9]

var lastSevenMonths = hoursWorked.slice (0,7);

console.log (lastSevenMonths);

// op: [5, 5, 6, 6, 7, 7], но результат был ожидаемым [7, 7, 5, 9, 8, 6].

В приведенном выше методе мы использовали два метода для переменной daysWorked.

• Slice: В приведенном выше примере мы достигаем неизменности с помощью метода slice. Этот метод разрезает исходный объект, и вместо изменения исходного набора данных мы получаем новую копию объекта lastSixMonths.
• Сортировка: этот метод является изменяемым и сортирует исходный набор данных. Этот метод не позволяет нам производить дальнейшие вычисления с набором данных.

Важность неизменности в JavaScript

Что хорошего в неизменности? Почему нам в первую очередь нужно заботиться о неизменности? Зачем вообще беспокоиться?

Неизменяемость дает более строгий контроль над вашими данными, сразу же делая ваш код более безопасным и предсказуемым. Другими словами, неизменяемые объекты позволяют вам предсказуемо управлять интерфейсом и потоком данных, эффективно обнаруживая изменения. Это также упрощает реализацию сложных функций, таких как отмена / повтор, отладка путешествия во времени, оптимистичные обновления и откат и т. Д.

Если мы говорим о фронтенд-библиотеке React, библиотеке управления состоянием Vue os Redux, то неизменяемость также может помочь в достижении лучшей производительности, обеспечивая быстрое и дешевое сравнение между версиями состояния до и после изменений. Компоненты могут воспользоваться этим и разумно преобразовать себя только при необходимости. Это может значительно повысить производительность.

Основными преимуществами неизменности являются предсказуемость, производительность и лучшее отслеживание мутаций.

1. Предсказуемость

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

Когда вы сохраняете неизменность архитектуры приложения и простую ментальную модель, становится легче прогнозировать данные в состоянии в любой момент времени, и тогда вы можете быть уверены, что это не вызовет каких-либо неприятных побочных эффектов.

2. Производительность

Создание неизменяемого объекта стоит памяти. Как? Когда вы добавляете значение неизменяемому объекту, вам нужно создать новый объект, и в этом новом объекте вы копируете существующее значение с новым значением, которое требует дополнительной памяти. Чтобы уменьшить потребление памяти, мы используем структурное разделение.

Какое бы обновление мы ни делали, оно возвращает новые значения, но мы разделяем структуры внутри, чтобы уменьшить потребление памяти. Например, если вы добавляете к вектору 100 элементов, он не создает новый вектор длиной 101 элемент. Внутри выделяются лишь несколько небольших объектов.

3. Отслеживание мутаций

Одним из преимуществ неизменности является то, что вы можете оптимизировать свое приложение, используя равенство ссылок и значений. Это позволяет легко определить, изменилось ли что-нибудь. Вы можете рассмотреть пример изменения состояния в компоненте React. shouldComponentUpdate можно использовать для проверки идентичности состояния, сравнивая объект состояния и предотвращая его ненужную визуализацию.

Неизменяемость позволяет отслеживать изменения, происходящие с этими объектами, как цепочку событий. Переменные имеют новые ссылки, которые легко отслеживать по сравнению с существующими переменными. Это помогает в отладке кода и создании параллельного приложения. Кроме того, отладчики событий помогают воспроизводить события DOM с воспроизведением видео, которые работают над отслеживанием мутаций.

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