Переменные и константы в JavaScript
Добавить в избранное
Для хранения данных в программе используются переменные. Переменные предназначены для хранения каких-нибудь временных данных или таких данных, которые в процессе работы могут менять свое значение.
Объявление переменных
Для создания переменных применяются операторы var и let. Например, объявим переменную username:
Объявление переменной представляет отдельную инструкцию, поэтому завершается точкой с запятой.
Аналогичное определение переменной с помощью оператора let:
Каждая переменная имеет имя. Имя представляет собой произвольный набор алфавитно-цифровых символов, знака подчеркивания (_) или знака доллара ($), причем названия не должны начинаться с цифровых символов. То есть мы можем использовать в названии буквы, цифры, подчеркивание. Однако все остальные символы запрещены.
Например, правильные названия переменных:
someVariable
product_Store
income2
myIncome_from_deposit
Следующие названия являются некорректными и не могут использоваться:
@someVariable
my%percent
Также нельзя давать переменным такие имена, которые совпадают с зарезервированными ключевыми словами. В JavaScript не так много ключевых слов, поэтому данное правило не сложно соблюдать. Например, следующее название будет некорректным, так как for - ключевое слово в JavaScript:
Список зарезервированных слов в JavaScript:
abstract, arguments, await, boolean, break, byte, case, catch, char, class, const, continue, debugger, default, delete, do, double, else, enum, eval, export, extends, false, final, finally, float, for, function, goto, if, implements, import, in, instanceof, int, inteface, let, long, native, new, null, package, private, protected, public, return, short, static, super, switch, synchronized, this, throw, throws, transient, true, try, typeof, var, volatile, void, while, with, yield
С развитием JavaScript и принятием новых стандартов языка список ключевых слов может пополняться, однако в целом ключевых слов не так уж много.
При названии переменных надо учитывать, что JavaScript является регистрозависимым языком, то есть в следующем коде объявлены две разные переменные:
let userName;
Через запятую можно определить сразу несколько переменных:
let a, b, c;
Присвоение переменной значения
После определения переменной ей можно присвоить какое-либо значение. Для этого применяется оператор присваивания (=):
username = "Tom";
То есть в данном случае переменная username будет хранить строку "Tom". После присвоения переменной значения мы можем что-то сделать с этим значением, например, выведем его на консоль:
username = "Tom"; // Присвоение переменной значения
console.log(username); // Вывод значения переменной username на консоль
Можно сразу присвоить переменной значение при ее определении:
let userage = 37;
Процесс присвоения переменной начального значения называется инициализацией.
Отличительной чертой переменных является то, что мы можем изменить их значение:
console.log("username до изменения:", username);
username = "Bob";
console.log("username после изменения:", username);
Константы
С помощью ключевого слова const можно определить константу, которая, как и переменная, хранит значение, однако это значение не может быть изменено.
Если мы попробуем изменить ее значение, то мы столкнемся с ошибкой:
username = "Bob"; // ошибка, username - константа, поэтому мы не можем изменить ее значение
Также стоит отметить, что поскольку мы не можем изменить значение константы, то она должна быть инициализирована, то есть при ее определении мы должны предоставить ей начальное значение. Если мы этого не сделаем, то опять же мы столкнемся с ошибкой:
Когда использовать переменные, а когда константы? Если вы уверены, что значение в процессе программы не будет изменяться, тогда это значение определяется в виде константы. Если неизвестно, будет ли значение меняться или нет, то рекомендуется определить значение как константу. А в случае если в далее потребуется его изменить, то просто можно изменить определение значения с const на var/let.
Область видимости переменных
Все переменные и константы в JavaScript имеют определенную область видимости, в пределах которой они могут действовать.
Глобальные переменные
Все переменные и константы, которые объявлены вне функций, являются глобальными:
let b = 8;
const c = 9;
function displaySum(){
var d = a + b + c;
console.log(d);
}
displaySum(); // 22
Здесь переменные a и b и константа c являются глобальными. Они доступны из любого места программы.
А вот переменная d глобальной не является, так как она определена внутри функции и видна только в этой функции.
Определение локальной области видимости
Для определения локальной области видимости в JavaScript используются фигурные скобки { }, которые создают блок кода. Этот блок кода может быть безымянным, может быть именнованным, например, функция, либо может представлять условную или циклическую конструкцию. Например, определение переменных в безымянном блоке кода:
var a = 5;
let b = 8;
const c = 9;
}
Однако в этом случае поведение переменной зависит от способа ее определения (через var или через let) и от типа блока. var определяет локальные переменные уровня функции, а let определяет локальные переменные уровня блока кода (подобным образом constопределяет константы уровня блока кода). Рассмотрим, в чем состоит отличие.
Переменные и константы функции
Переменные и константы, определенные внутри функции, видны (то есть могут использоваться) только внутри этой функции:
var a = 5;
let b = 8;
const c = 9;
console.log("Function print: a =", a);
console.log("Function print: b =", b);
console.log("Function print: c =", c);
}
print();
console.log("Global: a =", a); // Uncaught ReferenceError: a is not defined
Переменные a и b и константа c являются локальными, они существуют только в пределах функции. Вне функции их нельзя использовать, поэтому мы получим следующий консольный вывод:
Function print: a= 5
Function print: b= 8
Function print: c= 9
Uncaught ReferenceError: a is not defined
Здесь мы видим, что при попытке обратиться к переменной a вне функции print(), браузер выводит ошибку. При этом подобное поведение не зависит от того, что это за переменная - var или let, либо это константа. Подобное поведение для всех переменных и констант одинаково.
Локальные переменные в блоках кода, условиях и циклах
С переменными, которые определяются в безымянных блоках кода, а также в циклах и условных конструкциях ситуация чуть сложнее.
Переменная var
Переменная, объявленная с помощью var, может использоваться вне блока:
{
var a = 5;
}
console.log("a =", a); // a = 5
// условная конструкция
if(true){
var b = 6;
}
console.log("b =", b); // b = 6
// цикл
for(var i = 0; i < 5; i++){ var c = 7; } console.log("c =", c); // c = 7
Единственное условие, что блок кода должен срабатывать, чтобы инициализировать переменную. Так, в примере выше условие в конструкции if и в цикле for установлено так, что блок этих конструкций будет выполняться. Однако, что если условие будет иным, что блок не будет выполняться?
var b = 6;
}
console.log("b =", b); // b = undefined
// цикл
for(var i = 1; i < 0; i++){ var c = 7; } console.log("c =", c); // c = undefined
В таком случае мы опять же сможем обращаться к переменным, только они будут иметь значение undefined.
Переменная let и константы
Теперь посмотрим, как будут вести себя в подобной ситуации переменные, определенные с помощью let:
let a = 5;
}
console.log("a =", a); // Uncaught ReferenceError: a is not defined
В данном случае мы получим ошибку. Мы можем использовать переменные let, определенные внутри блока кода, можно использовать только внутри этого блока кода.
Тоже самое относится и к константам:
const b = 5;
}
console.log("b =", b); // Uncaught ReferenceError: b is not defined
Сокрытие переменных
Что если у нас есть две переменных - одна глобальная, а другая локальная, которые имеют одинаковое имя:
function print(){
var z = 10;
console.log(z); // 10
}
print(); // 10
В этом случае в функции будет использоваться та переменная z, которая определена непосредственно в функции. То есть локальная переменная скроет глобальную. Однако конкретное поведение при сокрытии зависит от того, как определяется переменная.
Скрытие переменной var
Выше было указано, что var определяет переменную уровня функции. Поэтому с помощью оператора var мы НЕ можем определить одновременно переменную с одним и тем же именем и в функции, и в блоке кода в этой функции:
var z = 20;
{
var z = 30; // Ошибка ! Переменная z уже определена
console.log("Block:", z);
}
console.log("Function:", z);
}
То есть с помощью var мы можем определить переменную с одним именем либо на уровне функции, либо на уровне блока кода.
Скрытие переменной let
Как писалось выше, оператор let определяет переменную уровня блока кода. То есть каждый блок кода определяет новую область видимости, в которой существует переменная. Ве блока кода, где определена переменная, она не существует. Соответственно мы можем одновременно определить переменную на уровне блока и на уровне функции (в отличие от var):
function displayZ(){
let z = 20;
{
let z = 30;
console.log("Block:", z);
}
console.log("Function:", z);
}
displayZ();
console.log("Global:", z);
Здесь внутри функции displayZ определен блок кода, в котором определена переменная z (вместо безымянного блока это мог быть и блок условной конструкции или цикла). Она скрывает глобальную переменную и переменную z, определенную на уровне функции.
И в данном случае мы получим следующий консольный вывод:
Block: 30
Function: 20
Global: 10
Константы
Все, что относится к оператору let, относится и к оператору const, который определяет константы уровня блока кода. Блоки кода задают область видимости констант, а константы, определенные на вложенных блоках кода, скрывают внешние константы с тем же именем:
function displayZ(){
const z = 20;
{
const z = 30;
console.log("Block:", z); // 30
}
console.log("Function:", z); // 20
}
displayZ();
console.log("Global:", z); // 10
Необъявленные переменные
Если мы не используем это ключевое слово при определении переменной в функции, то такая переменная будет глобальной. Например:
foo = "25";
}
bar();
console.log(foo); // 25
Несмотря на то, что вне функции bar переменная foo нигде не определяется, тем не менее она доступна вне функции во внешнем контексте. Единственное условие - мы вызываем функцию, где определена такая переменная.
Однако если мы не вызовем функцию, переменная будет не определена:
foo = "25";
}
// bar(); Функция НЕ вызывается
console.log(foo); // ошибка - Uncaught ReferenceError: foo is not defined
Ту же ошибку мы получили бы, если бы мы не только присваивали значение переменной, но и определяли бы ее:
var foo = "25";
}
bar();
console.log(foo); // ошибка - Uncaught ReferenceError: foo is not defined
strict mode
Определение глобальных переменных в функциях может вести к потенциальным ошибкам. Чтобы их избежать используется строгий режим или strict mode:
function bar(){
foo = "25"; // Uncaught ReferenceError: foo is not defined
}
bar();
console.log(foo);
В этом случае мы получим ошибку SyntaxError: Unexpected identifier, которая говорит о том, что переменная foo не определена.
Установить режим strict mode можно двумя способами:
• добавить выражение "use strict" в начало кода JavaScript, тогда strict mode будет применяться для всего кода
• добавить выражение "use strict" в начало тела функции, тогда strict mode будет применяться только для этой функции. Пример использования на уровне функции:
"use strict";
foo = "25";
}
Статья взята с сайта: