Переменные и константы JavaScript

Контейнеры данных JavaScript

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

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

Константы

Константы — это контейнеры, в которых хранятся неизменяемые данные (нельзя изменить) — используйте ключевое слово const. Код ниже объявляет константу theAnswer:

const theAnswer = 42

Обновление констант вызовет ошибку:

const theAnswer = 42 
theAnswer = 12  // Uncaught TypeError: invalid assignment to const 'theAnswer'

Переменные

Переменные — это контейнеры, в которых хранятся данные, которые можно изменить во время выполнения программы (mutable) — используйте ключевое слово let:

let colour = 'blue' 
console.log(colour)  // prints: blue 
colour = 'red' 
console.log(colour)  // prints: red

«Устаревшие» переменные

Ключевое слово var также можно использовать для объявления переменной в JavaScript — на самом деле это был «оригинальный» и единственный способ сделать это некоторое время:

var colour = 'blue'

Использование var не рекомендуется из-за непредсказуемого побочного эффекта — читайте дальше…

let vs var

Для объявления переменных можно использовать ключевые слова var и let. Основное различие между ними заключается в области действия переменной: var – это область действия функции, тогда как let – это блокировка. ограничено.

Если вы объявляете переменную с помощью var внутри функции, она будет доступна в любом месте внутри этой функции, но если вы объявляете переменную с помощью let внутри блока, она будет доступна только внутри этого блока.

пусть охват

Вот пример, иллюстрирующий разницу:

function sayHello() { 
  if(true) { 
    let name = "John" 
  }
  console.log(`Hello ${name}`)
} 

sayHello()  // prints: Hello

Вывод ниже будет «Hello», поскольку переменная name не будет существовать вне блока if.

Вот еще один:

function sayHello() { 
  let name = "John" 
  console.log(`Hello ${name}`)
  if(true) { 
    let name = "Paul" 
    console.log(`Hi ${name}`)
  } 
  console.log(`Hello again ${name}`)
} 

sayHello()

Мы объявляем переменную name внутри функции и присваиваем ей значение John. Затем мы объявляем другую переменную с тем же именем, name, внутри блока if и присваиваем ей значение Paul. Вывод будет:

"Hello John" 
"Hi Paul" 
"Hello again John"

Обратите внимание, что третье сообщение включает значение первой переменной name.

переменная область видимости

Вот тот же фрагмент кода, но с использованием var s:

function sayHello() { 
  var name = "John" 
  console.log(`Hello ${name}`)
  if(true) { 
    var name = "Paul" 
    console.log(`Hi ${name}`) 
  } 
  console.log(`Hello again ${name}`) 
} 

sayHello()

Вывод будет немного другим — обратите внимание, что 3-е сообщение включает Paul, а не John:

"Hello John" 
"Hi Paul" 
"Hello again Paul"

На самом деле приведенный выше фрагмент кода создает только одну переменную name. Второе объявление игнорируется, и содержимое name будет изменено на Paul.

NB: Такое поведение можно предотвратить, если использовать режим strict — подробнее о строгом режиме читайте здесь.

Первоначально опубликовано на https://www.90-10.dev 9 января 2023 г.