в чем разница между ключевыми словами var let и const
Var, Let, Const — в чем разница?
May 9, 2020 · 6 min read
ES2015 (ES6) принес с собой много новых интересных фич. Теперь на дворе 2020 год, и можно предположить, что многие JavaScript-разработчики уже познакомились с этими фичами и стали их применять.
Хотя такое предположение может оказаться отчасти верным, по-прежнему вероятно, что какие-то из этих фич остаются загадкой для некоторых разработчиков.
Область видимости var
Переменная var является глобальной, когда объявлена вне какой-либо функции. Это означает, что любая переменная, объявленная через var вне блока функции, доступна для использования во всем окне.
Var является локальной, когда объявлена внутри функции. Это означает, что она доступна и к ней можно обращаться только изнутри этой функции.
Чтобы разобраться получше, давайте рассмотрим пример:
Здесь переменная greeter — глобальная, поскольку находится вне какой-либо функции, а hello — ограничена функцией. Так что мы не можем обратиться к переменной hello извне данной функции. Поэтому, если попробовать сделать вот так:
…на выходе будет ошибка. Это происходит из-за того, что переменная hello недоступна вне конкретной функции.
Переменные var могут быть объявлены повторно или обновлены
Это значит, что мы можем сделать это внутри соответствующей области видимости и не получить ошибку.
Поднятие var
Поднятие — механизм в JavaScript, по которому переменные и объявления функций перемещаются в верхнюю часть своей области видимости, прежде чем начнется выполнение кода. Это означает, что если сделать вот так:
…то это будет интерпретировано так:
Проблема с var
let имеет блочную область видимости
Блок — это фрагмент кода, ограниченный фигурными скобками <>. Всё, что находится внутри фигурных скобок, относится к блоку.
Таким образом, переменная, объявленная в блоке через let, будет доступна только внутри этого блока. Давайте рассмотрим на примере:
Здесь видно, что попытка использовать hello вне блока (фигурных скобок, в рамках которых переменная была определена) возвращает ошибку. Это происходит потому, что переменные типа let являются блочными.
Переменные let могут быть обновлены, но не объявлены повторно
этот код уже вернет ошибку:
Однако, если переменная с одним и тем же именем определена в разных областях видимости, ошибки не будет:
Почему же ошибки нет? Так происходит, потому что оба экземпляра рассматриваются как различные переменные, поскольку у них различаются области видимости.
Поднятие let
Const
const имеет блочную область видимости
Переменные const не могут быть ни обновлены, ни объявлены повторно
Таким образом, каждое объявление через const должно быть инициализировано в момент объявления.
…то, пускай, мы не можем сделать такого:
Мы можем сделать другое:
Это позволит обновить значение greeting.message без того, чтобы получить на выходе ошибку.
Поднятие const
Так что на случай, если вы упустили суть отличий, то вот они вкратце:
В чём разница между var, let и const в JavaScript
Mar 19, 2019 · 7 min read
Инициализация и объявление переменной
Объявление переменной вводит новый идентификатор.
Инициализация — это присваивание значения переменной.
Это подводит нас к понятию «область видимости».
Область видимости
Область видимости определяет, где в коде программы будут доступны переменные и функции. В JavaScript есть два типа области видимости — глобальная и локальная ( global scope и function scope). Согласно официальной спецификации:
Если переменная создаётся внутри объявления функции, то её область видимости определяется как локальная и ограничивается этой функцией.
Если JavaScript это единственный язык программирования, которым вы владеете, то вы не заметите ничего странного. Но если вы перешли с другого языка, вы, вероятно, немного запутались в том, что здесь происходит.
Hoisting
Давайте посмотрим, как действует hoisting, на предыдущем примере:
var VS let VS const
Следующее отличие связано с поднятием переменной. Ранее мы определили, что интерпретатор в JavaScript присваивает переменным значение undefined по умолчанию во время фазы «Создания». Вы даже видели это в действии, логируя переменную до её объявления (и получили undefined ).
let VS const
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 на пустоту?
Чем различаются var, let и const в JavaScript
На практике разбираемся, чем отличаются var, let и const и когда их использовать.
Обычно для объявления переменных в JavaScript используется var, но иногда можно встретить const или let. Они выполняют одну и ту же функцию (объявляют о создании ячейки в памяти), но работают немного по-разному.
Важно! let и const являются частью ECMAScript 6, который поддерживается не всеми браузерами. Заранее ознакомьтесь с таблицей совместимости.
Пишет о программировании, в свободное время создает игры. Мечтает открыть свою студию и выпускать ламповые RPG.
Области видимости var и let
Главное отличие var и let в том, как они работают с областями видимости. Переменная var, созданная вне функции, действует как глобальная переменная — она доступна из любой части скрипта.
Если же создать переменную с помощью var внутри функции, то она будет доступна только в этой функции (как локальная переменная):
Также можно создать переменные с одинаковым названием:
Это используется редко, потому что проще давать переменным уникальные имена, но сама возможность есть.
Что же касается let, то такие переменные доступны только внутри того блока <>, в котором они созданы:
Вот как отличается поведение счётчика цикла, если его создавать с помощью var и let: