Чем отличается let от var javascript

В чём разница между var и let

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

var и let — это просто два способа объявить переменную. Вот так:

var x = 10; let y = 20;

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

function myFunction() < var z = 30; console.log(z); // 30 >myFunction(); console.log(z); // ReferenceError

Это может создавать неожиданные ситуации. Допустим, вы создаёте цикл в функции и хотите, чтобы переменная i осталась в этой функции. Если вы используете var , эта переменная «утечёт» за пределы цикла и будет доступна во всей функции.

Переменные, объявленные с помощью let доступны только в пределах блока кода, в котором они были объявлены.

if (true) < let a = 40; console.log(a); // 40 >console.log(a); // ReferenceError

В JavaScript блок кода — это участок кода, заключённый в фигурные скобки <> . Это может быть цикл, код в условном операторе или что-нибудь ещё.

if (true) < let blockScoped = "Я виден только здесь"; console.log(blockScoped); // "Я виден только здесь" >// здесь переменная blockScoped недоступна console.log(blockScoped); // ReferenceError

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

Поднятие

В JavaScript есть механизм поднятия (hoisting), при котором объявления переменных перемещаются в начало их области видимости при выполнении кода. Это работает по-разному для var и let .

Например, вы выводите значение переменной в консоль, и она вернёт undefined , если инициализация произойдёт позже.

// Как JavaScript видит ваш код var hoistedVar; console.log(hoistedVar); // undefined hoistedVar = "Теперь я определен!";

С let такого не произойдёт; любая попытка обратиться к переменной до её объявления вызовет ошибку.

// Этот код вызовет ошибку console.log(hoistedLet); // ReferenceError let hoistedLet = "Теперь я определен!";

Когда использовать var и let

Когда выбрать var

Когда нужна переменная с функциональной областью видимости или глобальная переменная (хотя это не очень хорошая практика).
Когда работаете с устаревшим кодом, где уже используется var .

Когда выбрать let

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

В современной разработке и новых проектах разработчики предпочитают let и const из-за их предсказуемости и надёжности.

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Читать дальше

ChatGPT не справляется

Притворитесь нейросетью и решите 101 задачку по JavaScript как можно быстрее.

2 ноября 2023

Знакомство с JavaScript

Теперь, когда вы знаете, как создать структуру веб-страницы с помощью HTML и оформить ее стилями с помощью CSS, пришло время оживить её с помощью JavaScript (JS). JavaScript — это мощный язык программирования, который используется для создания интерактивных и динамических веб-сайтов.

Что такое JavaScript?

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

Подключение JavaScript к веб-странице

Вы можете добавить JavaScript в ваш HTML-документ двумя способами:

Встроенный JavaScript: непосредственно в HTML-документ, в тегах :

Внешний JavaScript: подключение внешнего .js файла к HTML-документу:

Основы синтаксиса JavaScript

JavaScript состоит из инструкций, которые выполняются компьютером. Вот пример простого синтаксиса:

var message = "Привет, мир!"; alert(message);

Переменные

Переменные в JavaScript — это контейнеры для хранения данных. Вы можете думать о них как о ящиках, на которых есть имена. Переменные объявляются с помощью ключевых слов var , let и const .

var name = "Алиса"; // Старый способ объявления переменной let age = 25; // Современный способ объявления переменной const pi = 3.14; // Константа, значение которой нельзя изменить

Функции

Функции — это блоки кода, предназначенные для выполнения конкретной задачи. Они могут принимать параметры и возвращать значение.

function sayHello(name) < alert("Привет, " + name); >sayHello("Мир");

События

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

document.getElementById("myButton").onclick = function() < alert("Кнопка была нажата!"); >;

Условия и циклы

JavaScript также поддерживает условные операторы и циклы для управления потоком выполнения кода.

