Разница между let, const и var проще всего с помощью Guarantee

В июне 2015 года была запущена 6-я версия ECMAScript, и это был самый большой переход javascript, который мы называем ES2015 или ES6. По ES6 есть множество руководств, но это будет самый простой учебник, если вы хотите перейти с ES5 на ES6. ES6.Мы будем практиковать каждую концепцию сначала в ES5, а затем изменим ее на ES6.

Это первая часть моей серии по изучению ES6 самым простым способом.

Гарантия

1. Просто потренируйтесь в каждом примере в редакторе кода, и в конце, если вы не поняли никакой концепции, я предложу бесплатный сеанс частной видеозвонки.

Объявление переменной с помощью let и const

Наконец, в ES6 мы можем объявлять переменные с помощью let и константы с помощью ключевых слов const. Переменные по имени должны иметь возможность изменять значения, а константы не должны позволять изменять значения.

//ES5
var x = 14;
x = 12;
console.log(x);//12
12;

из приведенного выше кода мы успешно изменили значение переменной с 14 на 12

//ES6
let x = 14;
x = 12;
console.log(x); //12

из приведенного выше кода мы успешно изменили значение переменной с 14 на 12

//ES6
const y = 14;
y = 12; //TypeError: Assignment to constant variable.
console.log(y);

Из приведенного выше кода с const, когда мы запускаем программу, получаем ошибку типа, что значение const не может быть изменено.

В данный момент вы думаете, что let и var равны, но они не равны, и на следующем шаге мы выясним, почему они не равны

Область действия let, const и var

Чтобы двигаться дальше, нам нужно понимать, что такое объявление и инициализация

var a   //declaration
a = 5   // initialization
let b //declaration 
b = 10  //initialization
var c = 5  //declaration plus initialization in one step
let d = 5  //declaration plus initialization in one step
const a ; // SyntaxError: Missing initializer in const declaration
a = 5;
console.log(a);
const a = 5
console.log(a) //5

1: when we start our variable with var, let is called declaration. e.g: var a; or let a;
2: when we start our variable and assigning value it is declaration and initialization with value
3: const cannot be declared only, you need to initialize it with declaration

В разделе «Область действия» мы будем различать var и let

Let and const have a block scope but var has function scope.

Если вы не поняли вышеприведенную строку, это нормально, мы поймем это ниже.

//ES5
function adult5(age) {
  if (age > 18) {
    var status = 'adult';
  }
  console.log(status); //adult
}
adult5(20);

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

Прежде чем двигаться вперед, блок в javascript должен быть заключен в круглые скобки, например {…}. Таким образом, один набор круглых скобок составляет один блок. пример блока ниже.

{
........
.......
.......
......
}

перейдем к важному моменту.

// ES6
function adult6(age) {
  if (age > 18) {
    let status = 'adult';
  }
  console.log(status); //ReferenceError: status is not defined
}
adult6(20);

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

До сих пор мы узнали

1: var and let can change their value and const cannot change its value
2: var can be accessible anywhere in function but let and const can only be   accessible inside the block where they are declared.

Теперь ты понимаешь, что

let and const have a block scope but var has function scope.

Давайте рассмотрим другой пример, чтобы лучше понять область действия блока и область действия функции.

Теперь приготовьтесь к вопросам на собеседовании

//ES5
var num = 10;
for (var num = 0; num < 3; num++) {
  console.log(num); //0 1 2
}
console.log(num); //3

в приведенном выше примере значение num вне цикла for равно 3, поэтому num имеет глобальную область видимости. если var определен вне функции, он имеет глобальную область видимости, поэтому к нему можно получить доступ в любом месте, поэтому внутри цикла for var num доступен, поэтому значение num изменяется, и когда мы console.log (num) вне цикла for, это значение изменяется.

//ES6
let num = 10;
for (let num = 0; num < 3; num++) {
  console.log(num); //0 1 2
}
console.log(num); //10

В приведенном выше примере, когда мы объявили num внутри цикла for с помощью let, тогда num внутри цикла for имеет совершенно другую область видимости, а num вне цикла for имеет другую область. Итак, это очень важный вопрос для собеседований.

Подъем с помощью let, const и var

Hoisting is a JavaScript mechanism where variables and function declarations are moved to the top of their scope before code execution

Если вы не поняли приведенный выше пример, это нормально.

У вас есть четкое представление о объявлении и инициализации переменных, о которых мы говорили выше.

//ES5
console.log(a); // undefined
var a = 5;

если вы запустите приведенный выше код, он выведет undefined, это означает, что он был объявлен, но не инициализирован

//ES6
console.log(a);  //ReferenceError: a is not defined
let a = 5;
and
console.log(a);  //ReferenceError: a is not defined
const a = 5;

let и const hoist, но вы не можете получить к ним доступ до того, как фактическое объявление будет оценено во время выполнения. Таким образом, в случае let и const вы не можете получить к ним доступ до объявления.

Более продвинутый с let и var

//ES5
for (var i = 0; i < 5; i++) {
  var btn = document.createElement('button');
  btn.appendChild(document.createTextNode('Button ' + i));
  btn.addEventListener('click', (function() {
     { console.log(i); };
  }));
  document.body.appendChild(btn);
}

Вопрос: какой будет результат при нажатии на кнопку 4?

Ответ: Ответ - 5, вы нажимаете любую кнопку, ответ - 5, потому что var имеет область действия или глобальную оценку, поэтому var i использует одно значение в каждом блоке цикла for.

for (let i = 0; i < 5; i++) {
  var btn = document.createElement('button');
  btn.appendChild(document.createTextNode('Button ' + i));
  btn.addEventListener('click', function(){ console.log(i); });
  document.body.appendChild(btn);
}

Вопрос: какой будет результат при нажатии на кнопку 4?

Ответ: Ответ 4, и вы нажимаете кнопку 0, ответ 0 и соответственно. let имеет область видимости блока, поэтому при каждом запуске цикла for изменяется блок, поэтому каждый блок имеет собственное значение i.

Результат ниже

1: var and let can change their value and const cannot change its value
2: var can be accessible anywhere in function but let and const can only be accessible inside the block where they are declared.
3: const cannot be declared only, you need to initialize it with declaration
4: let and const hoist but you cannot access them before the actual declaration is evaluated at runtime. So in case of let and const you cannot access them before declaration.