Переменные. Арифметические и логические операции в JavaScript
Переменная – это именованный участок памяти, в который можно как сохранить некоторую информацию, так и получить её из неё.
Объявление (создание) переменных осуществляется с помощью ключевого слова var .
// message - имя переменной var message;
При создании переменной ей сразу же можно присвоить значение.
Присвоение переменной значения осуществляется с помощью оператора «=».
// например, создадим переменную email и присвоим ей строку "[email protected]" var email = "[email protected]"; // установим переменной email новое значение email = "[email protected]";
Для того чтобы получить значение переменной достаточно просто обратиться к ней по имени.
// например, выведем в консоль браузера значение переменной email: console.log(email);
Для того чтобы объявить не одну, а несколько переменных с помощью одного ключевого слова var , необходимо использовать запятую.
Var price = 78.55, quantity = 10, message;
JavaScript является языком с динамической или слабой типизацией. Это означает, что при объявлении переменной ей не нужно указывать тип данных, который она может принимать. Следовательно, в переменную можно поместить сначала значение, имеющее один тип данных, а потом другой.
Var output = "успех"; // переменная имеет строковый тип данных output = 28; // эта же переменная, но уже имеющая тип данных «число» output = true; // эта же переменная, но уже хранящая булевское значение
Значение переменной можно изменять неограниченное количество раз.
// создана переменная age var age; // переменной age присвоено значения 67 age = 67; // переменной age установлено значение «Пенсионный возраст» age = "Пенсионный возраст"; // переменной age установлено число 55 age = 55;
Хорошей практикой при разработке клиентских считается использование в определённой переменной только одного типа данных, т.е. не записывать в переменную значения, имеющие различные типы данных. Чтобы понять какой тип данных стоит ожидать в переменной рекомендуется при создании переменной её сразу инициализировать определённым значением.
Имя переменной можно составлять из букв, цифр и символов $ и _. При этом первый символ переменной не должен быть цифрой. Кроме этого в качестве имени переменной нельзя использовать зарезервированные слова.
// создание двух переменных, первая переменная имеет имя phone, вторая - meassage; var phone, message;
Регистр букв в имени переменной имеет значение. Т.е., например, переменная phone и Phone - это две разные переменные.
Если строгий режим не используется, то создать переменную с первоначальным значением можно и без ключевого слова var.
Price = 250.00; // создали переменную и инициализировали её числом 250.00 percent = "20%"; // создали переменную и инициализировали её строкой «20%»
Но создавать, таким образом, переменные не рекомендуется.
Типы данныхВ JavaScript типы данных можно разделить на примитивные и объектные.
Переменные, содержащие примитивные типы данных хранят значение явно.
В JavaScript выделяют 5 примитивных типов данных:
- число (number);
- строка (string);
- булевый тип (boolean);
- null;
- undefined.
Если одной переменной присвоить значение другой, которая содержит примитивный тип данных, то она получит собственную копию этого значения.
Var x = 77, y = x; x = 55; y; // 77
Переменные, содержащие объект, на самом деле хранят не сам объект, а ссылку на него.
Если одной переменной присвоить значение другой, которая содержит объект (ссылку на него), то она тоже получит ссылку на него. В результате этой операции две эти переменные будут содержать ссылку на один и тот же объект.
// пример 1 (с типом данных «объект») var coord1 = {x: 77, y: 100}, coord2 = coord1; coord1.x = 55; // установим свойству x объекта новое значение coord2.x; // 55, т.к. coord1 и coord2 содержат ссылку на один и тот же объект // пример 2 (с типом данных «массив») var coord1 = , coord2 = coord1; coord1 = 55; // установим элементу с 0 индексом новое значение coord2; // 55, т.к. coord1 и coord2 содержат ссылку на один и тот же объект // пример 3 (с типом данных «дата») var date1 = new Date(2018,00,01), date2 = date1; date2 = date2.setDate(date2.getDate()+7); // увеличим дату на 7 дней date1; // 07.01.2018, т.к. date1 и date2 содержат ссылку на один и тот же объект
Число (number)Числовой тип в JavaScript данных является универсальным . Он используется для представления, как целых , так и дробных чисел.
Var int = 5; // целое число var float = 5.98; // дробное число
Формат представления чисел в JavaScript осуществляется в соответствии со стандартом IEEE 754-2008.
Целые числа в JavaScript можно задавать не только в десятичной системе счисления, но и в восьмеричной (0) или шестнадцатеричной системе счисления (0x) с использованием префиксов, указанных в круглых скобках:
Var int = 010; // 8 int = 055; // 45 int = 0xFF; //255 int = 0xB8; // 184
Записывать числа возможно в экспоненциальной форме :
Var num = 2e3; // экспоненциальная запись числа 2*10^3 (2000) num = 2e-3; // экспоненциальная запись числа 2*10^-3 (0,002) num = 3.2e3; // 3200 num = 1.5e-2; // 0.015
Числовой тип данных кроме чисел содержит ещё специальные числовые значения :
- Infinity (положительная бесконечность);
- -Infinity (отрицательная бесконечность);
- NaN (Not a Number – не число).
Специальное значения Infinity означает очень большое положительное число, т.е. число, которое не может быть представлено в JavaScript по причине того, что оно слишком велико.
Специальные значения -Infinity означает наоборот очень большое отрицательное число, т.е. число, которое не может быть представлено JavaScript по причине того, что оно тоже слишком велико.
Пример выражений в результате вычисления которых будет возвращены специальные числовые значения :
5/0; // Infinity -5/0; // -Infinity Math.pow(10,399); // Infinity (10 в степене 399) Math.pow(10,399); // -Infinity (-10 в степене 399)
Значение NaN возвращается в результате выполнения математических операций, которые JavaScript не может вычислить.
5 - "Hi"; // NaN (от числа 5 отнять строку) 1000 / "20px"; // NaN (число поделить на строку) true * "1rem"; // NaN (логическое значение true умножить на строку)
При этом очень интересным является то, что значение NaN в JavaScript не равно ничему включая себя.
NaN == NaN; // false NaN === NaN; //false
Логический тип данных (Boolean)Boolean – примитивный тип данных, который имеет всего два значения: true (истина) и false (ложь).
Var a = true; var b = false;
Строка (String)Строка (String) – это тип данных, который используется в JavaScript для представления текста.
Строка JavaScript может состоять из 0 или большего количества символов.
В качестве формата строки в JavaScript всегда использутся кодировка Unicode.
Создание строки (литерала строки) выполняется посредством заключения текста в одинарные или двойные кавычки .
"JavaScript"; "ECMAScript";
В JavaScript нет разницы между одинарными и двойными кавычками.
Но, в некоторых случаях есть смысл использовать именно одинарные кавычки, а не двойные и наоборот.
Например, когда строка содержит двойные кавычки, её более удобно заключить в одинарные. Это избавит от необходимости экранирования в ней двойных кавычек.
""ECMAScript""; // без экранирования (с использованием одинарных кавычек) "\"ECMAScript\""; // с экранированием
Строка в JavaScript может содержать специальные символы. Например, \n (перевод строки), \t (табуляция), \r (возврат каретки) и др.
"Это предложение.\nА это тоже предложение, но оно будет начинаться с новой линии.";
Со строками можно произовдить операцию сложения (объединения) или другими словами конкатенацию. Для этого используется оператор "+". Сымысл данной операции заключается в присоединении второй строки к концу первой.
"Я люблю " + "JavaScript"; // Я люблю JavaScript
Значение "undefined"undefined - специальный примитивный тип данных, который имеет одно значение, равное undefined .
Этот тип данных имеет объявленная переменная, которой ещё не присвоено значение.
Var num; // undefined
Значение undefined также будет возвращено при обращении к несуществующему свойству объекта.
Var obj = {}; // пустой объект obj.prop; // undefined
Значение "null"null - специальный примитивный тип данных, который имеет одно значение, равное null .
null - это просто специальное значение, которое имеет смысл «ничего» или «неизвестное значение», т.е. оно явно ничего не означает.
Объект (Object)Объект – это структура данных, состоящая из пар имя-значение.
Создание объекта с помощью нотации литерала объекта осуществляется следующим образом:
{ имя_1: значение_1, имя_2: значение_2, имя_3: значение_3, ... }
Как видно, имя от значения отделяется с помощью двоеточия, а пары между собой с помощью запятой.
При этом если в качестве значения пары выступает функция, то она называется методом этого объекта. Все остальные пары, т.е. пары в которых в качестве значения не используется функция, называются свойствами объекта.
Другими словами, объект - это структура данных, состоящая из свойств и методов.
Var person = { name: "Виталий", age: 27, getAge: function () { return "Возраст: " + this.age; } }
Обращение к свойствам объекта выполняется через точку или посредством скобочной записи.
// выведем значение свойства age в консоль браузера // 1 способ (через точку) console.log(person.age); // 2 способ (с помощью скобок) console.log(person["age"]); // вызовем метод getAge; значение, которое он вернет, выведем в консоль console.log(person.getAge());
Оператор typeofОператор typeof используется для получения информации о типе данных выражения в виде строки.
Синтаксис оператора typeof (вариант без круглых скобок):
Typeof выражение
Синтаксис оператора typeof (с использованием круглых скобок):
Typeof(выражение)
Var name, age = 37, email = "[email protected]", isLicense = true, interest: null, lastExperience: { period: "June 2011 - June 2018", place: "ISACA, Moscow", position: "Web designer" }, getExperience: function() { return lastExperience.period + " ("+ lastExperience.position + " - " + lastExperience.place + ")"; }; typeof name; // "undefined" typeof age; // "number" typeof isLicense; // "boolean" typeof interest; // "object" (1) typeof lastExperience; // "object" typeof getExperience; // "function" (2) /* (1) - это ошибка, которая присутствует в языке, начиная с его первой реализации; она не была исправлена в целях сохранения совместимости и это необходимо учитывать, при написании сценариев; null - это примитивный тип данных, он не является объектом */ /* (2) - это очень удобно, что оператор typeof выделяет функции отдельно; но функция в JavaScipt - это тоже объект; в этом легко убедиться если выполнить следующую конструкцию: */ typeof getExperience.__proto__.__proto__ // "object" (прототипом функции является объект)
КонстантыС выходом ECMAScript 6 появилось возможность создавать константы. Осуществляется это с помощью ключевого слова const.
Const COLOR_RED = "#ff0000";
Константа – это переменная, значение которой защищено от изменения. Т.е. при попытке поменять значение будет брошена ошибка.
Const COLOR_RED = "#ff0000"; COLOR_RED = "#f44336"; // Uncaught TypeError: Assignment to constant variable.
Если, например, константа содержит объект, то он не может быть изменен, а точнее ссылка на него. Но свойства этого объекта могут быть изменены.
Const COLORS = { red: "#ff0000", green: "#00ff00", blue: "#00ff00" } COLORS = ["#ff0000","#00ff00","#00ff00"]; // Uncaught TypeError: Assignment to constant variable. COLORS.green = "#4caf50";
Честно сказать я с начала не хотел вводить эту тему. Что можно говорить о переменных, особенно в JavaScript? Но потом вспомнил, как иногда разбирался со сложными конструкциями и с трудом понимал некоторые, казалось бы недопустимые в других языках программирования выражения. Можно сказать так: здесь вам не будет ошибки "Неверный тип данных", а если и будет то очень редко. Если вы работали с другими языками программирования, тогда вспомните как часто у вас возникала ошибка о неверных типах данных. В языке JavaScript тип данных может с легкостью переопределяться, при этом вы можете и не заметить в каком месте, - вот в этом то и сложность. С другой стороны, если вы будете хорошо ориентироваться в принципах преобразований типов, знать все свойства переменных и массивов, эти возможности только принесут вам уверенность в написании программ.
Переменные языка JavaScript могут хранить значения различных типов:
- Строки - последовательность символов;
- Числовые значения- целые и действительные числа;
- Булевы значения- только два значения true или false;
- Массивы- множества однотипных переменных;
- Даты- значения даты и времени.
Чтобы сохранить какие-либо значения при загрузке нового документа в JavaScript имеются только 2 решения:
- путем создания переменных во фреймосодержащем документе верхнего уровня;
- путем использования "cookies";
Cookies позволяют сохранять небольшие фрагменты информации на локальном диске пользователя. Устанавливая значения cookies и прореряя их на последующих стадиях работы, иожно восстанавливать необходимые значения. Более подробно о cookies будем говорить позже.
Имена переменных, создание переменных
В языке JavaScript создать переменную гораздо проще, чем в других языках программирования. Например, при создании переменной нет необходимости указывать ее тип. Переменные определяют как с начальными значениями, так и без них. В процессе выполнения программы уже созданные переменные можно даже приводить к различным типам данных. Имена переменных могут начинаться с любой буквы (от a до z, или A-Z) либо с символа подчеркивания (_), оставшаяся часть может содержать цифры, символы подчеркивания и буквы. Помните то, что в именах переменных различаются символы верхнего и нижнего регистра: например MyVariable - это не то же что myvariable.
Переменную можно создать одним из способов:
- при помощи оператора 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 - код клавиши .
Объект String имеет только одно свойство - length, значением которого является количество символов в строке, содержащейся в объекте. Методы объекта String можно разделить на две категории:
- методы форматирования HTML-документа;
- методы обработки строк.
Приведем перечень методов: (буква Ф - методы форматирования, а буква У - управления строками)
| Метод | Описание | |
| anchor() | У | Создает именованную метку, т.е. тег из содержимого объекта |
| big() | Ф | Заключает строку в контейнер . . . , для отображения крупным шрифтом |
| blink() | Ф | Заключает строку в контейнер . . . , чтобы она отображалась мигающей. |
| bold() | Ф | Заключает строку в контейнер . . . , чтобы она отображалась жирным шрифтом. |
| charAt() | У | Возвращает символ, находящийся в заданной позиции строки |
| fixsed() | Ф | Заключает строку в контейнер . . . , чтобы она отображалась шрифтом постоянной ширины. |
| fontcolor() | Ф | Заключает строку в контейнер . . . , чтобы она отображалась определенным цветом. |
| fontsize() | Ф | Заключает строку в контейнер . . . , чтобы она отображалась шрифтом определенного размера. |
| IndexOf() | У | Возвращает индекс первого заданного символа, найденного в строке. |
| italics() | Ф | Заключает строку в контейнер . . . , чтобы она отображалась курсивом. |
| lastIndexOf() | У | Возвращает индекс последнего заданного символа, найденного в строке. |
| link() | У | Создает тег гиперсвязи . . . и помещает в него содержимое объекта |
| small() | Ф | Заключает строку в тег . . . , чтобы она отображалась шрифтом меньшего размера. |
| strike() | Ф | Заключает строку в контейнер . . . , чтобы она отображалась зачеркнутой. |
| sub() | Ф | Заключает строку в контейнер . . . , чтобы она отображалась как нижний индекс. |
| substring() | У | Возвращает подстроку текстовой строки. |
| sup() | Ф | Заключает строку в контейнер . . . , чтобы она отображалась как верхний индекс. |
| toLowerCase() | У | Преобразует все буквы строки в строчные |
| toUpperCase() | У | Преобразует все буквы строки в прописные |
Числовые переменные
Числовые значения могут быть либо целыми, либо числами с плавающей точкой. Числа с плавающей точкой называют действительными или вещественными. К числовым значениям применимы операции:
- умножения (*);
- деления (/);
- сложения (+);
- вычитания (-);
- увеличения (++);
- уменьшения (--);
Булевы переменные
Булевы, или логические, переменные содержат только литеральные значкения - 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();
- конструктора, определенного пользователем.
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.
Переменные
Объявление переменныхПрежде чем использовать переменную в JavaScript, ее необходимо объявить. Переменные объявляются с помощью ключевого слова var следующим образом:
Var i; var sum;
Один раз использовав ключевое слово var, можно объявить несколько переменных:
Объявление переменных можно совмещать с их инициализацией:
Var message = "привет"; var i = 0, j = 0, k = 0;
Если начальное значение в инструкции var не задано, то переменная объявляется, но ее начальное значение остается неопределенным (undefined), пока не будет изменено программой.
Если вы имеете опыт использования языков программирования со статическими типами данных, таких как C# или Java, то можете заметить, что в объявлениях переменных в языке JavaScript отсутствует объявление типа. Переменные в языке JavaScript могут хранить значения любых типов. Например, в JavaScript допускается присвоить некоторой переменной число, а затем этой же переменной присвоить строку:
Var i = 10; i = "hello";
С помощью инструкции var можно объявить одну и ту же переменную несколько раз. Если повторное объявление содержит инициализатор, то оно действует как обычная инструкция присваивания.
Если попытаться прочитать значение необъявленной переменной, JavaScript сгенерирует ошибку. В строгом режиме, предусмотренном стандартом ECMAScript 5, ошибка также возбуждается при попытке присвоить значение необъявленной переменной. Однако исторически и при выполнении не в строгом режиме, если присвоить значение переменной, не объявленной с помощью инструкции var, то JavaScript создаст эту переменную как свойство глобального объекта, и она будет действовать практически так же, как корректно объявленная переменная. Это означает, что глобальные переменные можно не объявлять. Однако это считается дурной привычкой и может явиться источником ошибок, поэтому всегда старайтесь объявлять свои переменные с помощью var.
Область видимости переменнойОбласть видимости (scope) переменной - это та часть программы, для которой эта переменная определена. Глобальная переменная имеет глобальную область видимости - она определена для всей JavaScript-программы. В то же время переменные, объявленные внутри функции, определены только в ее теле. Они называются локальными и имеют локальную область видимости. Параметры функций также считаются локальными переменными, определенными только в теле этой функции.
Внутри тела функции локальная переменная имеет преимущество перед глобальной переменной с тем же именем. Если объявить локальную переменную или параметр функции с тем же именем, что у глобальной переменной, то фактически глобальная переменная будет скрыта:
Var result = "global"; function getResult() { var result = "local"; return result; }; console.log(getResult()); // Отобразит "local"
Объявляя переменные с глобальной областью видимости, инструкцию var можно опустить, но при объявлении локальных переменных всегда следует использовать инструкцию var.
Переменные – фундаментальная составляющая многих языков программирования; они являются одним из наиболее важных понятий для начинающих программистов. В 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 устраняют эти проблемы.
Как в любом другом языке программирования переменные являются очень важными. Благодаря переменным код становится универсальным, что позволяет решать больше задач. В двух словах, в программировании без использования переменных не обойтись.
Как Вы уже знаете из предыдущей статьи (Основы JavaScript), переменные объявляются с помощью ключевого слова var .
Здесь важно отметить, что регистр важен при объявлении и использовании переменной. То есть переменная var A и переменная var a , это две разные переменные. И то имя, которое задали переменной изначально, то и нужно использовать во всем скрипте.
Так как JavaScript является клиентским языком, то значения переменных хранятся в оперативную память пользователя. В языке PHP значения хранятся в оперативную память сервера.
Как правильно задать имя переменной в JavaScriptВ имена переменных нельзя использовать специальные символы, такие как #, $, дефис, пробел, точка и другие. Можно использовать только буквы (рекомендуется строчные), цифры и знак подчеркивания(_).
Нельзя чтобы первым символом в имени было число. Например, так назвать можно bmw_93 а так нельзя 123_opel.
Также нельзя назвать переменную зарезервированными словами языка, как например var, for, if.
Список зарегистрированных слов в JavaScript| abstract | boolean | break |
| byte | case | catch |
| char | class | const |
| continue | default | do |
| double | else | extends |
| false | final | finally |
| float | for | function |
| goto | if | implements |
| import | in | instanceof |
| int | interface | long |
| native | new | null |
| package | private | protected |
| public | return | short |
| static | super | switch |
| synchronized | this | throw |
| throws | transient | true |
| try | var | void |
| while | with |
Рекомендуется наименовать переменные осмысленно, чтобы интуитивно было понятно, что за значение хранится в этой переменной, например для хранения количеств автомобилей можно использовать такое название count_cars а не abcsd.
Еще нельзя назвать переменную русскими буквами, только английскими. Также рекомендуется именовать переменные английскими словами, если Вы плохо владеете английским, то можете воспользоваться транслитом для русских слов.
Типы переменныхЛюбая объявляемая переменная относится к определенному типу. В программировании существует несколько типов данных, из которых более важными являются следующие:
- Integer – В этот тип входят целые числовые числа, как положительные так и отрицательные (например: 1,2,4, -8, -100).
- Double – В этот тип входят числа с плавающей точкой, они еще называются дробные числа (например 1.6, -9.8, 2.5). Они тоже могут быть и отрицательными.
- String – Это строковые значения. К этому типу относится любой символ, любая буква или же строка. Все строковые значения должны быть объявлены в одинарные либо двойные кавычки.
- Boolean – Данный тип является логическим. Он может иметь только одну из двух значений, это либо true (истина) либо false (ложь).
- Массив – это сбор данных, которые могут быть разных типов. Существует два типа массивов, это числовой, у которого индексы(ключи) числовые и ассоциативный, со строчными индексами.
- Объект – Может быть одним из двух типов данных, либо ассоциативный массив, либо экземпляр какого не будь класса.
Переменные можно использовать напрямую в строку. Для примера создадим несколько переменных разных типов и выведем их всех сразу, одной строкой.
Хочу отметить, что переменные всегда выводятся без кавычек.
Var age = 47; var money = 50.5; var name = " Ральф "; document.write("
Меня зовут " + name + ".
Мне " + age + " лет и у меня есть " + money + " рублей
Булевские переменные (тип Boolean) редко когда используются напрямую в строке. Они больше предназначены для сохранения результата разных логических операций. Потом этот результат чаще всего используется для условного оператора if, которого изучим в другой статье.
Для примера все-таки, попробуем их вывести в браузер.
Объявим две булевские переменные, одна со значением true а другая со значением false. И используем их в качестве ответов на двух вопросов.
Var bool_1 = true; var bool_2 = false; document.write("
Вопрос: Вы хотите стать программистом? Ответ: " + bool_1 + " (Истина)
"); document.write("Вопрос: Мальчик сделал уроки? Ответ: " + bool_2 + " (Ложь)
");Сохраняем документ и открываем его в браузере.
Как видите в JavaScript, значения булевских переменных отображаются, как заданы. В PHP они отображаются иначе.
Можно объявить переменную изначально без присваивания значения, потом по необходимости сделать это.
Var mouse; //Некий код mouse = "мышь";
Еще можно объявить сразу несколько переменных через запятую, используя ключевое слово var только один раз.
Var comp, television, auto; var count = 5, current_year = 2016, phone;
Массивы и объекты являются сложными типами данных, поэтому мы рассмотрим их в других статьях.
Арифметические операцииТеперь приступим к арифметическим операциям. Тут есть пару нюансов, которых обязательно нужно учесть при написании кода, иначе получите неверный результат.
С начало объявим две переменные с произвольными числовыми значениями. Которые будем использовать в операциях.
Сложение переменныхИ начнем мы с самой распространённой операции, со сложения.
Var x = - 8; var y = 14.7; //В переменную result вставляем результат сложения. var result = x + y; document.write(x + " + " + y + " = " + result);
В результате мы получим такое число 6.699999999999999.
Тоже сложение, можно сделать сразу при выводе переменных, но здесь есть один важный момент. Для того чтобы произвести арифметическую операцию с числами сразу при их выводе, нужно сделать это внутри круглых скобках. Иначе числа объединятся.
Убираем переменную result и попробуем сложить переменные сразу при выводе.
Var x = - 8; var y = 14.7; //В переменную result вставляем результат сложения. document.write("
" + count_players + " = " + compare + "
"); //false
compare = count_ball < count_players;
document.write(count_ball + " < " + count_players + " = " + compare + "
"); //true
Данные операции чаще всего используются в условных операторах if, else.
Для лучшего понимания, покажу Вам таблицу истинности. Ее Вы должны знать наизусть. Для этого достаточно ее понять.
Вместо true может быть 1, а вместо false 0.
&& - Это оператор AND, то есть И. Его можно понять как оператор умножения.
- 0(false) && 0(false) = 0(false)
- 0(false) && 1(true) = 0(false)
- 1(true) && 0(false) = 0(false)
- 1(true) && 1(true) = 1(true)
|| - Это оператор OR, то есть ИЛИ. Его можно понять как оператор сложение.
- 0(false) || 0(false) = 0(false)
- 0(false) || 1(true) = 1(true)
- 1(true) || 0(false) = 1(true)
- 1(true) || 1(true) = 1(true)
Символ "|" на клавиатуре печатается с помощью комбинации клавиш Shift + Back slesh(Обратный слеш \).
^ - Это оператор XOR, то есть Исключающее ИЛИ. Он используется редко. Но его нужно знать по любому, вдруг понадобится.
- 0(false) ^ 0(false) = 0(false)
- 0(false) ^ 1(true) = 1(true)
- 1(true) ^ 0(false) = 1(true)
- 1(true) ^ 1(true) = 0(false)
Вот и все о чем хотел Вам рассказать в этой статье. Теперь Вы знаете, какие типы переменных существуют в программировании и как использовать их в различных арифметических и логических операциях.
