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;

Объем переменных

Когда мы обсуждаем область действия переменной, мы имеем в виду, где находится переменная и ее доступность для использования. Существует два типа областей видимости переменных:

  1. Глобальные: объявления, в которых переменная объявляется вне функции и доступна во всем окне.
  2. Локальные: объявления, в которых переменная объявлена ​​внутри функции и доступна только внутри этой функции.
// 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 — нет.

Спасибо за прочтение!