понедельник, 12 августа 2019 г.

1. Объявления

Объявления переменных, функций и объектов в JavaScript до стандарта ES6 (ES2015) обеспечивало ключевое слово var:
var a, b;
var c = 'string';
var fn = function() {
  var local = 0;
  return a * local + b;
}
var obj = {
  var name = 'Ivan';
  var age = 25;
}

С выходом стандарта ES6 (ES2015) использование var стало не желательным (но не запрещенным), а вместо него предлагается использовать ключевые слова let или const:
let a, b;
const c = 'string';
let fn = function() {
  let local = 0;
  return a * local + b;
}
const obj = {
  let name = 'Ivan';
  let age = 25;
}

Кратко:
Переменная, объявленная с помощью var, имеет область видимости функции.
Переменная, объявленная с помощью let (const), имеет область видимости блока.
Глобальные переменные, созданные с помощью var, добавляются, как свойства, к DOM-объекту window.
Область видимости Можно обновить значение Можно переобъявить
var функция да да
let блок да нет
const блок нет нет


Отличия подробнее:
  1. Область видимости
    ключевое слово:
    var let const
    добавление к объекту window
    YES NO NO
    область видимости функции
    YES YES YES
    область видимости блока
    NO YES YES
    может ли быть переназначена
    YES YES NO
    var   userId = 3;
    let   postId = 200;
    const siteId = 4;
    
    console.log(window.userId);  // 3
    console.log(window.postId);  // undefined
    console.log(window.siteId);  // undefined
    function getIds() {
      var   userId = 3;
      let   postId = 200;
      const siteId = 4;
    }
    
    console.log(userId);  // Error, is not defined
    console.log(postId);  // Error, is not defined
    console.log(siteId);  // Error, is not defined
    {
      var   userId = 3;
      let   postId = 200;
      const siteId = 4;
    
      console.log(userId);  // 3
      console.log(postId);  // 200
      console.log(siteId);  // 4
    }
    
    console.log(userId);  // 3
    console.log(postId);  // Error, is not defined
    console.log(siteId);  // Error, is not defined
    const post = {},
          ids = [1, 2, 3],
          a = 1;
    
    post = "Hello World!";       // Error, assignment to constant variable
    post.title = "Hello World!"; // Allowed. Adds new field "title"
    ids = [7, 8, 9];             // Error, assignment to constant variable
    ids.push(4);                 // Allowed
    a++;                         // Error, assignment to constant variable

  2. Переменная, объявленная с помощью ключевого слова var
    - вне функции имеет глобальную область видимости;
    - в случае использования JS-кода для работы с браузером такая переменная становится полем объекта window;
    - применяется "всплытие" ("поднятие") - если в некоторой области видимости объявляют переменную с помощью var, JavaScript резервирует место для неё ещё до того, как будет выполнена команда с её участием.
  3. Переменная, объявленная с помощью ключевого слова let
    - более ограниченная область видимости, по сравнению с переменной, объявленной с помощью var;
    - не применяется "всплытие" - переменную необходимо объявлять до использования.
  4. Переменная, объявленная с помощью ключевого слова const, аналогична переменной, объявленной с помощью let, за одним исключением - её значение нельзя менять.
    При этом, если переменная содержит объект, то нельзя заменять объект, на который указывает эта переменная, а изменение содержимого объекта - допускается.
Использование "строго режима" ("use strict") добавляет особенностей при работе с переменными.

Вывод:
Для объявления переменных используйте по-умолчанию ключевое слово const, в противном случае, если необходимо, let. Используйте var только, если в этом действительно есть необходимость, и Вы понимаете, что делаете.

Источники:
  1. var, let или const? Проблемы областей видимости переменных и ES6;
  2. Ключевые слова var, let и const

Комментариев нет:

Отправить комментарий