Найти тему
JavaСкриптизёр

Javascript или разница между «var», «let» и «const»

Оглавление

Привет всем начинающим и не только коллегам программистам!

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

Let, var, const - ES6
Let, var, const - ES6
Небольшое примечание, из название статьи ясное дело, что в первую очередь я ориентируюсь на новичков. Хотя если вы опытный программист, которого так же смущает этот вопрос, то не вижу в этом ничего плохого ;)

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

Для того чтобы подчеркнуть разницу между этими тремя видами объявления переменных я буду говорить о трёх аспектах в контексте каждого их них: функциональная область видимости (function-scoped) и блочная область видимости (block-scoped), обновление и повторное объявление, и поднятие(hoisting).

var

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

Глобальная область видимости означает, что область видимости переменной может быть вне функции, поскольку она определена вне функции, а локальная область видимости означает, что переменная определяется внутри функции локально, поэтому эту переменную нельзя вызывать вне функции - всё просто!

Мы также можем обновить переменную var, если хотите:

Мы также можем повторно объявить переменную var.

При использовании переменной var выше того места, где она была объявлена ( далее в статье я буду использовать термин поднятие, который это и означает ), переменная будет иметь значение undefined. Я хотел бы, чтобы вы обратили на это внимание, поскольку для let и const наблюдается другой эффект.

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

В этом случае на помощь спешат let и const.

let

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

Другими словами, если мы попытаемся вызвать переменную hello вне блока, она вернет ReferenceError.

Как и var, let можно обновить, но нельзя повторно объявить.

Можно обновить:

Но нельзя повторно объявить:

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

Причина этого проста, как упоминалось выше, let имеет блочную область видимости. Все, что находится внутри {}, считается блоком. Мы можем представить ситуацию так, как будто «Чарли Браун» ходит в школу A, а есть еще один человек по имени «Чарли Браун», но он ходит в школу B. Школа - это сама по себе область видимости, и это два разных человека под одним именем. (Правда в школе всё же могут учиться люди с одинаковыми именами... Но это не точно, просто выкиньте это из головы)

При поднятии переменной let, мы получим ReferenceError вместо undefined в var.

На этом этапе у вас все еще может возникнуть вопрос, в чем разница между областью действия функции и областью действия блока. Вкратце, переменная var может иметь область видимости вне блока {} внутри одной функции:

Но если мы изменим var на let:

Но если мы изменим var на let: Поскольку i и name определены внутри {}, мы получим ReferenceError, когда попытаемся вызвать эти две переменные вне {}.

const

Поскольку большая часть нововведений описано в let, я быстро пройдусь по const.

Переменные const поддерживают постоянные значения. Хотя природа const сильно отличается от let, у них обоих много общего.

Как и объявления let, область видимости const ограничена блоком. Я надеюсь, что приведенные выше примеры проясняют, что такое блочная область видимости.

Объявления const, также как и let, не инициализируются, при поднятии.

const нельзя повторно объявить, как и let. Но в отличие от let - значение const не может быть обновлено.

Заключение

Давайте подведем итог тому, что мы только что обсудили:

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

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

const: область видимости блока, не может быть обновлен и повторно объявлен.

Всегда лучше использовать let и const. Время от времени вы можете видеть примеры использования var. Но ради вас и ваших товарищей по команде просто придерживайтесь let и const, дабы избегать увлекательного времени отладки кода :)

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