if (age > 18) < alert("Вы совершеннолетний!"); >else < alert("Вы ещё не совершеннолетний!"); >for (let i = 0; i

Объекты и массивы

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

let person = < name: "Джон", age: 30 >; let numbers = [1, 2, 3, 4, 5];

Отметим, что JavaScript не просто добавляет интерактивность к вашим веб-страницам, он также вносит логику и динамичность в ваш сайт. И вот почему это возможно.

Объекты Document Object Model (DOM)

DOM (объектная модель документа) — описывает структуру документа и позволяет программам изменять структуру, стиль и содержание веб-страниц. JavaScript может использовать DOM для манипуляции элементами и атрибутами.

document.getElementById("demo").innerHTML = "Привет, DOM!";

Обработка событий

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

document.getElementById("myButton").addEventListener("click", function() < alert("Кнопка нажата!"); >);

JSON (JavaScript Object Notation)

JSON — это формат обмена данными, легко читаемый как людьми, так и машинами. В JavaScript вы можете легко преобразовывать объекты в JSON и обратно.

let jsonObject = JSON.stringify(< name: "Джон", age: 30 >); let jsObject = JSON.parse(jsonObject);

Асинхронность

JavaScript часто используется для асинхронных операций, таких как загрузка данных из интернета без перезагрузки страницы. Промисы и асинхронные функции ( async/await ) являются современными способами работы с асинхронным кодом.

fetch('https://api.example.com/data') .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error(error));

Замыкания

Замыкания позволяют функции доступ к переменным из области, в которой она была создана, даже после того как эта область перестала существовать. Это мощная концепция в JavaScript для управления приватностью и состоянием.

function createCounter() < let count = 0; return function() < count += 1; return count; >; > const counter = createCounter(); console.log(counter()); // 1 console.log(counter()); // 2

Современный синтаксис ES6+

Современный JavaScript включает множество улучшений синтаксиса и новых возможностей, таких как стрелочные функции, классы, шаблонные строки и деструктуризация.

// Стрелочная функция const greet = name => `Привет, $!`; // Класс class Person < constructor(name) < this.name = name; >sayHello() < return `Привет, $!`; > > // Деструктуризация const < name, age >= < name: "Джон", age: 30 >;

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

В следующих статьях мы углубимся в различные аспекты JavaScript, включая современный синтаксис ES6+, асинхронное программирование и работу с фреймворками, такими как React или Vue.

1 ноября 2023

Событие onclick в JS на примерах

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

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

30 октября 2023

Как перевернуть сайт. Самая короткая инструкция

Не представляем, зачем это может понадобиться, но не могли пройти мимо.

Никакой магии. Мы вызываем JavaScript-функцию rotateBody() , которая применяет свойство transform с значением rotate(180deg) к элементу . Когда вы нажмете на кнопку «Перевернуть», всё, что находится внутри будет повернуто на 180 градусов (то есть, встанет вниз головой)

function rotateBody() < document.body.style.transform = 'rotate(180deg)'; >

Но такой код повернёт страницу только один раз. Если нужно, чтобы она возвращалась обратно при втором клике, усложним код:

let isRotated = false; function rotateBody() < if (isRotated) < document.body.style.transform = 'rotate(0deg)'; document.body.style.direction = "ltr"; >else < document.body.style.transform = 'rotate(180deg)'; document.body.style.direction = "rtl"; >isRotated = !isRotated; >

Надеемся, вы прочитали это описание до того, как нажать на кнопку.

25 октября 2023

Как узнать геолокацию: Geolocation API

Geolocation API позволяет сайтам запрашивать, а пользователям предоставлять свое местоположение веб-приложениям. Геолокация может использоваться для выбора города в интернет-магазине, отображения пользователя на карте или навигации в ближайший гипермаркет.

Основной метод Geolocation API — getCurrentPosition() , но есть и другие методы и свойства, которые могут пригодиться.

16 октября 2023

Что такое localStorage и как им пользоваться

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

До localStorage разработчики часто использовали cookies, но они были не очень удобны: мало места и постоянная передача данных туда-сюда. LocalStorage появился, чтобы сделать процесс более простым и эффективным.

12 октября 2023

Случайное число из диапазона

Допустим, вам зачем-то нужно целое случайное число от min до max . Вот сниппет, который поможет:

function getRandomInRange(min, max)

