Рубрики
Без рубрики

Ключевое слово const не создает неизменных переменных

Введение в ключевое слово const Значение переменной, созданной с константом … Tagged с JavaScript, React.

Введение в ключевое слово const

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

Для объектов и массивов только эта ссылка на местоположение памяти, которое содержит данные, хранится в переменной. Таким образом, данные внизу могут быть изменены без изменения ссылки

Пример:

const foodsILike = ['Shwarma']
foodsILike.push('Jalebi')
console.log(foodsILike) // => ["Shwarma", "Jalebi"]

В этом примере мы создали массив с const ключевое слово и все еще смог добавить к нему элементы

Что такое неизменность и почему это важно?

Методы функционального программирования и шаблоны дизайна очень распространены в мире JavaScript. У нас есть такие инструменты, как RXJS, которые приносят реактивность в JavaScript. Redux также зависит от его состояния, чтобы быть неизменным. Как разработчик JS, вы должны позаботиться о том, чтобы не мутировали состояние напрямую при обновлении. В Redux, Наши редукторы никогда разрешено мутировать исходные/текущие значения состояния! .

Чтобы предотвратить возникновение подобных проблем, вы хотите сделать свои данные неизменными.

Использование метода object.freeze ()

Object.freeze () Метод Замораживает объект (дух!). Что это точно значит? Замороженный объект не может быть отредактирован. Новые свойства не могут быть добавлены, и существующие свойства не могут быть удалены или изменены каким -либо образом.

'use strict'
const obj = {
  prop: 42,
}

Object.freeze(obj)

obj.prop = 33
// => TypeError: "prop" is read-only
// => will fail silently in non strict mode

Однако есть недостаток такого подхода

'use strict'
const obj = {
  prop: 42,
  propObject: {
    name: null,
  },
}

Object.freeze(obj)

obj['propObject']['name'] = 'Burhan'

console.log(obj)

/**
{
  prop: 42,
  propObject: {
    name: "Burhan"
  }
}
*/

Это работает совершенно хорошо, так как мы не изменяем никаких свойств замороженного объекта напрямую.

Вы можете использовать Глубокая замерза Пакет, который рекурсивно замораживает все ваши объекты

var deepFreeze = require('deep-freeze')

deepFreeze(Buffer)
Buffer.x = 5
console.log(Buffer.x === undefined)

Buffer.prototype.z = 3
console.log(Buffer.prototype.z === undefined)

/**
true
true
*/

Это поможет вам предотвратить проблемы с мутациями

Вывод

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

Если вы планируете использовать неизменные объекты с React или Redux, ознакомьтесь с Immerjs . Это позволяет вам создавать новые объекты без написания дополнительного кода для глубоких клонов. У него также есть несколько отличных подвижных крючков для использования с React

Оригинал: “https://dev.to/burhanuday/the-const-keyword-does-not-create-immutable-variables-2mbo”

Читайте ещё по теме: