Abr@X@bra.ru
Курс по ES6 #2. Использование let

Курс по ES6 #2. Использование let

16.04.2017
53
Как вы знаете в JavaScript, а именно в ES5, есть две области видимости. Глобальная и в приделал функции. В ES6 теперь есть новая область видимости. Эта область ограничена блокам кода. А именно фигурными скобками. Для работы с ней имеется новое ключевое слово let. Которое мы можем использовать для объявления переменных с ограниченной областями видимости.

Переменная let

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

В папке src я добавлю файл - let.js. 



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

Для этого я запущу терминал и напишу команду:

npm run watch


В папке dist, появился пустой файл lets.js. В файле я создам блок кода с помощью if. 



И внутри блока используя var, объявляю переменную - version и присвою значение ES5.



После блока, я выведу значение version в консоли браузера. 

 

Давайте посмотрим на код, который сгенерировал Babel. 



Он ничем не отличается от нашего, кроме добавления “use strict”. Далее на страница index.html, нам необходимо указать путь к файлу в теги script. 



Откроем страницу в браузере. В консоли отобразилось ES5. Теперь давайте поменяем var на let и значения на ES6.



Обновим страницу в браузере. В консоле отобразилась ошибка. От том, что переменная version не объявлена.   



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



Как вы видете в блоке if, объявлена переменная _version, а в консоль мы отправляем version, поэтому и получаем ошибку. 

Еще одна особенность let, связана с поднятием переменных. Или с хостингом. 

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

К сожалению транспилироанный код этого не отображает. Но последние версии браузеров поддерживают слова let. По этому на страницы index.html, я укажу файл let.js из папки src. 



В файле let.js я удалил блок if, а строку console.log, я оставлю над объявлением переменной version. 



Далее перейду в браузер и обновлю страницу. Видим сообщение об ошибки, что переменная version не объявлена.   



То есть мы не можем использовать переменную объявленную с помощью let, до ее объявления. Если я поменяю let на var. 



То мы увидим - undefined. Но ошибки не будет. 



Мы видим значение undefined потому что, перед тем как выполнить код, движок JavaScript поднял переменную version наверх присвоил ей undefined. После чего мы вывели сообщение в консоль и только после этого присвоили значение ES5. Выглядит это примерно так. 


Давайте рассмотрим применения let на практическом примере

Для этого я на странице создам пять кнопок. 



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



Далее сделаю простой цикл for. 



Внутри цикла, я объявляю переменную button и присваиваю ей кнопку по порядку в соответствии со значением i. В качестве текста кнопки, будет значения i.   



То есть у первой кнопки значение, один, у второй, два и т.д.  

При нажатие на кнопку я хочу, чтобы отобразился ее порядок. Для этого в button.onclick присвоим функцию в которой console.log выводит текущие значения i. 



Давайте посмотрим, что получилось. Мы видим пять кнопок.



Но при нажатии на любую кнопку мы видим значение пять. 



Но почему? Если вы не сталкивались с этой проблемой, сразу не понятно, что не так. Дело в том, что когда мы присваиваем переменной var i, мы создаем глобальную переменную. Которая будет видна всем пяти функциям которые мы присваиваем кнопкам в качестве функций обратного вызова. Будет понятней если я напишу так. 



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

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

В место var просто вставляем let. 



Перейдем в браузер и обновим страницу, как можем заметить, что проблема решена. 

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

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


ES6, let
Читайте также:
Курс по React JS #2. Средства разработчика

Курс по React JS #2. Средства разработчика

Продолжаем изучать React JS. В этом посте я расскажу как установить и настроить средства разработчика, чтобы процесс...
Читать
Курс по React JS #1. Пилотный выпуск. Привет React!

Курс по React JS #1. Пилотный выпуск. Привет React!

В этом посте расскажу как написать первое простое приложение на React js.
Читать
Источник: codedojo