Math.random () генерирует случайное число между 0 и 1. Например, нам выпало число 0.54 .
(max — min + 1): определяет количество возможных значений в заданном диапазоне. 10 — 0 + 1 = 11 . Это значит, что у нас есть 11 возможных значений (0, 1, 2, . 10).
Math.random () * (max — min + 1): умножает случайное число на количество возможных значений: 0.54 * 11 = 5.94 .
Math.floor (): округляет число вниз до ближайшего целого. Так, Math.floor(5.94) = 5 .
. + min: смещает диапазон так, чтобы минимальное значение соответствовало min . Но в нашем примере, так как min = 0 , это не изменит результат. Пример: 5 + 0 = 5 .
Итак, в нашем примере получилось случайное число 5 из диапазона от 0 до 10.

Чтобы протестировать, запустите:

console.log(getRandomInRange(1, 10)); // Тест

7 сентября 2023

Быстрый гайд по if, else, else if в JavaScript

Допустим, вы собираетесь идти на прогулку. Если на улице солнечно, вы возьмёте с собой солнечные очки.

Это можно описать с помощью оператора if .

let weather = "sunny"; if (weather === "sunny")

А если погода не солнечная, а, скажем, дождливая, вы возьмете зонт.

Этот сценарий можно описать с помощью if-else .

let weather = "rainy"; if (weather === "sunny") < console.log("Возьму солнечные очки"); >else

Условный оператор if-else if-else

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

И всё это очень легко описывается кодом:

let weather = "sunny"; let time = "morning"; if (weather === "rainy") < // если дождь, то только так console.log("Еду на автобусе"); >else if (time === "morning") < // если не дождь и утро console.log("Еду на велике мимо пробок"); >else < // если второе не дождь и не утро console.log("Еду на машине"); >

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

30 августа 2023

Как исправить ошибки SyntaxError в JavaScript

Ошибки SyntaxError появляются, если разработчик нарушил правила синтаксиса JavaScript, например, пропустил закрывающую скобку или точку с запятой. Давайте посмотрим, что означает каждая ошибка и в чём может быть проблема.

Ошибка TypeError: что это и как её исправить

Ошибки TypeError появляются, когда разработчики пытаются выполнить операцию с неправильным типом данных. Давайте разберём несколько примеров: почему появилась ошибка и как её исправить.

Чем отличаются const, var и let в JavaScript?

Как вы наверняка знаете, var, let и const используются для объявления переменных. Ранее мы с вами изучили все три способа и рассмотрели разницу между ними. В этой статье я хотел бы подытожить сказанное, так как об этом очень часто спрашивают новичков на собеседовании.

Итак, ключевые отличия между const, var и let это: возможность отложенного определения значения переменной, возможность переопределения значения, повторное объявление, соблюдение/игнорирование блочной области видимости, hoisting. А теперь подробнее.

Возможность отложенного определения значения переменной

const – значение должно быть определено при объявлении переменной (сразу).

const greeting = 'Hello world!';

var, let – значение может быть определено позже.

var greeting; greeting = 'Hello world!';

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

const – значение у констант не переопределяются.

const greeting = 'Hello world!'; greeting = 'Hello Marry!'; // TypeError: Assignment to constant variable.

var, let – значение может быть переопределено в будущем.

let greeting = 'Hello world!'; greeting = 'Hello Mary!'; // value is 'Hello Mary!' now

Повторное объявление

const, let – не поддерживают повторное объявление.

let greeting = 'Hello world!'; let greeting = 'Hello Karl!'; // SyntaxError: Identifier 'greeting' has already been declared

var – поддерживает повторное объявление. Количество объявлений не ограничено.

var greeting = 'Hello world!'; var greeting = 'Hello Mary!'; // value is 'Hello Mary!' now

Соблюдение/игнорирование блочной области видимости

const, let – соблюдают блочную область видимости.

 < const constVrb = 1; let letVrb = 2; >console.log(constVrb); // ReferenceError: constVrb is not defined console.log(letVrb); // ReferenceError: letVrb is not defined

var – игнорирует блочную область видимости. Переменные, объявленные таким способом будут видны за пределами блока.

 < var varVrb = 2; >console.log(varVrb); // 2

Hoisting

const, let – не поддерживают hoisting.

