Js переменные. JavaScript переменные

Честно сказать я с начала не хотел вводить эту тему. Что можно говорить о переменных, особенно в JavaScript? Но потом вспомнил, как иногда разбирался со сложными конструкциями и с трудом понимал некоторые, казалось бы недопустимые в других языках программирования выражения. Можно сказать так: здесь вам не будет ошибки "Неверный тип данных", а если и будет то очень редко. Если вы работали с другими языками программирования, тогда вспомните как часто у вас возникала ошибка о неверных типах данных. В языке JavaScript тип данных может с легкостью переопределяться, при этом вы можете и не заметить в каком месте, - вот в этом то и сложность. С другой стороны, если вы будете хорошо ориентироваться в принципах преобразований типов, знать все свойства переменных и массивов, эти возможности только принесут вам уверенность в написании программ.

Переменные языка JavaScript могут хранить значения различных типов:

• Строки - последовательность символов;
• Числовые значения- целые и действительные числа;
• Булевы значения- только два значения true или false;
• Массивы- множества однотипных переменных;
• Даты- значения даты и времени.

Время жизни переменной связано с окном, в котором они созданы и зависит от того, где они определены. JavaScript- программы содержатся в документах HTML, и при загрузке нового документа в браузер любые переменные, созданные в программе, будут удалены.
Чтобы сохранить какие-либо значения при загрузке нового документа в JavaScript имеются только 2 решения:

• путем создания переменных во фреймосодержащем документе верхнего уровня;
• путем использования "cookies";

Для сохранения переменных и функций с помощью фреймосодержащих документов эти переменные и функции неодходимо определить в документе верхнего уровня, а затем использовать свойства parent или top объекта window для обращения к ним из документов, загруженных в фреймы. ВАЖНО: такие переменные и функции нужно задавать в заголовке документа верхнего уровня между тегами . . . . Конечно, существует вероятность, что документ может быть загружен без фрейма и тогда обращение к неопределенному объекту вызовет ошибку, но можно предварительно проверить загружен ли документ в фрейм:

Cookies позволяют сохранять небольшие фрагменты информации на локальном диске пользователя. Устанавливая значения cookies и прореряя их на последующих стадиях работы, иожно восстанавливать необходимые значения. Более подробно о cookies будем говорить позже.

Имена переменных, создание переменных

В языке JavaScript создать переменную гораздо проще, чем в других языках программирования. Например, при создании переменной нет необходимости указывать ее тип. Переменные определяют как с начальными значениями, так и без них. В процессе выполнения программы уже созданные переменные можно даже приводить к различным типам данных. Имена переменных могут начинаться с любой буквы (от a до z, или A-Z) либо с символа подчеркивания (_), оставшаяся часть может содержать цифры, символы подчеркивания и буквы. Помните то, что в именах переменных различаются символы верхнего и нижнего регистра: например MyVariable - это не то же что myvariable.
Переменную можно создать одним из способов:

• при помощи оператора var и операции присваивания (=);
• при помощи операции присваивания (=).

Оператор Var используют не только для создания переменной, но и для ее инициализации. Операция присваивания (=) необходима, чтобы запомнить в переменной значение, и при работе с переменными, созданными без начального значения, ее использовать не обязательно. Например:

Var MyVariable = 35

Создает переменную с именем MyVariable, содержащую числовое значение 35. Переменная существует до тех пор, пока загружен текущий документ. Если вы создаете эту переменную во фреймосодержащем документе верхнего уровня, к ней следует обращаться с помощью выражения top.MyVariable, а еще лучше parent.MyVariable для подстраховки от вложенных фреймов.

В языке JavaScript переменные можно переопределять, даже задавая другой тип данных. Например после выполнения оператора

Var MyVariable = "35"

Переменная будет уже хранить строку "35". Подобные преобразования-то и приводят иногда к недоразумениям. Вот например:

Как вы думаете какое значение примет переменная "c" после выполнения программы? Если вы не знакомы с правилами преобразования переменных в JavaScript - не угадаете. Значение переменной "c" после завершения блока будет равным числовому значению 320. О принципах преобразования типов переменных будем говорить позже. Переменную можно определить и не используя оператор "Var", а просто достаточно присвоить значение, причем каков тип данных будет присвоен, того типа и окажется переменная. Оператор "Var" используется по большей части для читабельности JS-программы. Переменная может быть задана и без начальных значений, например:

Var MyVariable;

