Почему вы не должны переназначать значения в JavaScript

В JavaScript вы можете переназначить значения на переменные, которые вы объявили с помощью пусть или вар .

Я много переназначал значения. Но когда я стал лучше с JavaScript, я понял, что вы не должны переназначать значения, если можете. Это потому что:

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

Вы можете изменить внешнее состояние случайно, когда переназначает значения

Когда вы назначаете новое значение переменной, вы записываете имя переменной, за которым следует = , затем ваша новая стоимость.

// Declaring a variable
let name = 'Zell'

// Reassigning a variable
name = 'Vincy'

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

Допустим, у вас есть переменная, называемая имя В глобальном контексте.

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

let name = 'Zell'

function sayName (arg) {
  name = arg
  console.log(name)
}

Когда вы звоните SayName , вы меняете значение название навсегда. Это изменило состояние за пределами функции.

sayName('Vincy') // Vincy
console.log(name) // Vincy

Теперь вы можете подумать, что этот пример звучит глупо, и вы никогда не напишете такой глупый код.

Вопрос в том, можете ли вы гарантировать, что никогда не совершите эту ошибку, даже если вы находитесь в гуще вещей?

Я не могу.

Сделайте привычку не переназначить переменные.

Я рекомендую всегда создавать переменные с констант ключевое слово. Это потому, что переменные, созданные с const Ключевое слово не может быть переназначено. Вы получите ошибку, если попытаетесь присвоить им новое значение.

const name = 'Zell'

function sayName (arg) {
  name = arg
  console.log(name)
}

sayName('Vincy') // TypeError: invalid assignment to const `name'

Вы создаете сложный код, когда переназначает значения

Представьте себе коллегу из ваших изменений прически каждый день. Она приходит в офис с:

1. Удар в понедельник
2. Косы во вторник
3. Короткие волосы в среду
4. Длинные волосы в четверг
5. Ярко -розовые волосы в пятницу

Вам будет трудно узнать ее.

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

Давайте проведем пример, и вы увидите, как это работает.

let hair

if (today === 'Monday') {
  hair = 'bangs'
} else {
  hair = 'something else'
}

Здесь ваш мозг уходит:

1. Есть переменная, называемая волосы Анкет
2. Значение волосы собирается измениться позже. Я сейчас не знаю его ценности. (Это неудобно).
3. Потом…
4. Сегодня это понедельник.
5. Волосы будут ударить

Теперь сравните этот мыслительный процесс с тем, где вы используете тройные операторы.

const hair = today === 'Monday'
  ? 'bangs'
  : 'something else'

Здесь ваш мозг уходит:

1. Есть переменная, называемая волосами.
2. Сегодня это понедельник.
3. Волосы будут Удар Анкет

Там нет моментов «подождать и увидеть» с кодом тройного оператора. Ваш мозг делает меньшую работу, поскольку не нужно «ждать и увидеть».

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

Работа со многими филиалами

Тернарные операторы работают, только если у вас есть простые Если/else заявления. Что если вам нужно больше ветвей?

let hair

if (today === 'Monday') {
  hair = 'bangs'
} else if (today === 'Tuesday') {
  hair = 'braids'
} else if (today === 'Wednesday') {
  hair = 'short hair'
} else if (today === 'Thursday') {
  hair = 'long hair'
} else if (today === 'Friday') {
  hair = 'bright pink hair'
}

Лучший способ справиться со многими Если/else операторы (или даже оператор переключения ) содержит Если/else логика в функции.

Вот начало (где мы просто обертываем функцию вокруг вышеуказанного кода):

function getHairType (today) {
  let hair

  if (today === 'Monday') {
    hair = 'bangs'
  } else if (today === 'Tuesday') {
    hair = 'braids'
  } else if (today === 'Wednesday') {
    hair = 'short hair'
  } else if (today === 'Thursday') {
    hair = 'long hair'
  } else if (today === 'Friday') {
    hair = 'bright pink hair'
  }

  return hair
}

Когда вы звоните gethairtype Вам не волнует, как это работает. Все, что вас волнует, это то, что вы получите от gethairtype Анкет Это облегчает вам понять, как выполняется ваш код.

// Using the function
const hair = getHairType('Wednesday') // short hair

Следующим шагом будет улучшение gethairtype Анкет Здесь вы можете использовать Раннее возвращение Анкет

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

function getHairType (today) {
  if (today === 'Monday') return 'bangs'
  if (today === 'Tuesday') return 'braids'
  if (today === 'Wednesday') return 'short hair'
  if (today === 'Thursday') return 'long hair'
  if (today === 'Friday') return 'bright pink hair'
}

Гораздо легче читать сейчас, не так ли?

Завершая

Вы хотите избежать переназначения значений в переменные, потому что:

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

Вместо переназначения значений попробуйте использовать тройные операторы и ранние возвраты. Они могут сделать ваш код Terser и легче читать.

Если этот урок помог вам, может понравиться Узнайте JavaScript , где вы узнаете, как строить все, что вы хотите с нуля. Зачисление на изучение JavaScript открывается в июле 2018 года (через три недели!).

Спасибо за чтение. Эта статья была первоначально размещена на Мой блог Анкет Подпишитесь на мой информационный бюллетень Если вы хотите больше статей, чтобы помочь вам стать лучшим разработчиком Frontend.

Оригинал: “https://dev.to/zellwk/why-you-shouldnt-reassign-values-in-javascript-525c”