letVrb = 2; // ReferenceError: Cannot access 'letVrb' before initialization let letVrb;

var – поддерживает hoisting. Объявление переменной поднимается вверх в пределах области видимости во время компиляции кода.

varVrb = 3; var varVrb;

Чем отличается let от var javascript

Директива let объявляет переменную с блочной областью видимости с возможностью инициализировать её значением.

Синтаксис

let var1 [= value1] [, var2 [= value2]] [, . varN [= valueN]];

Параметры

var1 , var2 , …, varN

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

Значение переменной. Любое допустимое выражение.

Описание

Директива let позволяет объявить локальную переменную с областью видимости, ограниченной текущим блоком кода . В отличие от ключевого слова var (en-US) , которое объявляет переменную глобально или локально во всей функции, независимо от области блока.

Объяснение, почему было выбрано название «let» можно найти здесь.

Правила области видимости

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

function varTest()  var x = 1; if (true)  var x = 2; // та же переменная! console.log(x); // 2 > console.log(x); // 2 > function letTest()  let x = 1; if (true)  let x = 2; // другая переменная console.log(x); // 2 > console.log(x); // 1 >

Чище код во вложенных функциях

let иногда делает код чище при использовании вложенных функций.

var list = document.getElementById("list"); for (let i = 1; i  5; i++)  let item = document.createElement("li"); item.appendChild(document.createTextNode("Item " + i)); item.onclick = function (ev)  console.log("Item " + i + " is clicked."); >; list.appendChild(item); > // чтобы получить такой же эффект с использованием 'var' // необходимо создать новый контекст // используя замыкание, чтобы сохранить значение неизменённым for (var i = 1; i  5; i++)  var item = document.createElement("li"); item.appendChild(document.createTextNode("Item " + i)); (function (i)  item.onclick = function (ev)  console.log("Item " + i + " is clicked."); >; >)(i); list.appendChild(item); >

Пример выше будет выполнен как и ожидается, так как пять экземпляров внутренней функции (анонимной) будут ссылаться на пять разных экземпляров переменной i . Пример будет выполнен неверно, если заменить директиву let на var, или удалить переменную i из параметров вложенной функции и использовать внешнюю переменную i во внутренней функции.

На верхнем уровне скриптов и функций let, в отличии от var, не создаёт свойства на глобальном объекте . Например:

var x = "global_x"; let y = "global_y"; console.log(this.x); // 'global_x' console.log(this.y); // undefined

В выводе программы будет отображено слово «global_x» для this.x , но undefined для this.y .

Эмуляция приватных членов

При взаимодействии с конструкторами можно использовать выражение let чтобы открыть доступ к одному или нескольким приватным членам через использование замыканий:

var SomeConstructor;  let privateScope = >; SomeConstructor = function SomeConstructor()  this.someProperty = "foo"; privateScope.hiddenProperty = "bar"; >; SomeConstructor.prototype.showPublic = function ()  console.log(this.someProperty); // foo >; SomeConstructor.prototype.showPrivate = function ()  console.log(privateScope.hiddenProperty); // bar >; > var myInstance = new SomeConstructor(); myInstance.showPublic(); myInstance.showPrivate(); console.log(privateScope.hiddenProperty); // error

Эта техника позволяет получить только «статичное» приватное состояние — в примере выше, все экземпляры полученные из конструктора SomeConstructor будут ссылаться на одну и ту же область видимости privateScope .

Временные мёртвые зоны и ошибки при использовании let

Повторное объявление той же переменной в том же блоке или функции приведёт к выбросу исключения SyntaxError.

if (x)  let foo; let foo; // SyntaxError thrown. >

В стандарте ECMAScript 2015 переменные, объявленные директивой let, переносятся в начало блока. Но если вы сошлётесь в блоке на переменную, до того как она объявлена директивой let, то это приведёт к выбросу исключения ReferenceError (en-US) , потому что переменная находится во «временной мёртвой зоне» с начала блока и до места её объявления. (В отличии от переменной, объявленной через var , которая просто будет содержать значение undefined )

function do_something()  console.log(bar); // undefined console.log(foo); // ReferenceError: foo is not defined var bar = 1; let foo = 2; >