Создана переменная с именем MyVariable, не имеющая определенного типа данных и начального значения. Переменные, создаваемые при помощи таких описаний, известны как неопределенные (null variable). Например сравнивая такую переменную со значением null, можно узнать, определена ли переменная. Однако нельзя путать разные вещи: ""- пустая строка это строковый тип и вовсе не null-значение.

Тип переменной может быть установлен в любом месте JS-программы в отличие от других языков программирования, что дает дополнительную гибкость, но и возможность запутаться - помните это. К переменной, которая не создана, обратиться невозможно. Если нужно создать временную переменную, например счетчик цикла, нужно записать перед ней префикс var:
for (var i=0; i "10"); Самым простым и наиболее распространенным способом создания объекта String является использование таких операторов, как

Var myVariable = "Хорошее пиво";

Приведенный оператор присваивает строку "Хорошее пиво" строковой переменной myVariable. Переменная myVariable рассматривается как строковый объект и может использовать любой из стандартных методов объекта String языка JavaScript. Оператор Var можно пропустить, как и говорилось ранее он нужен в основном для читабельности программы.

Для создания строковых объектов допускается использовать конструктор String() с оператором new. В действительности объект String не относится к языку JavaScript, а является встроенным объектом браузера главным образом потому, что строки создаются тогда, когда пользователь в них нуждается. Рассмотрим пример:

Var myVariable = new String();

Этот оператор создает новый объект - пустую строку с именем myVariable. Изначально это пустая строка (""), а значение свойства myVariable.length равное 0.

Конструктор String() допускает передачу заданной строки в виде аргумента:

Var myVariable = new String("Правильное пиво");

Строковый объект может содержать специальные символы, управляющие форматированием строк:

• \n - символ новой строки;
• \r - символ возврата каретки;
• \f - код перехода на новую страницу;
• \xnn - представление символа в виде шестнадцатиричного ASCII-кода nn;
• \b - код клавиши .

эти символы будут правильно интерпретированы только в контейнерах и в методах "Alert". Форматирование же для document.write() осуществяется другими методами или тегами HTML.
Объект String имеет только одно свойство - length, значением которого является количество символов в строке, содержащейся в объекте. Методы объекта String можно разделить на две категории:

• методы форматирования HTML-документа;
• методы обработки строк.

Методы форматирования документа применяются для вывода строк в документ, а методы управления строками - для проверки и изменения содержимого объекта String.
Приведем перечень методов: (буква Ф - методы форматирования, а буква У - управления строками)

Метод		Описание
anchor()	У	Создает именованную метку, т.е. тег из содержимого объекта
big()	Ф	Заключает строку в контейнер . . . , для отображения крупным шрифтом
blink()	Ф	Заключает строку в контейнер . . . , чтобы она отображалась мигающей.
bold()	Ф	Заключает строку в контейнер . . . , чтобы она отображалась жирным шрифтом.
charAt()	У	Возвращает символ, находящийся в заданной позиции строки
fixsed()	Ф	Заключает строку в контейнер . . . , чтобы она отображалась шрифтом постоянной ширины.
fontcolor()	Ф	Заключает строку в контейнер . . . , чтобы она отображалась определенным цветом.
fontsize()	Ф	Заключает строку в контейнер . . . , чтобы она отображалась шрифтом определенного размера.
IndexOf()	У	Возвращает индекс первого заданного символа, найденного в строке.
italics()	Ф	Заключает строку в контейнер . . . , чтобы она отображалась курсивом.
lastIndexOf()	У	Возвращает индекс последнего заданного символа, найденного в строке.
link()	У	Создает тег гиперсвязи . . . и помещает в него содержимое объекта
small()	Ф	Заключает строку в тег . . . , чтобы она отображалась шрифтом меньшего размера.
strike()	Ф	Заключает строку в контейнер . . . , чтобы она отображалась зачеркнутой.
sub()	Ф	Заключает строку в контейнер . . . , чтобы она отображалась как нижний индекс.
substring()	У	Возвращает подстроку текстовой строки.
sup()	Ф	Заключает строку в контейнер . . . , чтобы она отображалась как верхний индекс.
toLowerCase()	У	Преобразует все буквы строки в строчные
toUpperCase()	У	Преобразует все буквы строки в прописные

Числовые переменные

Числовые значения могут быть либо целыми, либо числами с плавающей точкой. Числа с плавающей точкой называют действительными или вещественными. К числовым значениям применимы операции:

• умножения (*);
• деления (/);
• сложения (+);
• вычитания (-);
• увеличения (++);
• уменьшения (--);

