Javascript var: Устаревшее ключевое слово «var»

Содержание

Переменные const, let и var — JavaScript — Дока

Кратко

Секция статьи «Кратко»

Переменные в JavaScript хранят значения, которыми оперирует код. Для создания переменных используются ключевые слова var, let и const.

🤖

Использование var оправданно, если нужно писать код для старых браузеров времён IE 11 или Opera mini. Во всех остальных случаях лучше использовать let и const, так как они не позволят допустить ошибки, приводящие к неправильным значениям в переменных или изменениям глобальных переменных.

Что такое переменные

Секция статьи «Что такое переменные»

Переменные — это именованные контейнеры для хранения данных.

Для создания переменной используется ключевое слово let, const или var. Сразу за ключевым словом идёт название переменной либо перечень переменных через запятую. Создание переменной также называют объявлением переменной. Например:

var singleVariablelet firstVariable, secondVariable, thirdVariable
          var singleVariable
let firstVariable, secondVariable, thirdVariable

Чаще всего, при объявлении переменной ей устанавливают стартовое значение при помощи оператора присваивания =. Тип значения может быть абсолютно любым — строка, число, объект, массив и так далее.

// Объявление переменной и присваиваниеlet string = 'foo'const array = ['foo', 'bar', 'baz']var number = 10// Множественное объявление и присваиваниеlet firstNumber = 5,  secondNumber = 10
           // Объявление переменной и присваивание
let string = 'foo'
const array = ['foo', 'bar', 'baz']
var number = 10
// Множественное объявление и присваивание
let firstNumber = 5,
  secondNumber = 10

Затем переменную можно использовать как заменитель значения в коде:

let name = 'Уолтер'let surname = 'Вайт'let fullName = name + ' ' + surnameconsole.log(fullName)// Уолтер Вайт
          let name = 'Уолтер'
let surname = 'Вайт'
let fullName = name + ' ' + surname
console. log(fullName)
// Уолтер Вайт

Правила именования переменных

Секция статьи «Правила именования переменных»

Для имени переменной можно использовать следующие символы:

буквы латинского алфавита;
цифры;
символы $ и _.

Первый символ не должен быть цифрой:

let letters, &ampersand, _underscorelet 1number// SyntaxError: Invalid or unexpected token
          let letters, &ampersand, _underscore
let 1number
// SyntaxError: Invalid or unexpected token

В качестве названий переменных нельзя использовать зарезервированные языком слова. Например: class, super, throw, yield, var, let, const и так далее. С полным списком таких слов можно ознакомиться здесь.

Создание переменных

Секция статьи «Создание переменных»

Перед выполнением скрипта JavaScript находит код создания переменных и заранее создаёт их.

Получается, что в начале выполнения скрипта все переменные, описанные в коде, уже объявлены. В зависимости от браузера, они могут быть равны undefined (в Chrome и Safari), либо, в случае с let и const в браузере Firefox, не равны ничему и иметь специальное состояние uninitialized:

console.log('Старт')var byVar = 5let byLet = 10const byConst = 15console.log('Конец')
          console.log('Старт')
var byVar = 5
let byLet = 10
const byConst = 15
console.log('Конец')

Код ещё не начал выполняться, а переменные уже объявлены.

В конце скрипта, после того как произошло присвоение стартовых значений, переменные равны 5, 10 и 15:

JavaScript выполнил код объявления переменных и установил значения.

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

Переменные

let и const Секция статьи «Переменные let и const»

Переменные let и const появились в версии EcmaScript 2015 года (ES6), пришли на смену устаревшему var.

Объявление

Секция статьи «Объявление»

Используя ключевое слово let, можно объявить переменную без присвоения ей начального значения. В таком случае она будет равна undefined

let aconsole.log(a)// undefineda = 5console.log(a)// 5
          let a
console.log(a)
// undefined
a = 5
console.log(a)
// 5

При помощи const нельзя объявлять переменные без значения:

const a// SyntaxError: Missing initializer in const declaration// Правильноconst b = 5
          const a
// SyntaxError: Missing initializer in const declaration
// Правильно
const b = 5

К переменным let и const нельзя обращаться до их объявления в коде:

console.log(a)// ReferenceError: Cannot access 'a' before initializationconsole.log(b)// ReferenceError: Cannot access 'b' before initializationlet a = 5const a = 5
          console.log(a)