Вы можете столкнуться с ошибкой в операторах блока switch (en-US) , так как он имеет только один подблок.

switch (x)  case 0: let foo; break; case 1: let foo; // Выброс SyntaxError из-за повторного объявления переменной break; >

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

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

var i = 0; for (let i = i; i  10; i++)  console.log(i); >

Правила области видимости

for (let expr1; expr2; expr3) statement;

В этом примере expr2, *expr3, statement *заключены в неявный блок, который содержит блок локальных переменных, объявленных конструкцией let expr1 . Пример приведён выше.

Примеры

let vs var

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

var a = 5; var b = 10; if (a === 5)  let a = 4; // The scope is inside the if-block var b = 1; // The scope is inside the function console.log(a); // 4 console.log(b); // 1 > console.log(a); // 5 console.log(b); // 1

let в циклах

Вы можете использовать ключевое слово let для привязки переменных к локальной области видимости цикла for , вместо того что бы использовать глобальные переменные (объявленные с помощью var ).

for (let i = 0; i  10; i++)  console.log(i); // 0, 1, 2, 3, 4 . 9 > console.log(i); // i is not defined

Нестандартизированные расширения let

let блок

Предупреждение: Поддержка let блоков была убрана в Gecko 44 баг 1023609.

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

Синтаксис

let (var1 [= value1] [, var2 [= value2]] [, . , varN [= valueN]]) block;

Описание

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

Пример

var x = 5; var y = 0; let (x = x+10, y = 12)  console.log(x+y); // 27 > console.log(x + y); // 5

Правила для этого блока кода аналогичны как и для любого другого блока кода в JavaScript. Он может содержать свои локальные переменные, объявленные let .

Правила области видимости

Областью видимости переменных, объявленных директивой let , в блоке let является сам блок и все подблоки в нем, если они не содержат объявлений переменных с теми же именами.

let выражения

Предупреждение: Поддержка let выражений была убрана в Gecko 41 баг 1023609.

let выражение позволяет объявить переменные с областью видимости ограниченной одним выражением.

Синтаксис

let (var1 [= value1] [, var2 [= value2]] [, . varN [= valueN]]) expression;

Пример

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

var a = 5; let(a = 6) console.log(a); // 6 console.log(a); // 5

Правила области видимости

В данном let выражении:

let (decls) expr

* expr *оборачивается в неявный блок.

Спецификации

Specification
ECMAScript Language Specification # sec-let-and-const-declarations

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

BCD tables only load in the browser

Found a content problem with this page?

Edit the page on GitHub.
Report the content issue.
View the source on GitHub.

This page was last modified on 7 авг. 2023 г. by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Product help
Report an issue

Our communities

Developers

Web Technologies
Learn Web Development
MDN Plus
Hacks Blog

Website Privacy Notice
Cookies
Legal
Community Participation Guidelines

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

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

Чем отличаются const , let или var ? Рассказываем, что такое переменные и какими они бывают.

Время чтения: 9 мин

Открыть/закрыть навигацию по статье

Кратко
Что такое переменные
Правила именования переменных
Создание переменных
Переменные let и const
1. Объявление
2. Одинаковые имена переменных
3. Смена значения в let и const
1. Объявление
2. Смена значения в var
1. Сергей Фомин советует
1. В чём разница между null, undefined и объявленной переменной без начального значения? (let foo;)
2. Разница между let, const и var?
Контрибьюторы:

Обновлено 14 ноября 2022

Кратко

Скопировать ссылку «Кратко» Скопировано

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

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

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

Скопировать ссылку «Что такое переменные» Скопировано

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

Для создания переменной используется ключевое слово let , const или var . Сразу за ключевым словом идёт название переменной либо перечень переменных через запятую. Создание переменной также называют объявлением переменной. Например:
```
 var singleVariable let 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 + ' ' + surname console.log(fullName)// Уолтер Вайт let name = 'Уолтер' let surname = 'Вайт' let fullName = name + ' ' + surname console.log(fullName) // Уолтер Вайт      
```
Правила именования переменных

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

