Это мутация. Это отличная мутация. У меня для тебя новости, Эми. Вы мутант. - Профессор X
Прежде чем я коснусь темы неизменяемости, давайте выясним, что такое мутация.
Мутация
Все, что изменяет / трансформирует поведение или структуру объекта, называется мутацией. Как сила мутации Гоку на картинке выше.
Мутация в JavaScript
Определение может показаться очень похожим на приведенный выше пример. Хотя в JavaScript это выглядит примерно так:
Но почему мутация является проблемой в JavaScript?
Прежде чем я отвечу на этот вопрос, позвольте мне рассказать о нескольких концепциях передачи по значению и передачи по ссылке в JavaScript.
Передача по значению
Рассмотрим следующий пример,
В приведенном выше примере я создаю переменную «a» со значением 5 и присваиваю ее переменной с именем «b». Тогда значение «a», а также «b» будет 5. В этом случае я передал значение «a» в «b».
Теперь предположим, что я изменил значение «a» на 15. При этом мое значение «b» не изменилось, потому что оно изначально передавалось через значение. Этот способ передачи значений переменных в другую переменную можно указать как передачу по значению.
Передача по ссылке
Рассмотрим следующий пример,
В приведенном выше примере я создаю объект и назначаю его переменной «object1». Я создаю другую переменную «object2» и назначаю ей «object1».
Теперь в строке 7 я изменяю свойство name «object1» на «charan». Удивительно, но когда я регистрирую значение «object2», свойство name «object2» также изменилось на «charan». Так что именно здесь произошло? Объекты обычно передаются по ссылке. Поскольку объект2 приравнивается к объекту1, он передается по ссылке, то есть они оба содержат одну и ту же ячейку памяти. Итак, когда мы меняем значение object1, object2 обычно изменяется.
Мы можем найти аналогичную проблему и в случае с массивами. Рассмотрим приведенный ниже пример.
И массивы, и объекты передаются по ссылке.
Как это проблема? Представьте, что вы передаете объект / массив различным функциям и в какой-то момент изменяете его, один и тот же объект / массив может быть изменен в других местах, что приведет к неожиданному поведению в некоторых частях кода, что приведет к ошибкам.
Решение: стать неизменным!
Один из способов добиться неизменности в JavaScript - использовать Object.assign.
В приведенном выше примере мы используем Object.assign для создания переменной «object2». Object.assign обычно принимает три значения: начальное значение, исходный объект и замещающий объект. В нашем случае начальным значением является пустой объект, мы получаем содержимое «object1» и добавляем к нему новый объект {name: ‘charan’}. Если свойство «name» уже существует в объекте object1, оно заменяется существующим значением (в нашем случае «charan») и присваивает ему начальное значение (которое является пустым объектом). Итак, теперь мой объект2 - новый объект. Мутации «object1» не влияют на object2, поскольку теперь оба относятся к разным ячейкам памяти.
Другой способ добиться неизменности в JavaScript - использовать оператор распространения.
Приведенный выше пример делает то же самое, что и Object.assign, но синтаксис выглядит намного чище.
В массивах неизменяемость может быть достигнута с помощью одного и того же оператора распространения.
В приведенном выше примере к переменной newArr добавляется 6. Мутации arr, как и в строке 7, не влияют на переменную newArr. Кроме того, для массивов в JavaScript можно использовать map, filter, reduce, чтобы избежать мутаций, поскольку они возвращают новые массивы при каждом вызове.
Написание неизменяемого кода Javascript - хорошая практика. Я надеюсь, что эта статья даст вам общее представление о том, как переменные хранятся в памяти и как неизменяемость помогает вам писать более качественный код. Отзывы и предложения приветствуются. :)