// ReferenceError: Cannot access 'a' before initialization
console.  log(b)
// ReferenceError: Cannot access 'b' before initialization
let a = 5
const a = 5

Почему так?

У let и const есть так называемая temporal dead zone (TDZ) — момент выполнения скрипта до объявления переменной. Переменная может находиться и выше объявления, при условии, что содержащая её часть кода будет выполнена после инициализации:

function foo() {  console.log('from foo', a)}Promise.resolve()  .then(() => console.log('from promise', a))setTimeout(() => console.log('from timer',a))let a = 10foo()// 'from foo 10', 'from promise 10', 'from timer 10'
           function foo() {
  console.log('from foo', a)
}
Promise.resolve()
  .then(() => console.log('from promise', a))
setTimeout(() => console.log('from timer',a))
let a = 10
foo()
// 'from foo 10', 'from promise 10', 'from timer 10'

TDZ есть также и у ES6-классов, несмотря на то, что они являются «синтаксическим сахаром» над обычными функциями.

console.log(Foo)class Foo {  constructor(bar) {    this.bar = bar  }}// ReferenceError: Cannot access 'Foo' before initialization
           console.log(Foo)
class Foo {
  constructor(bar) {
    this.bar = bar
  }
}
// ReferenceError: Cannot access 'Foo' before initialization

А функции (объявленные как Function Declaration) TDZ не имеют.

console.log(Foo)function Foo() {  this.bar = bar}// ƒ Foo() { this.bar = bar}
          console.log(Foo)
function Foo() {
  this.bar = bar
}
// ƒ Foo() { this.bar = bar}

Оба типа переменных имеют блочную область видимости и не становятся частью глобального объекта (window в браузере, global в Node.js). Блочная область видимости не даёт получить значение переменной вне блока, где она была объявлена.

Если объявить переменные внутри блока if, то обращение к ним вне блока будет выбрасывать ошибку:

