JavaScript - Переменные. Константы. Типы данных

Переменные

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

Объявление (создание) переменных осуществляется с помощью ключевого слова var.

// message - имя переменной
var message;

При создании переменной ей сразу же можно присвоить значение.

Присвоение переменной значения осуществляется с помощью оператора «=».

// например, создадим переменную email и присвоим ей строку 'no-reply@astr.org'
var email = 'no-reply@astr.org';
// установим переменной email новое значение
email = 'support@astr.org';

Для того чтобы получить значение переменной достаточно просто обратиться к ней по имени.

// например, выведем в консоль браузера значение переменной 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 = [77, 100],
  coord2 = coord1;

coord1[0] = 55; // установим элементу с 0 индексом новое значение
coord2[0]; // 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 = 'v3@gmail.com',  
  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';