Кроме того, используют операции умножения, деления, сложения и вычитания в сочетании с присваиванием (*=, /=, +=, -=), а также методы объекта Math.

Булевы переменные

Булевы, или логические, переменные содержат только литеральные значкения - true и false - и используются в логических выражениях и операторах.
Для проверки значения булевой переменной используют и операцию логического равенства:
booleanVar == true
хотя в данном случае такая операция проверки излишняя. Для проверки значений, которые не являются истинными, используют знак логического отрицания (!). Например, выражение!booleanVar возвратит значение true, если значение booleanVar равно false. Вместо слов "true" и "false" можно использовать числовые значения "1" и "2", поскольку именно такбулевы значения представлены в памяти компьютера: 1==true и 0==false.

Переменные-массивы

Переменные-массивы содержат упорядоченные наборы значений одного типа, для удобства представленные в виде одной переменной. Многие стандартные объекты-свойства документа в языке JavaScript, в частности гиперсвязи и метки, являются массивами. В языке JavaScript к элементу массива следует обращаться при помощи выражения:

ArrayName

Где arrayName - имя массива, а index - числовая переменная или число, задающее позицию элемента в массиве. Например, arrayName является первым элементом этого массива. Индексы элементов массива в языке JavaScript начинаются с нуля. Элементы массива могут быть любого типа, например строками или булевыми переменными. Кроме того, при определенных условиях массив может содержать элементы различных типов данных. В языке JavaScript массивы создаются при помощи:

• конструктора Array();
• конструктора Object();
• конструктора, определенного пользователем.

С помощью конструктора Array() не только создают объект array, но и присваивают начальные значения его элементам. Существует возможность добавлять элементы в массивдинамически - путем присваивания определенных значений элементам массива. Допускается также "пропускать" элементы массива и задавать их в любой последовательности. Для создания нового экземпляра объекта array конструктор Array() необходимо использовать с оператором new. Например, в седующем примере создается массив с именем arrayImg, содержащий два элемента, каждый из которых является объектом String

Var path = "c:/images/" ,
arrayImg = new Array();
arrayImg = path+"img1.gif";
arrayImg = path+"img2.gif";

При использовании конструктора Array() значение свойства length устанавливается автоматически. Поэтому после инициализации элементов массива в приведенном примере выражение arrayImg.length возвращает значение 2. Элементы массива также могут быть заданы как параметры конструктора:

Var path = "c:/images/" ,
arrayImg = new Array(path+"img1.gif", path+"img2.gif");

Данное выражение представляет собой сокращенную запись предыдущего примера.
В языке JavaScript можно создавать массив, это массив в котором элементы имеют различный тип данных:

Var myArray = new Array(3.14, true, 85, date(), "word");

Создает массив, элемент myArray которого является числом с плавающей запятой, элемент myArray - булевым значением, элемент myArray - объектом Date.
Размер массива и, следовательно, значение свойства length объекта, создаваемого конструктором Array(), зависят от максимального значения индекса, который применялся для задания элемента массива. Например:

Var myArray = new Array;
myArray = "Это 21 элемент массива";

Двадцать первому элементу массива присваивается строковое значение "Это 21 элемент массива", а значение свойства myArray.length равно 21 независимо от того имеют ли значения элементы массива с индексом меньше 20.
Значение свойства length объекта Array автоматически устанавливается при явном указании количества элементов в конструкторе Array():

MyArray = new Array(10);

Оператор создает массив из 10-ти элементов от 0 до 9. Значение свойства length массива нельзя установить путем присваивания, так как length является свойством только для чтения. Например, чтобы задать значение 10 для свойства length нужно только определить значение последнего, в данном случае 9-го элемента массива:

MyArray = new Array();
myArray = 0;

Кроме того, существует возможность задать значения элементов массива при его конструировании:

MyArray = new Array(0,0,0,0,0,0);

Конструктор Object()

Понятия объект и массив равнозначны, хотя конструкторы Object() и Array() работают по-разному. Конструктору Object() невозможно передать несколько элементов массива, поэтому такое выражение
var myObj = new Object(value1, value2);
работать не будет. Массивы, создаваемые при помощи конструктора Object(), не имеют свойства length. Поэтому, создавая массив таким способом, следует либо организовывать обход этого массива посредством цикла for и подсчитать элементы массива, либо жестко задать длину массива как значение его первого элемента (обычно так поступают моделируя свойство length), а затем обращаться к нему по мере необходимости для проверки размера массива, увеличение значения при добавлении нового элемента, а также в качестве параметра цикла при циклическом считывании или изменения значений элементов. Такой объект часто бывает неприемлем для случаев, когда содержимое массива должно динамически изменяться, поэтому в большинстве случаев пользуются конструктором Array(). Значения индексов массивов, создаваемых в конструкторе Object(), также начинаются с нуля. Для создания массива при помощи конструктора Object() принято использовать запись вида:

Var myObj = new Object();
myObj = 2; // задаем размерность массива
myObj = "Первый элемент";
myObj = "Второй элемент";

Чтобы узнать размер массива, созданного подобным образом, необходимо обратиться к элементу myObj. Значением свойства myObj.length является null, так, как значение не определено.

Преобразование строк и чисел

Наконец подошли к самой интересной теме. Дело в том, что в языке JavaScript в отличие от других языков нет функций типа Val() и Str(). Однажды я видел программку на языке JavaScript, автора не буду называть, где при помощи всевозможных преобразований типов данных была попытка запутать программу для "непродвинутых" пользователей. Так вот, нужно запомнить два правила:

• Преобразование числа в строку символов производится путем сложение числового аргумента со строковым, независимо от перестановки слагаемых. Например если переменная varI=123, то преобразовать переменную и следовательно ее значение в строку символов можно: varI = varI + "" или наоборот: varI = "" + varI. Если сложить не с пустой строкой: varI = varI + "456", то результатом значения переменной varI станет "123456". Это же справедливо и наоборот: varI = "456" + varI - результат: "456123";
• Преобразование строки в число производится путем вычитания одного операнда из другого и также независимо от их позиции. Например если переменная varI = "123", то преобразовать ее в число можно если вычесть из нее значения 0: varI = varI - 0, и соответственно значение переменной из строкового типа преобразуется в числовой: 123. При перестановки операндов соответственно знак числового значения поменяется на противоположный. В отличие от преобразования числа в строку в действиях вычитания нельзя применять буквенные значения. Так если "JavaScript" + 10 превратится в varI == "JavaScript10", то операция типа varI = "JavaScript" - 10 выдаст значение "NON" - тоесть такая операция не допустима. И еще, при вычитании строкового значения из строкового же также происходит преобразование: varI = "20" - "15", значением переменной varI станет число 5.

Переменная – это просто символьное имя для значения. Переменная даёт возможность обратиться к значению по имени, это означает, что, когда в программе указывается имя переменной, вместо неё подставляется значение.

Объявление

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

Var num; let num2;

Один раз использовав ключевое слово var или let , можно объявить несколько переменных, перечислив их через запятую:

Var num, num2; let num3, num4;

Инициализация и присваивание значения

Объявление переменных можно совмещать с их инициализацией. Инициализация - это присвоение начального значения переменной. Присвоить какое-либо значение переменной можно с помощью оператора присваивания , который обозначается символом равно (= ):

Var color = "чёрный"; let num = 10, num2 = 15;

Переменные в JavaScript не имеют типа, поэтому переменной может быть присвоено значение любого типа, а затем этой же переменной может быть присвоено значение другого типа:

Var a = 10; let b = 20; a = "текст"; b = "текст";

Если при объявлении переменной ей не было присвоено никакого значения, она будет иметь специальное значение undefined , до тех пор, пока ей не будет присвоено другое значение:

Var a; let b; console.log(a); // undefined console.log(b); // undefined

Обращение к значению

После того как переменная объявлена ключевое слово var или let при использовании переменной указывать не нужно. Чтобы в программе обратиться к значению переменной, надо просто написать имя переменной, интерпретатор JavaScript вместо неё подставит значение, которое хранится в переменной:

Var x = 10, msg = "Hello"; alert(x); document.write(msg); Попробовать »

Так как вместо имени переменной подставляется её значение, можно копировать значение из одной переменной в другую:

Var a = 10; let b; b = a; // Тоже самое, что и b = 10;

Если попытаться использовать необъявленную переменную, будет вызвана ошибка:

Console.log(x); // Ошибка

The var statement declares a variable, optionally initializing it to a value.

The source for this interactive example is stored in a GitHub repository. If you"d like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

Syntax var varname1 [ = value1] [ , varname2 [ = value2] ... [ , varnameN [ = valueN]]] ; varnameN Variable name. It can be any legal identifier. valueN Initial value of the variable. It can be any legal expression. Default value is undefined . Description