if (true) {  let a = 5  const b = 10  console. log(a)  // 5  console.log(b)  // 10}console.log(a)// ReferenceError: a is not definedconsole.log(b)// ReferenceError: b is not defined
          if (true) {
  let a = 5
  const b = 10
  console.log(a)
  // 5
  console.log(b)
  // 10
}
console.log(a)
// ReferenceError: a is not defined
console.log(b)
// ReferenceError: b is not defined

Одинаковые имена переменных

Секция статьи «Одинаковые имена переменных»

Объявление переменной с именем, которое уже используется в текущей области видимости, приведёт к ошибке:

let a = 5let a = 10// SyntaxError: Identifier 'a' has already been declared
          let a = 5
let a = 10
// SyntaxError: Identifier 'a' has already been declared

То же правило работает и при использовании const, и при использовании смешанного подхода:

const a = 5const a = 10// SyntaxError: Identifier 'a' has already been declaredvar b = 5const b = 10// SyntaxError: Identifier 'b' has already been declared
          const a = 5
const a = 10
// SyntaxError: Identifier 'a' has already been declared
var b = 5
const b = 10
// SyntaxError: Identifier 'b' has already been declared

В то же время можно объявлять переменные с одинаковым именем в разных областях видимости.

В этом случае значение будет зависеть от той области видимости, где происходит чтение:

let name = 'Ольга'if (true) {  let name = 'Елена'  console.log(name)  // Елена}console.log(name)// Ольга
          let name = 'Ольга'
if (true) {
  let name = 'Елена'
  console.log(name)
  // Елена
}
console.log(name)
// Ольга

Смена значения в

let и const Секция статьи «Смена значения в let и const»

Значение в переменной, созданной через let, можно изменять:

let a = 5console.log(5)// 5a = 10console.log(a)// 10
          let a = 5
console.log(5)
// 5
a = 10
console.log(a)
// 10

Стартовое значение const изменить нельзя, будь то примитивное значение:

const a = 5a = 10// TypeError: Assignment to constant variable
          const a = 5
a = 10
// TypeError: Assignment to constant variable

Или ссылка на объект:

const obj = {  a: 5,}obj = {  a: 10,}// TypeError: Assignment to constant variable
          const obj = {
  a: 5,
}
obj = {
  a: 10,
}
// TypeError: Assignment to constant variable

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

const obj = {  a: 5,}obj.a = 10console.log(obj)// { a: 10 }
          const obj = {
  a: 5,
}
obj.a = 10
console.log(obj)
// { a: 10 }

Переменные

var Секция статьи «Переменные var»

Объявление переменных при помощи ключевого слова var было в JavaScript с первых версий.

Объявление

Секция статьи «Объявление»

Переменные var можно объявлять без присвоения им значения, в таком случае они будут равны undefined:

var aconsole.log(a)// undefinedvar b = 5console.log(b)// 5
          var a
console.log(a)
// undefined
var b = 5
console.log(b)
// 5

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

if (true) {  var a = 5}function foo() {  var b = 10}console. log(a)// 5console.log(b)// ReferenceError: b is not defined
          if (true) {
  var a = 5
}
function foo() {
  var b = 10
}
console.log(a)
// 5
console.log(b)
// ReferenceError: b is not defined

Объявление переменных вне функций делает их глобальными переменными. Они доступны как свойства глобального объекта:

var varVariable = 5console.log(window.varVariable)// 5
          var varVariable = 5
console.log(window.varVariable)
// 5

К переменным, объявленным при помощи ключевого слова var, можно обращаться до момента объявления. В отличие от let и const, ошибки это не вызовет. Такое поведение называется hoisting — «всплытие»:

console.log(a)// undefinedvar a = 5console.log(a)// 5
          console.log(a)
// undefined
var a = 5
console.log(a)
// 5

Разберём, как работает функциональная область видимости:

var a = 5function foo() {  console.log(a)  // undefined  var a = 10  console. log(a)  // 10}foo()console.log(a)// 5
          var a = 5
function foo() {
  console.log(a)
  // undefined
  var a = 10
  console.log(a)
  // 10
}
foo()
console.log(a)
// 5

Перед выполнением функции в глобальной области видимости присутствует переменная a, равная 5:

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

Во время выполнения функции формируется новая функциональная область видимости, в которой тоже присутствует переменная a. Эта переменная была объявлена с помощью var внутри функции, в момент выполнения которой она «всплыла» со значением равным undefined. В строке 4 происходит обращение именно к ней (до её объявления), а не к той, что находится вне функции.

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

В строке 8 значение переменной a уже равно 10.

В конце выполнения функции локальной переменной установлено значение, и чтение происходит из неё.

После выполнения функции локальная область видимости была удалена. В консоли выводится глобальная переменная a.

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

Более подробно об этом можно прочитать в отдельной статье

Смена значения в

var Секция статьи «Смена значения в var»

Значение, хранящееся в переменной var, можно изменить двумя способами:

обратиться к имени переменной и присвоить новое значение:

var a = 5console.log(a)// 5a = 10console.log(a)// 10
          var a = 5
console.log(a)
// 5
a = 10
console.log(a)
// 10

обратиться к имени переменной вместе с ключевым словом var:

var a = 5console.log(a)// 5var a = 10console.log(a)// 10
          var a = 5
console.log(a)
// 5
var a = 10
console.log(a)
// 10

На практике

Секция статьи «На практике»

Сергей Фомин советует

Секция статьи «Сергей Фомин советует»

🛠 В новом коде используйте только let или const. Используйте let в тех случаях, когда значение переменной меняется. Во всех остальных используйте const. Проще всего всегда по умолчанию использовать ключевое слово const и исправлять объявление переменной на let, если появляется нужда изменить её значение далее в коде.

🛠 Называйте переменные так, чтобы можно было легко понять, что в них хранится. Например:

let url = 'https://doka.guide'const now = Date.now()const user = {  name: 'John',  age: 30,}
          let url = 'https://doka.guide'
const now = Date.now()
const user = {
  name: 'John',
  age: 30,
}

Исключением считается именование счётчиков в циклах for, в которых обычно используются одиночные буквы i, j, и так далее.

Имена переменных могут состоять из нескольких слов, поэтому для удобства их чтения в JavaScript принято использовать так называемую «верблюжью нотацию» (camelCase), когда каждое новое слово, начиная со второго, пишется с заглавной буквы:

const fullName = 'John Doe'const arrayOfNumbers = [1, 2, 3]
          const fullName = 'John Doe'
const arrayOfNumbers = [1, 2, 3]

Имена констант (переменные, которые не меняют своё значение) принято писать, используя screaming_snake_case. В данной нотации все слова пишутся заглавными буквами, а разделителем является символ _.

const BASE_URL = 'https://doka.guide'const PORT = 3000const UNAUTHORIZED_CODE = 401
          const BASE_URL = 'https://doka.guide'
const PORT = 3000
const UNAUTHORIZED_CODE = 401

Let JS – что это? Разница между var, const и let в JavaScript?

Рассмотрим операторы var, const и let для работы с переменными в языке JavaScript. Узнаем, в чем разница между ними, и в каком случае какой оператор лучше использовать.

Содержание

Операторы var, let и const – это три инструмента для объявления и инициализации переменных в языке программирования JavaScript. После появления последних двух методов в спецификации ES2015 многие разработчики стали задаваться вопросом, чем различаются доступные варианты, что из них использовать для разработки. Если тоже не понимаете, пришло время разобраться.

Переменные let и var

Var используется для объявления переменной и дальнейшей ее инициализации если есть такая потребность. Используется следующим образом: var varname, где под varname подразумевается наименование. Оно может принимать вид любого разрешенного JS идентификатора. Принято давать короткие названия на английском, по которым можно интуитивно определить назначение конкретного объекта. Это делает скрипт более читаемым, понятным.

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

Основная разница между рассмотренными операторами заключается в следующем: они по-разному работают с областями видимости. Так, созданная за пределами функции var функционирует как глобальная, может быть вызвана в любой точке кода.

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

Следующее различие между рассматриваемыми инструментами – попытка обратиться к заданной через var информации до ее назначения приведет к выдаче ошибки «undefined». Если выполнить аналогичное действие по отношению к let, будет отображена другая ошибка: «ReferenceError». Идентичное сообщение демонстрируется при попытке вызвать константу до ее назначения. Принципиальных различий нет, тем более обе озвученные проблемы не позволяют правильно применять код.

Если столкнулись с ними, проверьте скрипт – возможно, не инициализированы уже вызванные сведения.

Константа в JS

Const в JavaScript создает постоянную, действие которой может носить как глобальный, так и локальный характер в блоке, где она была обнаружена. Это зависит от того, где именно произошел вызов. Важная особенность постоянной: ее нельзя переписать как объект. При этом помните: изменить свойства объекта, заданного таким способом, возможно.

Необходимость использования

Три метода могут применяться одинаково широко, особенно, если программист хорошо понимает тему областей видимости при программировании на JavaScript. Напоминаем, бывает всего две вариации:

Глобальная. Распространяется на всю функцию.
Локальная. Действует в конкретном контейнере и его подкатегориях.

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

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

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

Теперь знаете, что такое let JS, какие различия с другими инструментами для работы с данными есть. Не стоит слепо следовать рекомендациям тех или иных людей. Полагайтесь преимущественно на собственный опыт, чтобы понять, какие методы программирования лучше.

JavaScript var Заявление

❮ Предыдущий Операторы JavaScript Далее ❯

Пример

Создайте переменную с именем carName и присвойте ей значение «Volvo»:

var carName = «Volvo»;

Попробуйте сами »

Другие примеры ниже.

Определение и использование

Оператор var объявляет переменную.

Переменные — это контейнеры для хранения информации.

Создание переменной в JavaScript называется «объявлением» переменной:

переменная carName;

После объявления переменная пуста (не имеет значения).

Чтобы присвоить значение переменной, используйте знак равенства:

carName = «Volvo»;

Вы также можете присвоить значение переменной при ее объявлении:

var carName = «Volvo»;

Примечание

Переменная, объявленная без значения, имеет значение undefined .

См. также:

Ссылка на JavaScript: JavaScript let

JavaScript Reference: JavaScript const

Tutorials

JavaScript Tutorial: JavaScript Variables

JavaScript Tutorial: JavaScript Let

JavaScript Tutorial: JavaScript Const

JavaScript Tutorial: JavaScript Scope

Syntax

var name = value ;

Параметры

Параметр	Описание
имя	Обязательно. Имя переменной. Имена переменных должны соответствовать следующим правилам: Должны начинаться с буквы, $ или _ Имена чувствительны к регистру (y и Y разные) Зарезервированные слова JavaScript нельзя использовать в качестве имен
значение	Дополнительно. Значение, которое необходимо присвоить переменной.

Примечание

ECMAScript6 (ES6/JavaScript 2015) рекомендует объявлять переменные с пусть не вар .

Дополнительные примеры

Используйте var , чтобы присвоить 5 x и 6 y, и отобразить x + y:

var x = 5;
переменная у = 6;
document.getElementById(«демо»).innerHTML = x + y;

Попробуйте сами »

Используйте let , чтобы присвоить 5 x и 6 y, и отобразить x + y:

let x = 5;
пусть у = 6;
document.getElementById(«демо»).innerHTML = x + y;

Попробуйте сами »

Объявите множество переменных в одном выражении.

Начните оператор с var и разделите переменные запятой :

var lastName = «Doe»,
age = 30,
job = «плотник»;

Попробуйте сами »

Объявите множество переменных в одном выражении.

Начните оператор с let и разделите переменные запятой :

let lastName = «Doe»,
age = 30,
job = «плотник»;

Попробуйте сами »

Использование var в цикле:

let text = «»;
for (var i = 0; i < 5; i++) {
text += i + «
«;
}

Попробуйте сами »

Использование let в цикле:

let text = «»;
for (пусть i = 0; i < 5; i++) {
text += i + «
«;
}

Попробуйте сами »

Поддержка браузера

var — это функция ECMAScript1 (ES1).

ES1 (JavaScript 1997) полностью поддерживается во всех браузерах:


Хром	ИЭ	Край	Фаерфокс	Сафари	Опера
Да	Да	Да	Да	Да	Да

❮ Предыдущий Операторы JavaScript Следующий ❯

НОВИНКА

Мы только что запустили
Видео W3Schools

Узнать

ВЫБОР ЦВЕТА

КОД ИГРЫ

Играть в игру

2 Top3 Examples

Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

ФОРУМ | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

3 причины использовать var в JavaScript

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

Никогда не бойся. У меня есть 3 причины, по которым вы должны использовать var в своем следующем проекте JavaScript.

Вы любите традиции и отвергаете все новое

Var может быть самым старым ключевым словом для объявления переменной, но на сегодняшний день оно единственное. Его младшие родственники, let и const , вырвались на сцену с ES6 (более 6 лет назад на момент написания этой статьи!). Но если вам нравится придерживаться старых норм, чреватых опасностями, продолжайте использовать var и оставьте эти ключевые слова-выскочки, чтобы слушать их ужасную поп-музыку и жаловаться на своих родителей.

Вы предпочитаете изменчивость, даже если не

Var имеет неприятную особенность создания переменной любого типа, которую затем можно изменить на переменную любого типа позже. Правильно, число, которое вы объявили в строке 4, стало строкой в строке 17 и логическим значением в строке 109. Такая гибкость типов является ключевой особенностью JavaScript, но ее можно избежать. Но если вам тоже нравится жить опасно, продолжайте использовать var.

Вам нравятся дырявые прицелы

До ES6 переменные JavaScript всегда определялись в области видимости функции. Во многих случаях это означало, что переменные были глобальными . JavaScript не применял области действия на уровне блоков, например внутри цикла for или блока if . Таким образом, переменная, объявленная с var , будет поднята на вершину своей области действия. Другими словами, объявление переменной переместилось наверх текущего лексического окружения со значением undefined . Общая проблема, возникающая при подъеме, заключается в том, что такие переменные доступны за пределами области блока, где разработчик может не ожидать их.

Здесь также может произойти более тонкая и трудная для обнаружения ошибка, переменное затенение. Редко это может быть желательным. Если это вы, то var — ваш герой.

Должен быть лучший способ

Если вы зашли так далеко, вы, вероятно, в нескольких секундах от яростного комментария о том, как я ошибаюсь насчет вар . Правда в том, что никто не должен использовать var в каком-либо коде JavaScript, за исключением урока истории.

Переменные const, let и var — JavaScript — Дока

Кратко

Что такое переменные

Правила именования переменных

Создание переменных

Переменные

Объявление

Одинаковые имена переменных

Смена значения в

Переменные

Объявление

Смена значения в

На практике

Сергей Фомин советует

Let JS – что это? Разница между var, const и let в JavaScript?

Переменные let и var

Константа в JS

Необходимость использования

JavaScript var Заявление

Пример

Определение и использование

Примечание

См. также:

Tutorials

Syntax

Параметры

Примечание

Дополнительные примеры

Поддержка браузера

ВЫБОР ЦВЕТА

КОД ИГРЫ

Top Tutorials

2 Top3 Examples

3 причины использовать var в JavaScript

Вы любите традиции и отвергаете все новое

Вы предпочитаете изменчивость, даже если не

Вам нравятся дырявые прицелы

Должен быть лучший способ

Добавить комментарий Отменить ответ

Рубрики

Рубрики