Статьи

Совет: как объявить переменные в JavaScript

Октябрь 6, 2018

Эта статья была рецензирована Марком Брауном и Мев-Раэлем . Спасибо всем рецензентам SitePoint за то, что сделали контент SitePoint как можно лучше!

При изучении JavaScript одной из основ является понимание того, как использовать переменные. Переменные являются контейнерами для значений всех возможных типов, например, число, строка или массив (см. Типы данных ). Каждая переменная получает имя, которое впоследствии может быть использовано внутри вашего приложения (например, для чтения его значения).

В этом кратком совете вы узнаете, как использовать переменные и различия между различными объявлениями.

Разница между декларацией, инициализацией и назначением

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

Блок-схема переменной жизненного цикла

  1. Объявление : переменная регистрируется с использованием заданного имени в соответствующей области (объяснено ниже — например, внутри функции).
  2. Инициализация : когда вы объявляете переменную, она автоматически инициализируется, что означает выделение памяти для переменной механизмом JavaScript.
  3. Назначение : это когда конкретное значение присваивается переменной.

Типы деклараций

Примечание : хотя varletconst Смотрите эту страницу для совместимости браузера.

вар

Синтаксис: 

 var x; // Declaration and initialization
x = "Hello World"; // Assignment

// Or all in one
var y = "Hello World";

Эта декларация, вероятно, самая популярная, так как альтернативы до ECMAScript 6 не было . Переменные, объявленные с помощью var Если нет включающей функции, они доступны глобально.

Пример: 

 function sayHello(){
  var hello = "Hello World";
  return hello;
}
console.log(hello);

Это приведет к ошибке ReferenceError: hello is not definedhellosayHello Но сработает следующее, так как переменная будет объявлена ​​глобально — в той же области видимости console.log(hello) 

 var hello = "Hello World";
function sayHello(){
  return hello;
}
console.log(hello);

позволять

Синтаксис: 

 let x; // Declaration and initialization
x = "Hello World"; // Assignment

// Or all in one
let y = "Hello World";

letvar Его область не только ограничена функцией включения, но также и его оператором включения блока. Оператор блока — это все внутри {} Преимущество let

Пример: 

 var name = "Peter";
if(name === "Peter"){
  let hello = "Hello Peter";
} else {
  let hello = "Hi";
}
console.log(hello);

Это приведет к ошибке ReferenceError: hello is not definedhelloif Но будет работать следующее: 

 var name = "Peter";
if(name === "Peter"){
  let hello = "Hello Peter";
  console.log(hello);
} else {
  let hello = "Hi";
  console.log(hello);
}

Const

Синтаксис: 

 const x = "Hello World";

Технически константа не является переменной. Особенность константы заключается в том, что вам необходимо присваивать значение при объявлении, и нет способа переназначить его. constlet

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

Случайное Глобальное Создание

Вы можете написать все вышеперечисленные объявления в глобальном контексте (т.е. вне какой-либо функции), но даже внутри функции, если вы забудете написать varletconst

Пример: 

 function sayHello(){
  hello = "Hello World";
  return hello;
}
sayHello();
console.log(hello);

Выше будет выводить Hello Worldhello =

Примечание: чтобы избежать случайного объявления глобальных переменных, вы можете использовать строгий режим .

Подъем и временная мертвая зона

Другое различие между varletconst Объявление переменной всегда будет внутренне подниматься (перемещаться) в верхнюю часть текущей области. Это означает следующее: 

 console.log(hello);
var hello;
hello = "I'm a variable";

эквивалентно: 

 var hello;
console.log(hello);
hello = "I'm a variable";

Признаком такого поведения является то, что оба примера будут регистрировать undefined Если var hello; не всегда был бы на вершине, это бросило бы ReferenceError

Такое поведение, называемое подъемом, применяется к varletconst Как упоминалось выше, доступ к переменной varundefined

Но доступ к переменной letconst Это связано с тем, что они не доступны до их объявления в коде. Период между вводом области видимости переменной и достижением ее объявления называется временной мертвой зоной, то есть периодом, в который переменная недоступна.

Подробнее о подъеме вы можете прочитать в статье « Демистификация области действия и подъема JavaScript» .

Вывод

Чтобы уменьшить подверженность ошибкам, вы должны использовать constlet Если вам действительно нужно использовать var

40
Share: