Var против Let против Const
Введение
Если вы новичок в программировании, вы, вероятно, сталкивались с несколькими учебниками, в которых переменные объявляются с использованием var, let, & const
. Если у вас возникли проблемы с пониманием разницы между объявлениями, этот пост для вас!
Начало работы с JavaScript
Начать работу с JavaScript очень просто. нам не нужен модный текстовый редактор. Фактически, используя Google Chrome в качестве веб-браузера, мы можем открыть консоль инструментов разработчика браузера, нажав сочетание клавиш cmd+option+j
на Mac.
Программа привет мир
На скриншоте выше мы написали нашу первую программу, которая просто печатает сообщение hello world
в нашей веб-консоли. Метод console.log()
— это встроенный в JavaScript метод, который выводит сообщение на консоль. Этот метод будет очень полезен для целей отладки.
Переменные в JavaScript
С добавлением let
и const
как части новых функций в ES6, что отличает их от использования ключевого слова var
?
Ключевое слово Вар
Первоначально ключевое слово var
было единственным способом объявления переменных в JavaScript, но ES6 вводит два других способа объявления переменных, let
и const
.
var name = 'John Smith'; var salary = 80000; var age = 23; var isEmployed = true;
Объем переменных
Когда мы обсуждаем область действия переменной, мы имеем в виду, где находится переменная и ее доступность для использования. Существует два типа областей видимости переменных:
- Глобальные: объявления, в которых переменная объявляется вне функции и доступна во всем окне.
- Локальные: объявления, в которых переменная объявлена внутри функции и доступна только внутри этой функции.
// global scope var message = 'Hello '; function greet(){ // local scope var name = 'John Smith'; console.log(name); }
Здесь переменная message
имеет глобальную область видимости и может быть доступна внутри функции приветствия, в то время как переменная name
имеет область действия функции. Поэтому мы не можем получить доступ к переменной вне функции. Если мы попытаемся получить доступ к имени вне функции, мы получим ошибку ссылки: name is not defined
.
var message = 'Hello '; function greet(){ var name = 'John Smith'; } console.log(name);
Переменная может быть повторно объявлена и/или обновлена до других значений, что означает, что мы можем объявить одну и ту же переменную в той же области, и мы не получим ошибку, описанную выше.
Подъем — это концепция, при которой объявления переменных и функций перемещаются в верхнюю часть своей области видимости перед выполнением кода.
Например:
console.log(message); var message = "hello there";
Будет интерпретироваться как:
var message; console.log(message); // undefined message = "hello there";
Поэтому наша переменная message
поднимается на вершину их области видимости и инициализируется как неопределенная.
Ключевое слово пусть
Является улучшением по сравнению с var
, потому что решает проблему с проблемами области видимости var
.
let message = 'Hello everyone '; let count = 10; if(count > 5){ let altMessage = 'Say hi instead'; console.log(altMessage); } console.log(altMessage); // altMessage is not defined
Ключевое слово let
ограничено блоками. Это означает, что он ограничен блоком кода, таким как фигурные скобки {}
. Следовательно, переменная, объявленная с помощью let
в блоке кода, находится в пределах этого блока.
В приведенном выше примере, когда мы пытаемся console.log(altMessage);
вне оператора if, возвращается ошибка. Подобно var
, let
можно обновить, но нельзя повторно объявить в той же области.
let message = "hello"; message = "hi"; console.log(message); // returns "hi"
Это вернет ошибку:
let message = "hello"; let message = "hi"; // error: identifier 'message' has already been declared
Однако если одна и та же переменная объявлена в разных областях, ошибки не возникает. Это связано с тем, что оба экземпляра переменной message
имеют разные области видимости.
let count = 20; if(count > 10){ let count = 10; console.log(count); // count = 10 } console.log(count); //count = 20
Подъем пусть
Аналогично var
ключевому слову let
объявления поднимаются. Разница в том, что в отличие от var
, который инициализируется как undefined
, let
не инициализируется. В результате, если мы попытаемся использовать переменную let
перед объявлением, мы получим reference error
.
Константа ключевого слова
const
переменные поддерживают постоянное значение. Объявления const
имеют некоторое сходство с declarations
, например область видимости блока. Доступ к ним можно получить только в той области блока, в которой они были объявлены. const
значения не могут быть обновлены или повторно объявлены. Пример ниже вернет ошибку:
const message = 'Hi everyone!'; message = 'Hi'; // TypeError: error assignment to const `message'
Подобно let
, если мы повторно объявим message
в той же области, мы получим ошибку:
const message = 'Hi everyone'; const message = 'Hello'; // identifier: 'message' has already been declared
Объекты, объявленные с использованием const
, ведут себя иначе. Хотя объект нельзя обновить, его свойства можно изменить.
const message = { msg: "Hello", date: "12/10/22" } // throws error: assignment to constant variable message = { msg: "hi", date: "10/02/12" } // acceptable message.msg = "hi";
Подъем Const
Подобно let
, объявления const
поднимаются наверх, но не инициализируются.
В заключение
- Объявления
var
имеют глобальную или локальную область действия, аlet
иconst
— область действия блока. var
объявления могут быть обновлены и переобъявлены в пределах его области действия.let
объявления могут быть обновлены, но не объявлены повторно.const
объявления не могут быть обновлены или переобъявлены.- Все объявления поднимаются наверх своей области видимости, но объявления
var
инициализируются с помощьюundefined
, аlet
иconst
— нет.
Спасибо за прочтение!