В самой первой главе про переменные мы ознакомились с тремя способами объявления переменных:
let и const ведут себя одинаково по отношению к лексическому окружению, области видимости.
Но var – это совершенно другой зверь, берущий своё начало с давних времён. Обычно var не используется в современных скриптах, но всё ещё может скрываться в старых.
Если в данный момент вы не работаете с подобными скриптами, вы можете пропустить или отложить прочтение данной главы, однако, есть шанс, что вы столкнётесь с var в будущем.
…Однако, отличия всё же есть.
Для «var» не существует блочной области видимости
Область видимости переменных var ограничивается либо функцией, либо, если переменная глобальная, то скриптом. Такие переменные доступны за пределами блока.
Аналогично для циклов: var не может быть блочной или локальной внутри цикла:
Если блок кода находится внутри функции, то var становится локальной переменной в этой функции:
«var» допускает повторное объявление
Если дополнительно присвоить значение, то переменная примет новое значение:
«var» обрабатываются в начале запуска функции
Объявления переменных var обрабатываются в начале выполнения функции (или запуска скрипта, если переменная является глобальной).
Другими словами, переменные var считаются объявленными с самого начала исполнения функции вне зависимости от того, в каком месте функции реально находятся их объявления (при условии, что они не находятся во вложенной функции).
…Технически полностью эквивалентен следующему (объявление переменной var phrase перемещено в начало функции):
…И даже коду ниже (как вы помните, блочная область видимости игнорируется):
Это поведение называется «hoisting» (всплытие, поднятие), потому что все объявления переменных var «всплывают» в самый верх функции.
Объявления переменных «всплывают», но присваивания значений – нет.
Это проще всего продемонстрировать на примере:
Строка var phrase = «Привет» состоит из двух действий:
Объявление переменной обрабатывается в начале выполнения функции («всплывает»), однако присвоение значения всегда происходит в той строке кода, где оно указано. Т.е. код выполняется по следующему сценарию:
Поскольку все объявления переменных var обрабатываются в начале функции, мы можем ссылаться на них в любом месте. Однако, переменные имеют значение undefined до строки с присвоением значения.
Итого
Существует 2 основных отличия var от let/const :
Есть ещё одно небольшое отличие, относящееся к глобальному объекту, мы рассмотрим его в следующей главе.
Эти особенности, как правило, не очень хорошо влияют на код. Блочная область видимости – это удобно. Поэтому много лет назад let и const были введены в стандарт и сейчас являются основным способом объявления переменных.
На практике разбираемся, чем отличаются var, let и const и когда их использовать.
Обычно для объявления переменных в JavaScript используется var, но иногда можно встретить const или let. Они выполняют одну и ту же функцию (объявляют о создании ячейки в памяти), но работают немного по-разному.
Важно! let и const являются частью ECMAScript 6, который поддерживается не всеми браузерами. Заранее ознакомьтесь с таблицей совместимости.
Пишет о программировании, в свободное время создает игры. Мечтает открыть свою студию и выпускать ламповые RPG.
Области видимости var и let
Главное отличие var и let в том, как они работают с областями видимости. Переменная var, созданная вне функции, действует как глобальная переменная — она доступна из любой части скрипта.
Если же создать переменную с помощью var внутри функции, то она будет доступна только в этой функции (как локальная переменная):
Также можно создать переменные с одинаковым названием:
Это используется редко, потому что проще давать переменным уникальные имена, но сама возможность есть.
Что же касается let, то такие переменные доступны только внутри того блока <>, в котором они созданы:
Вот как отличается поведение счётчика цикла, если его создавать с помощью var и let:
var
let
for(var i = 0; i const создаются константы. Например, физические и математические величины.
Попытка изменить значение константы приведёт к ошибке. Поэтому их стоит использовать для хранения тех данных, которые должны оставаться неизменными.
Например, в них можно хранить объекты из DOM:
Также стоит отметить, что неизменяемым сохраняется сам объект, а не его поля:
Что же касается областей видимости, то const ведёт себя как let.
Заключение
В большинстве случаев достаточно использовать var, но иногда необходимо убедиться, что ваши данные в сохранности — их нельзя изменить извне или в принципе. В этих случаях let и const незаменимы.
Если вы хотите научиться разрабатывать веб-приложения, используя все возможности этого языка, то обратите внимание на наш курс о разработке на JavaScript.
Когда использовать var, let и const в Javascript [перевод статьи Tyler’а McGinnis]
Привет, Хабр! Представляю вашему вниманию перевод статьи «var vs let vs const in JavaScript» автора Tyler McGinnis.
В этой статье вы узнаете 2 новых способа для создания переменных в Javascript (ES6), let и const. На протяжении этой статьи мы рассмотрим разницу между var, let и const, а также смежные темы такие как: “область видимости функции против блочной области видимости“, “поднятие” переменных и иммутабельность.
Если вы предпочитаете видео, посмотрите это (оригинал на английском):
ES2015 (или ES6) представил нам 2 новых способа для создания переменных, let и const. Но прежде чем мы углубимся в различия между var, let и const, имеются некоторые темы, которые вам следует узнать в первую очередь. Это объявление переменных и их инициализация, область видимости (особая область видимости функции) и “поднятие”.
Объявление и инициализация переменных
Объявление переменной вводит новый идентификатор.
Выше мы создаем новый идентификатор который мы назвали “declaration”. В Javascript, при создании, переменные инициализируются со значением undefined. Это означает, что если мы попробуем вывести нашу переменную declaration, мы получим undefined.
И так, мы вывели переменную declaration и мы получили undefined.
По сравнению с объявлением переменной, инициализация переменной это когда вы в первый раз устанавливаете значение этой переменной.
И так, здесь мы инициализировали переменную declaration записывая в неё строку.
Это приводит нас к следующему понятию, область видимости.
Область видимости
“Если объявление переменной происходит внутри объявления функции, переменная определяется в локальной области видимости этой функции…”
Это означает, что если вы создадите переменную при помощи var, областью видимости этой переменной будет функция в которой она была создана и будет доступна только внутри этой функции или любой другой вложенной функции.
Выше мы попытались получить доступ к переменной снаружи функции, в которой она была объявлена. Так как областью видимости переменной date является функция getDate, она доступна только внутри этой функции или в любой другой функции вложенной в getDate(как показано ниже).
Теперь давайте взглянем на более продвинутый пример. Скажем, у нас есть массив prices и нам требуется функция, которая принимает этот массив, а так же переменную discount, и возвращает нам новый массив цен со скидками. Конечная цель может выглядеть примерно так:
И реализация может выглядеть примерно так:
Выглядит достаточно просто, но какое это отношение имеет к области видимости блока? Взгляните на данный цикл for. Доступны ли переменные объявленные внутри него за его пределами? Оказывается доступны.
Если JavaScript это единственный язык программирования который вы знаете, вы можете особо и не задумываться об этом. Однако, если вы пришли в JavaScript из другого языка программирования, в частности языка программирования, который блокирует область видимости, вы, вероятно, немного обеспокоены тем что здесь происходит.
Оно не сломано, просто работает немного странно. На самом деле нет никаких причин иметь доступ к i, discountPrice и finalPrice за пределами цикла for. Это не приносит нам никакой пользы и может даже принести нам вред в некоторых ситуациях. Однако, так как переменные объявлены при помощи var, они входят в область видимости функции и вы можете получить к ним доступ.
Теперь мы обсудили объявление и инициализацию переменных, а так же области видимости, ещё одна вещь с которой нам нужно разобраться, прежде чем мы погрузимся в разбор различий между let и const, это “поднятие”.
“Поднятие”
Помните, ранее было сказано “В Javascript, при создании, переменные инициализируются со значением undefined “. Оказывается это и означает “поднятие”. Интерпретатор JavaScript назначает объявленным переменным значение undefined во время фазы называемой “Создание”.
Для более подробного изучения фазы Создания, “Поднятия” и областей видимости прочтите данную статью: “The Ultimate Guide to Hoisting, Scopes, and Closures in JavaScript”.
Давайте взглянем на предыдущий пример и увидим как “поднятие” влияет на него.
Обратите внимание, всем объявленным переменным было присвоено значение undefined. Вот почему если вы попытаетесь получить доступ к одной из них, до того как она на самом деле будет объявлена, вы просто получите undefined.
Теперь вы знаете все что нужно о var, теперь давайте наконец-то поговорим о главной цели, из-за которой мы здесь: в чем разница между var, let и const?
var, let или const
Для начала, давайте сравним var и let. Ключевое отличие между var и let это то, что let помимо глобальной области видимости и области видимости функции позволяет определять переменные в области видимости блока. Это означает, что переменная созданная при помощи ключевого слова let доступна внутри “блока”, где она была создана, также и внутри вложенных блоков. Когда я сказал “блок”, я имел в виду что-либо окруженное фигурными скобками <>, например цикл for или оператор if.
И так, давайте вернемся к нашей функции discountPrices в последний раз.
Вспомните, что мы вправе вывести i, discountPrice, и finalPrice за пределами цикла for, так как они были объявлены при помощи var, а переменные объявленные при помощи ключевого слова var ограничены областью видимости функции. Но что же произойдет теперь, если мы изменим var на let и попробуем запустить наш код?
Мы получили ReferenceError: i is not defined. Что говорит нам о том, что переменная, объявленная при помощи let, ограничена областью видимости блока, а не функции. Попытайтесь обратиться к i (или discountedPrice или finalPrice) за пределами “блока”, где они были объявлены, и это выдаст нам ошибку обращения, как мы только что увидели.
Следующие различие связано с “поднятием”. Ранее мы сказали, что определение “поднятия” это: “Интерпретатор JavaScript назначает объявленным переменным значение undefined во время фазы называемой “Создание”». Мы так же увидели это в действии при помощи вызова переменной до её объявления (вы получили undefined).
Я не могу вспомнить ни одного случая использования, когда вы на самом деле хотели бы получить доступ к переменной до её объявления. Кажется, что получить ReferenceError было бы лучше, чем получить undefined.
По факту, это и есть то что делает let. Если вы попытаетесь доступ к переменной до её объявление при помощи let, вместо получения undefined (как это было при объявлении при помощи var), вы получите ReferenceError.
let или const
Теперь вы понимаете разницу между var и let, что же о const? Оказывается, const почти такая же как и let. Однако есть одно отличие: если вы однажды присвоили значение используя const, вы не сможете его изменить на другое.
Вывод из того что выше — переменные, объявленные с помощью let могут быть перезаписаны, а переменные объявленные с помощью const не могут.
Отлично, теперь когда вы захотите, чтобы ваша переменная была неизменна вы можете объявить её при помощи const. Или не совсем. Просто потому что переменная была объявлена при помощи const не означает, что она неизменна, все что это значит, это то что она не может быть перезаписана. Ниже приведен хороший пример.
Заметьте, что изменения свойства объекта не является его перезаписью, так что даже если объект объявлен при помощи const, это не означает, что вы не можете изменить какие-либо из его свойств. Это только значит, что вы не можете перезаписать этот объект.
Теперь, наиболее важный вопрос, на который ещё не было ответа: что следует использовать var, let или const? Самое популярное мнение, и мнение которого придерживаюсь я, это использовать всегда const, пока вы не знаете будет ли переменная изменяться. Причина этого в том, что используя const вы даете понять себе и будущим разработчикам, которые должны прочитать ваш код, что эта переменная не должна изменяться. Если её потребуется изменить (например в цикле for), просто используйте let.
Между переменными, которые меняются и переменным которые не меняются, не так уж и много случаев осталось. Это значит, что вам больше никогда не придется использовать var.
Теперь непопулярное мнение, хотя оно все ещё имеет обоснование, это то что вы никогда не должны использовать const, несмотря на то что вы пытаетесь показать, что эта переменная неизменна, как мы видели выше, это не совсем так. Разработчики, которые придерживаются этого мнения всегда используют let пока нет переменных, которые на самом деле являются константами, такими как _LOCATION_ =….
Составим резюме выше сказанного, var ограничена областью видимости функции и если вы попытаетесь обратиться к такой переменной до её объявления вы получите undefined. const и let ограничены областью видимости блока и если вы попытаетесь обратиться к этим переменным до их объявления вы получите ReferenceError. И отличие между const и let это то, что значение, которое было присвоено const не может быть перезаписано, в отличие от let.
Первоначально данная статья была опубликована на tylermcginnis.com как часть курса Modern JavaScript
Спасибо за прочтение данного перевода, надеюсь вы познакомились для себя с чем-то новым и полезным. Буду рад увидеть обратную связь!
Javascript var, let и const (в чем отличие и когда использовать)?
Переменные var Можно Обновлять и Переопределять.
В данном примере значение переменной amount было обновлено значением 200. Мы также можем добавить слово var (случайно или намеренно) к переменной amount и тем самым переопределить ее:
В логах отобразятся те же значения: 100 и 200. Проблема заключается в том, что мы не получим сообщения об ошибке, создавая вторую переменную с тем же названием в той же области видимости.
Область Видимости Переменной var – Функция.
В случае, если переменная var создается за пределами функции – она доступна в глобальной области видимости, что может создавать проблемы.
Рассмотрим следующий пример.
Создадим переменную amount внутри функции getAmount и выведем в console.log ее значение:
В этом случае результатом console.log будет значение нашей переменной amount (100);
Если нам понадобится значение переменной amount в глобальной области видимости, нужно просто объявить ее за пределами нашей функции.
Соответственно внутри функции мы будем обновлять значение уже созданной переменной.
Функции помогают нам упорядочить код и предотвратить “вытекание” переменных в глобальную область видимости.
Давайте рассмотрим еще один пример.
Запустите указанный код в консоли браузера:
Проблема в том, что мы используем переменную kilograms внутри нашего условия if и не хотим делать ее доступной в глобальной области видимости.
Также, мы не используем функцию, которая могла бы изолировать ее от остального кода.
Как работают let и const?
Отлично, благодаря использованию let (либо const ), наша переменная kilograms не “вытекает” в глобальный контекст!
Как работает let?
Имеется следующий код:
Попробуем обновить значение speed путем повторного декларирования:
Рассмотрим такой пример:
Обе переменные находятся в разных областях видимости:
Обновление переменной, созданной с помощью let происходит следующим образом:
Важно!
Некоторые начинающие разработчики ошибочно предполагают, что свойства объекта, созданного с помощью const также нельзя обновлять.
Мы можем поменять любое из свойств объекта car :
Либо добавить новое свойство:
В каких случаях использовать let, а в каких const?
Методы объектов js: Как проверить объект Javascript на пустоту?
Объявить переменную (или несколько) в текущей области видимости
Синтаксис
Аргументы
Описание, примеры
Здесь javascript похож на традиционные языки программирования
В отличие от большинства языков, javascript блок не задает область видимости.
Переменная внешней функции видна во внутренней, благодаря наличию замыканий.
См. также
А почему следующая конструкция выдает синтаксическую ошибку?
Почему нельзя делать объявление переменной внутри if?
If предполагает сравнение чего-то с чем-то, а в данном примере «=» использыется как оператор сравнения, а как оператор присваивания.
По вашей логике тоже самое без var не должно работать. А это не так.
Операцию присвоения можно использовать как логическое выражение, вот только возвращать она всегда будет true (за некоторыми исключениями)
Подписываюсь под каждым словом вышестоящим словом
Я думаю надо сменить на сайте фон. Он грузовой какой то. У него даже запах есть стухшего энтузиазма.
Есть новый сайт с новым дизайном. Постараюсь ускорить его разработку, он в принципе почти в бете уже, только доступ по «инвайтам».
Добрый день подскажите пожалуйста почему вот так выводится значение переменной y
А если в функцию вставить if, то не выдает undefined, до тех пор пока мы не объявим переменную в самой функции. Почему он не берет значение переменной y из глобальной видимости?
В первом примере не закрыта скобка у функции fu. Вот так
Выводит 10, как и положено.
На второй вопрос > Почему он не берет значение переменной y из глобальной видимости?
Т.е. свое объявление переменной y.
Помогите пожалуйста, в java вообще не соображаю, как переменную из php поставить в замен ‘1 день’ и 100? P.S. в коментах моя жалкая попытка. var data = google.visualization.arrayToDataTable([ [‘дни’, ‘Сумарное время’], [‘1 день’, 100], [‘2 день’, 20], [‘9 день’, 20] // [ ‘ var a = ‘ ; », // var b = ‘ ; ‘] ] );
Это учебник по JavaScript. Про PHP ответят в другом месте.
Заранее извиняюсь за нубские вопросы. 1) Почему в данном случае инкремент выдаёт NaN? 2) Получается, что нужно обязательно проводить инициализацию переменной, а не просто её объявление? ( var counter = 0; || var counter = new Number(); )?
Но там же и написано ————————- ++(Инкремент) Увеличивает переменную, к которой применен, на единицу. ————————-
И с неопределенной переменной эти операции будут давать counter is not defined
Бывает js не работает при загрузке web-странички через Notepad++, но при этом точно такой же код хорошо отображается в этом конструкторе: https://codepen.io
Объявлять переменные нужно правильно, в общем разрабатывать на Javascript достаточно просто.
Как в js нажимая на кнопку тебя перебрасывало на рандомную гиперссылку?