var declarations, wherever they occur, are processed before any code is executed. This is called hoisting, and is discussed further below.

The scope of a variable declared with var is its current execution context , which is either the enclosing function or, for variables declared outside any function, global. If you re-declare a JavaScript variable, it will not lose its value.

Assigning a value to an undeclared variable implicitly creates it as a global variable (it becomes a property of the global object) when the assignment is executed. The differences between declared and undeclared variables are:

1. Declared variables are constrained in the execution context in which they are declared. Undeclared variables are always global.

Function x() { y = 1; // Throws a ReferenceError in strict mode. var z = 2; } x(); console.log(y); // 1 console.log(z); // Throws a ReferenceError: z is not defined outside x.

2. Declared variables are created before any code is executed. Undeclared variables do not exist until the code assigning to them is executed.

Console.log(a); // "undefined" or "" depending on browser console.log("still going..."); // still going... var a = 1; console.log(a); // 1 console.log("still going..."); // still going...

3. Declared variables are a non-configurable property of their execution context (function or global). Undeclared variables are configurable (e.g. can be deleted).

Var a = 1; b = 2; delete this.a; // Throws a TypeError in strict mode. Fails silently otherwise. delete this.b; console.log(a, b); // Throws a ReferenceError. // The "b" property was deleted and no longer exists.

Because of these three differences, failure to declare variables will very likely lead to unexpected results. Thus it is recommended to always declare variables, regardless of whether they are in a function or global scope. And in ECMAScript 5 strict mode , assigning to an undeclared variable throws an error.

var hoisting

Because variable declarations (and declarations in general) are processed before any code is executed, declaring a variable anywhere in the code is equivalent to declaring it at the top. This also means that a variable can appear to be used before it"s declared. This behavior is called "hoisting", as it appears that the variable declaration is moved to the top of the function or global code.

Bla = 2; var bla; // ...is implicitly understood as: var bla; bla = 2;

For that reason, it is recommended to always declare variables at the top of their scope (the top of global code and the top of function code) so it"s clear which variables are function scoped (local) and which are resolved on the scope chain.

It"s important to point out that the hoisting will affect the variable declaration, but not its value"s initialization. The value will be indeed assigned when the assignment statement is reached:

Function do_something() { console.log(bar); // undefined var bar = 111; console.log(bar); // 111 } // ...is implicitly understood as: function do_something() { var bar; console.log(bar); // undefined bar = 111; console.log(bar); // 111 }

Examples Declaring and initializing two variables var a = 0, b = 0; Assigning two variables with single string value var a = "A"; var b = a; // ...is equivalent to: var a, b = a = "A";

Be mindful of the order:

Var x = y, y = "A"; console.log(x + y); // undefinedA

Here, x and y are declared before any code is executed, but the assignments occur later. At the time " x = y " is evaluated, y exists so no ReferenceError is thrown and its value is undefined . So, x is assigned the undefined value. Then, y is assigned the value "A" . Consequently, after the first line, x === undefined && y === "A" , hence the result.

Initialization of several variables var x = 0; function f() { var x = y = 1; // Declares x locally; declares y globally. } f(); console.log(x, y); // 0 1 // In non-strict mode: // x is the global one as expected; // y is leaked outside of the function, though!

The same example as above but with a strict mode:

"use strict"; var x = 0; function f() { var x = y = 1; // Throws a ReferenceError in strict mode. } f(); console.log(x, y);

Implicit globals and outer function scope

Variables that appear to be implicit globals may be references to variables in an outer function scope:

Var x = 0; // Declares x within file scope, then assigns it a value of 0. console.log(typeof z); // "undefined", since z doesn"t exist yet function a() { var y = 2; // Declares y within scope of function a, then assigns it a value of 2. console.log(x, y); // 0 2 function b() { x = 3; // Assigns 3 to existing file scoped x. y = 4; // Assigns 4 to existing outer y. z = 5; // Creates a new global variable z, and assigns it a value of 5. // (Throws a ReferenceError in strict mode.) } b(); // Creates z as a global variable. console.log(x, y, z); // 3 4 5 } a(); // Also calls b. console.log(x, z); // 3 5 console.log(typeof y); // "undefined", as y is local to function a

Specifications Specification Status Comment

ECMAScript 1st Edition (ECMA-262)	Standard	Initial definition. Implemented in JavaScript 1.0
ECMAScript 5.1 (ECMA-262) The definition of "var statement" in that specification.	Standard
ECMAScript 2015 (6th Edition, ECMA-262)	Standard
ECMAScript Latest Draft (ECMA-262) The definition of "variable statement" in that specification.	Draft

Browser compatibility

The compatibility table on this page is generated from structured data. If you"d like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

Update compatibility data on GitHub

Desktop Mobile Server Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet Node.js var

Chrome Full support 1

Edge Full support 12

Firefox Full support 1

IE Full support 3

Opera Full support Yes

Safari Full support Yes

WebView Android Full support 1

Chrome Android Full support 18

Firefox Android Full support 4

Opera Android Full support Yes

Safari iOS Full support Yes

Samsung Internet Android Full support 1.0

nodejs Full support Yes

Переменные – фундаментальная составляющая многих языков программирования; они являются одним из наиболее важных понятий для начинающих программистов. В JavaScript существует множество различных свойств переменных, а также несколько правил, которые необходимо соблюдать при их именовании. В JavaScript есть три ключевых слова, используемые для объявления переменной — var, let и const — и каждое из них влияет на то, как будет интерпретироваться переменная в коде.

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

Что такое переменные

Переменная — это именованный фрагмент памяти, используемый для хранения разных значений. Часть информации, на которую можно сослаться несколько раз, может быть сохранена в переменной для последующего использования или модификации. В JavaScript значение, содержащееся внутри переменной, может быть любым типом данных, включая число, строку или объект.

До спецификации языка ECMAScript 2015 (ES6) , на котором основан JavaScript в данный момент, существовал только один способ объявить переменную – с использованием ключевого слова var. Потому большинство старых кодов и мануалов используют для объявления переменных только var. Давайте рассмотрим различия между var, let и const.

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

// Assign the string value 8host to the username identifier
var username = "8host_blog";

Это выражение состоит из нескольких частей:

• Объявление переменной с помощью ключевого слова var;
• Имя переменной (или идентификатор), username;
• Операция присваивания, представленная синтаксисом =;
• Присваиваемое значение, «8host_blog».

Теперь можно использовать переменную username в коде. JavaScript запомнит, что username представляет значение 8host_blog.

// Check if variable is equal to value
if (username === "8host_blog") {
console.log(true);
}
true

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

// Assignment of various variables
var name = "Morty";
var spartans = 300;
var kingdoms = [ "mammals", "birds", "fish" ];
var poem = { roses: "red", violets: "blue" };
var success = true;
var nothing = null;

С помощью console.log можно просмотреть значение любой переменной:

// Send spartans variable to the console
console.log(spartans);
300

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

// Assign value to password variable
var password = "hunter2";
// Reassign variable value with a new value
password = "hunter3";
console.log(password);
"hunter3"

В реальной программе пароль, скорее всего, будет надежно сохранен в базе данных. Однако этот простой пример иллюстрирует ситуацию, в которой вы можете обновить значение переменной. Значение переменной password было hunter2, но ей было присвоено новое значение, hunter3, и теперь JavaScript будет использовать новое значение.

Именование переменных

В JavaScript имена переменных называются идентификаторами. Несколько правил именования идентификаторов можно найти в мануале . Вот они вкратце:

• Имена переменных могут состоять только из букв, цифр (0-9), символа доллара ($) и подчеркивания (_).
• Имена переменных не могут содержать пробельные символы.
• Имя переменной не должно начинаться с числа.
• Существует несколько зарезервированных ключевых слов , которые нельзя использовать как имена переменных.
• Имена переменных чувствительны к регистру.

JavaScript также имеет соглашение об использовании верблюжьего регистра (camelCase) в именах функций и переменных, объявленных с помощью var или let. При этом первое слово пишется в нижнем регистре, а каждое следующее слово начинается с заглавной буквы (слова пишутся без пробелов между ними). Большинство переменных, которые не являются константами, будут следовать этому соглашению, за некоторыми исключениями. Имена переменных, которые являются константами (объявлены ключевым словом const), обычно записываются в верхнем регистре.

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

Разница между var, let и const

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

Возможно, вам интересно, какое из трех ключевых слов вы должны использовать в своих программах. Принято использовать const как можно чаще, а let – в циклах и для переназначения. Как правило, var используется в устаревшем коде.

Область видимости JavaScript

Область видимости в JavaScript относится к текущему контексту кода, который определяет доступность переменных. Область бывает локальной и глобальной:

• Глобальные переменные – это те, которые объявлены вне блока.
• Локальные переменные – это те, которые объявлены внутри блока.

В приведенном ниже примере мы создадим глобальную переменную.

var creature = "wolf";

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

В приведенном ниже примере создается глобальная переменная species. Внутри функции есть локальная переменная с тем же именем. Отправляя их в консоль, вы увидите, что значение переменной отличается в зависимости от области действия, а исходное значение не изменяется.

// Initialize a global variable
var species = "human";
function transform() {
// Initialize a local, function-scoped variable
var species = "werewolf";
console.log(species);
}
// Log the global and local variable
console.log(species);
transform();
console.log(species);
human
werewolf
human

В этом примере локальная переменная имеет область видимости на уровне функции. Переменные, объявленные ключевым словом var, всегда относятся к этой области (то есть они распознают функции как имеющие отдельную область). Таким образом, локальная переменная недоступна в глобальной области.

Однако новые ключевые слова let и const относятся к области на уровне блока. Это означает, что новая локальная область создается из любого блока, включая функциональные блоки, операторы if, а также циклы for и while.

Чтобы проиллюстрировать разницу между переменными на уровне функции и блока, создайте новую переменную в блоке if с помощью let.

var fullMoon = true;
// Initialize a global variable
let species = "human";
if (fullMoon) {
// Initialize a block-scoped variable
let species = "werewolf";

}


It is not a full moon. Lupin is currently a human.

В этом примере переменная species имеет одно глобальное значение (human) и одно локальное значение (werewolf). Однако если использовать var, будет другой результат.

// Use var to initialize a variable
var species = "human";
if (fullMoon) {
// Attempt to create a new variable in a block
var species = "werewolf";
console.log(`It is a full moon. Lupin is currently a ${species}.`);
}
console.log(`It is not a full moon. Lupin is currently a ${species}.`);
It is a full moon. Lupin is currently a werewolf.
It is not a full moon. Lupin is currently a werewolf.

В результате как глобальная переменная, так и переменная на уровне блока выдают одно значение, werewolf. Это связано с тем, что вместо создания новой локальной переменной var переназначает ту же переменную в той же области. var не понимает, что if должен быть частью другой, новой области. Обычно рекомендуется объявлять переменные на уровне блоков, поскольку это уменьшает риск непреднамеренно переопределить значения переменных.

Поднятие переменных

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

Если попробовать использовать переменную до того, как она будет объявлена и инициализирована, вернется результат undefined.

console.log(x);
// Variable assignment
var x = 100;
undefined

Однако если опустить ключевое слово var, переменная не будет объявлена, а только инициализирована. Это вернет ReferenceError и остановит выполнение скрипта.

// Attempt to use a variable before declaring it
console.log(x);
// Variable assignment without var
x = 100;
ReferenceError: x is not defined

Это связано с поднятием – это такое поведение JavaScript, при котором объявления переменных и функций перемещаются в верхнюю часть их области. Поскольку поднимается только фактическое объявление, а не инициализация, в первом примере возвращается undefined.

Чтобы лучше продемонстрировать это понятие, мы написали следующий код и объяснили, как его читает JavaScript:

// The code we wrote
console.log(x);
var x = 100;
// How JavaScript interpreted it
var x;
console.log(x);
x = 100;

Перед выполнением скрипта JavaScript сохраняет x в памяти как переменную. Поскольку переменная вызывалась до того, как была определена, результат возвращается undefined, а не 100. Однако это не вызывает ReferenceError и не останавливает скрипт. Хотя ключевое слово var фактически не изменило местоположение var, это демонстрирует, как работает поднятие. Это поведение может вызвать проблемы, потому что программист, который написал этот код, скорее всего, ожидает, что вывод х будет true, а не undefined.

Также поднятие может привести к непредсказуемым результатам, как в следующем примере:

var x = 100;
function hoist() {
// A condition that should not affect the outcome of the code
if (false) {
var x = 200;
}
console.log(x);
}
hoist();
undefined

В этом примере глобальная переменная x равна 100. В зависимости от оператора if x может измениться на 200, но поскольку условие было false, оно не должно влиять на значение x. Вместо этого x был поднят до начала функции hoist(), и значение стало undefined.

Это непредсказуемое поведение может вызвать ошибки в программе. Поскольку let и const определяются на уровне блока, они не будут подниматься таким образом, как в примере ниже.

// Initialize x in the global scope
let x = true;
function hoist() {
// Initialize x in the function scope
if (3 === 4) {
let x = false;
}
console.log(x);
}
hoist();
true

Дублируемое объявление переменных, которое возможно с var, вызовет ошибку с let и const.

// Attempt to overwrite a variable declared with var
var x = 1;
var x = 2;
console.log(x);
2
// Attempt to overwrite a variable declared with let
let y = 1;
let y = 2;
console.log(y);

Uncaught SyntaxError: Identifier ‘y’ has already been declared
Итак, на переменные, объявленные с var, может повлиять поднятие. Поднятие – это механизм в JavaScript, в котором объявления переменных сохраняются в памяти. Это может привести к неопределенным переменным в коде. Ключевые слова let и const решают эту проблему, вызывая ошибку при попытке использовать переменную перед ее объявлением или объявить переменную более одного раза.

Константы

Многие языки программирования используют константы – это значения, которые нельзя изменить. То есть значения, назначенные константе, не могут быть переназначены.

По общему соглашению идентификаторы const пишутся в верхнем регистре. Это отличает их от других переменных.

В приведенном ниже примере переменная SPECIES инициализируется как константа с помощью ключевого слова const. Попытка переназначить переменную приведет к ошибке.

// Assign value to const
const SPECIES = "human";
// Attempt to reassign value
SPECIES = "werewolf";
console.log(SPECIES);
Uncaught TypeError: Assignment to constant variable.

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

// Declare but do not initialize a const
const TODO;
console.log(TODO);
Uncaught SyntaxError: Missing initializer in const declaration

Значения, которые не могут измениться при программировании, называются неизменяемыми, а значения, которые могут быть изменены – изменяемыми (это очевидно). Значения константы не могут быть переназначены, однако они изменяемы, поскольку свойства объектов, объявленных с помощью const, можно изменять.

// Create a CAR object with two properties
const CAR = {
color: "blue",
price: 15000
}
// Modify a property of CAR
CAR.price = 20000;
console.log(CAR);
{ color: "blue", price: 20000 }

Константы позволяют вам сообщить другим программистам, работающим над проектом, и себе о том, что данную переменную не следует переназначать. Чтобы объявить переменную, которую можно переназначить, следует использовать let.

Заключение

В этом мануале вы узнали, что такое переменная, ознакомились с правилами именования переменных и научились переназначать их значения. Также вы узнали об областях видимости и поднятии переменных, ограничениях ключевого слова var, а также о том, как let и const устраняют эти проблемы.

Переменные служат "контейнерами" для хранения информации.

Вы Помните Школьную Алгебру?

Вы помните школьную алгебру? x=5, y=6, z=x+y

Вы помните, что буква (например x) могла бы использоваться для хранения значения (например 5), и что вы могли бы использовать информацию выше, чтобы вычислить, что значение z равно 11?

Эти буквы называются переменными , и переменные могут использоваться для хранения значений (x=5) или выражений (z=x+y).

Переменные JavaScript

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

Переменная может иметь короткое имя, например x, или более информативное имя, например carname (название автомобиля).

Правила для имен переменных JavaScript:

• Имена переменных чувствительны к регистру (y и Y это две разных переменных)
• Имена переменных должны начинаться с буквы или символа подчеркивания

Замечание: Поскольку JavaScript чувствителен к регистру, имена переменных также чувствительны к регистру.

Пример

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

Объявление (Создание) Переменных JavaScript

Создание переменных в JavaScript более часто называют "объявлением" переменных.

Вы объявляете переменные JavaScript с помощью ключевого слова var :

После выполнения предложений выше, переменная x будет содержать значение 5 , и carname будет содержать значение Мерседес .

Замечание: Когда вы присваиваете текстовое значение переменной, заключайте его в кавычки.

Замечание: Если вы объявляете переменную повторно, она не потеряет свое значение.

Локальные Переменные JavaScript

Переменная, объявленная внутри функции JavaScript становится ЛОКАЛЬНОЙ и будет доступна только в пределах этой функции. (переменная имеет локальную область видимости).

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

Локальные переменные уничтожаются при выходе из функции.

Вы узнаете больше о функциях в последующих уроках JavaScript.

Глобальные Переменные JavaScript

Переменные объявленные вне функции становятся ГЛОБАЛЬНЫМИ , и все скрипты и функции на странице могут к ним обращаться.

Глобальные переменные уничтожаются когда вы закрываете страницу.

Если вы объявляете переменную, не используя "var", переменная всегда становится ГЛОБАЛЬНОЙ .

Присваивание Значений Необъявленным Переменным JavaScript

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

Эти предложения:

Вы узнаете больше об операторах в следующем уроке JavaScript.