ЛУЧШИЙ САЙТ ДЛЯ ВЕБ-РАЗРАБОТЧИКОВ

JS Учебник

JS Старт JS Введение JS Установка JS Вывод JS Объявления JS Синтаксис JS Комментарии JS Переменные JS Операторы JS Арифметические JS Присваивание JS Типы данных JS Функции JS Объекты JS События JS Строки JS Методы строки JS Числа JS Методы числа JS Массивы JS Методы массива JS Сортировка массива JS Итерация массива JS Даты JS Форматы дат JS Методы получения дат JS Методы установки дат JS Математические JS Рандомные JS Булевы JS Сравнения JS Условия JS Switch JS Цикл For JS Цикл While JS Прерывание JS Преобразование типов JS Побитовые JS Регулярные выражения JS Ошибки JS Область действия JS Подъём JS Строгий режим JS Ключевое слово this JS Ключевое слово Let JS Ключевое слово Const JS Функции стрелок JS Классы JS Отладка JS Гид по стилю JS Лучшие практики JS Ошибки JS Производительность JS Зарезервированные слова JS Версии JS Версия ES5 JS Версия ES6 JS JSON

JS Формы

JS Формы Формы API

JS Объекты

Определения объектов Свойства объекта Методы объекта Доступ к объектам Конструкторы объектов Прототипы объектов Объект ECMAScript 5

JS Функции

Определения функций Параметры функции Обращение к функции Вызов функции Применение функции Закрытие функции

JS HTML DOM

DOM Введение DOM Методы DOM Документ DOM Элементы DOM HTML DOM CSS DOM Анимация DOM События DOM Слушатель событий DOM Навигация DOM Узлы DOM Коллекции DOM Узловые списки

JS Объектная модель браузера BOM

JS Окно JS Скрин JS Локация JS История JS Навигатор JS Всплывающее оповещение JS Тайминг JS Куки

JS AJAX

AJAX Введение AJAX XMLHttp AJAX Запрос AJAX Отклик AJAX XML Файл AJAX PHP AJAX ASP AJAX База данных AJAX Приложения AJAX Примеры

JS JSON

JSON Введение JSON Синтаксис JSON и XML JSON Типы данных JSON Анализ JSON Stringify JSON Объекты JSON Массивы JSON PHP JSON HTML JSON JSONP

JS и jQuery

jQuery Селекторы jQuery HTML jQuery CSS jQuery DOM

JS Примеры

JS Примеры JS HTML DOM JS HTML Input JS HTML Объекты JS HTML События JS Броузер JS Упражнения JS Викторина JS Сертификат

JS Справочники

JavaScript Объекты HTML DOM Объекты

JavaScript. Уроки для начинающих

JavaScript Ключевое слово Let


ECMAScript 2015

ES2015 представил два важных новых ключевых слова JavaScript: let и const.

Эти два ключевых слова предоставляют переменные (и константы) Block Scope в JavaScript.

До ES2015 JavaScript имел только два типа области действия: Global Scope и Function Scope.


Global Scope / Глобальная область действия

Переменные, объявленные Глобально (вне какой-либо функции) имеют Global Scope (Глобальную область действия).

Пример

var carName = "Volvo";

// код, в котором можно использовать carName

function myFunction() {
  // код, в котором также можно использовать carName
}
Попробуйте сами »

Глобальные переменные могут быть доступны из любого места в программе JavaScript.


Function Scope / Область действия функции

Переменные, объявленные локально (внутри функции) имеют Function Scope (область действия функции).

Пример

// код, который НЕ может использовать carName

function myFunction() {
  var carName = "Volvo";
  // код, который МОЖЕТ использовать carName
}

// код, который НЕ может использовать carName
Попробуйте сами »

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


JavaScript Block Scope / Область действия блока

Переменные, объявленные с ключевым словом var не могут иметь Block Scope.

Переменные, объявленные внутри блока {} могут быть доступны вне блока.

Пример

{
  var x = 2;
}
// x МОЖЕТ быть использован здесь

До ES2015 в JavaScript не было Block Scope.

Переменные, объявленные с ключевым словом let, могут иметь Block Scope.

Переменные, объявленные внутри блока {}, недоступны вне блока:

Пример

{
  let x = 2;
}
// x НЕ МОЖЕТ использоваться здесь