Для имени переменной можно использовать следующие символы:
- буквы латинского алфавита;
- цифры;
- символы $ и _ .
Первый символ не должен быть цифрой:
```
 let letters, $dollarsign, _underscore let 1number// SyntaxError: Invalid or unexpected token let letters, $dollarsign, _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 = 15 console.log('Конец') console.log('Старт') var byVar = 5 let byLet = 10 const byConst = 15 console.log('Конец')      
```
В конце скрипта, после того как произошло присвоение стартовых значений, переменные равны 5 , 10 и 15 :

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

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

Скопировать ссылку «Переменные let и const» Скопировано

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

Объявление

Скопировать ссылку «Объявление» Скопировано

Используя ключевое слово let , можно объявить переменную без присвоения ей начального значения. В таком случае она будет равна undefined :
```
 let aconsole.log(a)// undefined a = 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 initialization let 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 = 10 foo() // '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() console.log(Foo) function Foo()  this.bar = bar > // ƒ Foo()     
```
Оба типа переменных имеют блочную область видимости и не становятся частью глобального объекта ( 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 defined console.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 = 5 let 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 declared var 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(a)// 5 a = 10console.log(a)// 10 let a = 5 console.log(a) // 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 = 10 console.log(obj)// const obj =  a: 5, > obj.a = 10 console.log(obj) //     
```
Переменные var

Скопировать ссылку «Переменные var» Скопировано

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

Объявление

Скопировать ссылку «Объявление» Скопировано

Переменные var можно объявлять без присвоения им значения, в таком случае они будут равны undefined :
```
 var aconsole.log(a)// undefined var 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 = 5 console.log(window.varVariable)// 5 var varVariable = 5 console.log(window.varVariable) // 5      
```
К переменным, объявленным при помощи ключевого слова var , можно обращаться до момента объявления. В отличие от let и const , ошибки это не вызовет. Такое поведение называется hoisting — «всплытие»:
```
 console.log(a)// undefined var a = 5 console.log(a)// 5 console.log(a) // undefined var a = 5 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 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 происходит обращение именно к ней (до её объявления), а не к той, что находится вне функции.

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

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

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

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

Скопировать ссылку «Смена значения в var» Скопировано

Значение, хранящееся в переменной var , можно изменить двумя способами:
- обратиться к имени переменной и присвоить новое значение:
```
 var a = 5console.log(a)// 5 a = 10console.log(a)// 10 var a = 5 console.log(a) // 5 a = 10 console.log(a) // 10      
```
- обратиться к имени переменной вместе с ключевым словом var :
```
 var a = 5console.log(a)// 5 var 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 = 3000 const UNAUTHORIZED_CODE = 401 const BASE_URL = 'https://doka.guide' const PORT = 3000 const UNAUTHORIZED_CODE = 401      
```
+ Развернуть

На собеседовании

Скопировать ссылку «На собеседовании» Скопировано

В чём разница между null , undefined и объявленной переменной без начального значения? ( let foo; )

Скопировать ссылку «В чём разница между null, undefined и объявленной переменной без начального значения? (let foo;)» Скопировано

Скопировать ссылку «Александр Рассудихин отвечает» Скопировано

null обычно задаётся переменной явно и означает, что она ничего не содержит. undefined показывает, что значение переменной «не определено». undefined обычно присваивается переменной, когда она была объявлена, но не было определено её начальное значение. Также, undefined может возвращаться и из функции — это происходит, если функции явно не возвращает ничего другого. null же обычно возвращают из функции явно, чтобы показать, что результат функции равен «ничему».

Без начального значения можно оставлять только переменную объявленную через let или var . Если объявить переменную через const и не задать ей начального значения, будет ошибка: Uncaught SyntaxError : Missing initializer in const declaration .

Оператор typeof для null работает странно. typeof ( null ) выдаст нам строку ‘object’. Это официально признанная ошибка в языке, сохраняемая для совместимости. Ошибка тут в том, что null это отдельный тип данных, а не объект. С undefined всё куда лучше и typeof ( undefined ) выдаст нам ‘undefined’. Почитать ещё о typeof можно здесь.

Поговорим немного о приведении типов. Для начала, пример:
```
 console.log(null + null); // 0console.log(undefined + undefined); // NaN console.log(null + null); // 0 console.log(undefined + undefined); // NaN      
```
null во время сложения приводится к нулю. Это логично, так как числовым значением «ничего» является как раз 0.
С undefined другое поведении, так как JavaScript пытается привести его к числу, но у него не получается и в результате мы получаем NaN .

Немного упомяну и про оператор нулевого слияния ( ? ? ). В выражении между двумя операндами, он будет возвращать первый операнд, если он не равен null или undefined . Можно сказать, что ? ? приравнивает смысл undefined и null к «ничего не содержит» и в этом случае, кладёт в переменную значение второго операнда.

Разница между let , const и var ?

Скопировать ссылку «Разница между let, const и var?» Скопировано

Скопировать ссылку «Алексей Филимонов отвечает» Скопировано

Переменные объявленные через var всплывают (hoisting).
Это значит, что если мы обратимся к переменной ещё до момента её инициализации, то получим undefined .
```
 console.log(a); // Не может получить доступ к 'a' до её инициализацииconsole.log(b); // Не может получить доступ к 'b' до её инициализацииconsole.log(c); // undefined let a = 10;const b = 20;var c = 30; console.log(a); // Не может получить доступ к 'a' до её инициализации console.log(b); // Не может получить доступ к 'b' до её инициализации console.log(c); // undefined let a = 10; const b = 20; var c = 30;      
```
У переменных let , const и var разная область видимости.
У let и const область видимости ограничена блоком, а не функцией.
Другими словами, если переменные let и const объявлены внутри < . . . >, то доступны только там и на всех вложенных уровнях. Переменная, объявленная через var такую область видимости игнорирует и может быть доступна за её пределами.
```
 if (true)  let a = 10; const b = 20; var c = 30;> console.log(a); // ReferenceErrorconsole.log(b); // ReferenceErrorconsole.log(c); // 30 if (true)  let a = 10; const b = 20; var c = 30; > console.log(a); // ReferenceError console.log(b); // ReferenceError console.log(c); // 30      
```
Переменная, объявленная через const становиться константой и её невозможно переопределить. При попытке это сделать мы получим ошибку.
```
 let a = 10;const b = 20; a = 15 // Все впорядкеb = 40 // TypeError let a = 10; const b = 20; a = 15 // Все впорядке b = 40 // TypeError      
```
Похожие публикации:

Чем отличается let от var javascript

В чём разница между var и let

Поднятие

Когда использовать var и let

Читать дальше

ChatGPT не справляется

Знакомство с JavaScript

Что такое JavaScript?

Подключение JavaScript к веб-странице

Основы синтаксиса JavaScript

Переменные

Функции

События

Условия и циклы

Объекты и массивы

Объекты Document Object Model (DOM)

Обработка событий

JSON (JavaScript Object Notation)

Асинхронность

Замыкания

Современный синтаксис ES6+

Событие onclick в JS на примерах

Как перевернуть сайт. Самая короткая инструкция

Как узнать геолокацию: Geolocation API

Что такое localStorage и как им пользоваться

Случайное число из диапазона

Быстрый гайд по if, else, else if в JavaScript

Условный оператор if-else if-else

Как исправить ошибки SyntaxError в JavaScript

Ошибка TypeError: что это и как её исправить

Чем отличаются const, var и let в JavaScript?

Возможность отложенного определения значения переменной

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

Повторное объявление

Соблюдение/игнорирование блочной области видимости

Hoisting

Чем отличается let от var javascript

Синтаксис

Параметры

Описание

Правила области видимости

Чище код во вложенных функциях

Эмуляция приватных членов

Временные мёртвые зоны и ошибки при использовании let

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

Правила области видимости

Примеры

let vs var

let в циклах

Нестандартизированные расширения let

let блок

Синтаксис

Описание

Пример

Правила области видимости

let выражения

Синтаксис

Пример

Правила области видимости

Спецификации

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

Found a content problem with this page?

MDN

Support

Our communities

Developers

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

Кратко

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

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

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

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

Объявление

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

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

Переменные var

Объявление

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

На практике

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