Переопределение переменных

Повторное выделение переменной с помощью ключевого слова var может вызвать проблемы.

Переопределение переменной внутри блока также повторно объявит переменную вне блока:

Пример

var x = 10;
// здесь x является 10
{
  var x = 2;
  // здесь x является 2
}
// здесь x является 2
Попробуйте сами »

Повторное выделение переменной с помощью ключевого слова let может решить эту проблему.

Переопределение переменной внутри блока не приведет к повторному объявлению переменной вне блока:

Пример

var x = 10;
// здесь x является 10
{
  let x = 2;
  // здесь x является 2
}
// здесь x является 10
Попробуйте сами »

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

Ключевое слово let не полностью поддерживается в Internet Explorer 11 или более ранней версии.

В следующей таблице указаны первые версии браузера с полной поддержкой ключевого слова let:

Chrome 49 Edge 12 Firefox 44 Safari 11 Opera 36
Mar, 2016 Jul, 2015 Jan, 2015 Sep, 2017 Mar, 2016

Loop Scope / Область действия цикла

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

Пример

var i = 5;
for (var i = 0; i < 10; i++) {
  // некоторые объявления
}
// здесь i является 10
Попробуйте сами »

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

Пример

let i = 5;
for (let i = 0; i < 10; i++) {
  // некоторые объявления
}
// здесь i является 5
Попробуйте сами »

В первом примере, используя var, переменная, объявленная в цикле, повторно объявляет переменную вне цикла.

Во втором примере, используя let, переменная, объявленная в цикле, не объявляет переменную вне цикла.

Когда let используется для объявления переменной i в цикле, переменная i будет видна только внутри цикла.


Function Scope / Область действия функции

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

Они оба будут иметь Function Scope (область действия функции):

function myFunction() {
  var carName = "Volvo";   // Function Scope
}
function myFunction() {
  let carName = "Volvo";   // Function Scope
}

Global Scope / Глобальная область действия

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

У них обоих будет Global Scope:

var x = 2;       // Global scope
let x = 2;       // Global scope

Глобальные переменные в HTML

С JavaScript глобальная область действия - это среда JavaScript.

В HTML глобальной областью является объект окна.

Глобальные переменные, определенные с помощью ключевого слова var, относятся к объекту окна:

Пример

var carName = "Volvo";
// в данном коде можно использовать window.carName
Попробуйте сами »

Глобальные переменные, определенные с помощью ключевого слова let не принадлежат объекту окна:

Пример

let carName = "Volvo";
// в данном коде нельзя использовать window.carName
Попробуйте сами »

Переопределение (повторное объявление)

Переопределение переменной JavaScript с помощью var разрешено в любом месте программы:

Пример

var x = 2;

// теперь x является 2
 
var x = 3;

// теперь x является 3
Попробуйте сами »

Переопределение переменной var с помощью let в той же области или в том же блоке не допускается:

Пример

var x = 2;       // допускается
let x = 3;       // не допускается

{
  var x = 4;   // допускается
  let x = 5   // не допускается
}

Переопределение переменной let с помощью let в том же объеме или в том же блоке не допускается:

Пример

let x = 2;       // допускается
let x = 3;       // не допускается

{
  let x = 4;   // допускается
  let x = 5;   // не допускается
}

Переопределение переменной let с помощью var в том же объеме или в том же блоке не допускается:

Пример

let x = 2;       // допускается
var x = 3;       // не допускается

{
  let x = 4;   // допускается
  var x = 5;   // не допускается
}

Переопределение переменной с помощью let в другом объёме или в другом блоке допускается:

Пример

let x = 2;       // допускается

{
  let x = 3;   // допускается
}

{
  let x = 4;   // допускается
}
Попробуйте сами »

Hoisting / Подъём

Переменные, определенные с помощью var, поднимаются наверх (если вы не знаете, что такое Hoisting, прочитайте наш Hoisting раздел).

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

Пример

// Здесь вы можете использовать carName
var carName;
Попробуйте сами »

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

Использование переменной let до её объявления приведёт к результату ReferenceError (ошибке).

Переменная находится в "temporal dead zone" ("временной мертвой зоне") от начала блока до его объявления:

Пример

// здесь вы НЕ можете использовать carName
let carName;