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

Переменные (ключевые слова var, let и const)

Переменная – это именованный участок памяти для хранения данных.

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

Данные, хранящиеся в переменной, называются её значением.

В процессе выполнения программы значения переменной могут меняться. Но в определённый момент времени переменная всегда имеет какое-то одно значение.

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

// объеявление переменной message (message - это имя переменной)
var message;

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

Присвоение переменной значения выполняется через оператор =.

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

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

// например, выведем в консоль браузера значение переменной email
console.log(email);

Переменная, которая объявлена без инициализации имеет по умолчанию значение undefined.

var phone;
// например, выведем в консоль браузера значение переменной phone
console.log(phone); // undefined  

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

// например, объявим с помощью одного ключевого слова var сразу три переменные, и двум из них сразу присвоим значения
var
  price = 78.55,
  quantity = 10,
  message;

Объявление переменных с помощью let и const

Сейчас ключевое слово var практически не используется, вместо него новый стандарт (ES6) рекомендует использовать let и const.

В чем отличия var от let?

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

{
  let name = 'John';
  console.log(name); // "John"
  {
    console.log(name); // "John"
  }
}
console.log(name); // Uncaught ReferenceError: name is not defined

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

Такая переменная будет видна за пределами блока, в котором она создана.

{
  var name = 'John';
  console.log(name); // "John"
  {
    console.log(name); // "John"
  }
}
console.log(name); // "John"

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

age = 10; // ReferenceError: Cannot access 'age' before initialization
let age = 28;

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

age = 10;
var age = 28;

Константы (const)

Мы разобрали отличия let от var. А что же насчёт const? Переменные, созданные с помощью const ведут себя также как с let. Единственное отличие между ними заключается в том, что непосредственное значение переменной созданной через const вы не можете изменить. Таким образом, const – это ключевое слово, предназначенное для создания своего рода констант.

const COLOR_RED = '#ff0000';

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

При попытке изменить значение константы вам будет брошена ошибка.

const COLOR_RED = '#ff0000';
COLOR_RED = '#f44336'; // Uncaught TypeError: Assignment to constant variable.

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

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

const COLORS = ['#ff0000', '#00ff00', '#00ff00'];
// присвоить другой объект или значение константе нельзя
COLORS = []; // Uncaught TypeError: Assignment to constant variable.
COLORS = { red: '#ff0000', green: '#00ff00', blue: '#00ff00' }; // Uncaught TypeError: Assignment to constant variable.
COLORS = '#00ff00'; // Uncaught TypeError: Assignment to constant variable
// но имзменить сам объект можно
COLORS.push('#4caf50');
console.log(COLORS); // ["#ff0000", "#00ff00", "#00ff00", "#4caf50"]

Слабая типизация. Именование переменых

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

let output = "успех"; // переменная имеет строковый тип данных
output = 28; // эта же переменная, но уже имеющая тип данных «число» 
output = true; // эта же переменная, но уже хранящая булевское значение 

Значение переменной можно изменять неограниченное количество раз.

// создана переменная age
let age;
// переменной age присвоено значения 67
age = 67;
// переменной age установлено значение «Пенсионный возраст»
age = "Пенсионный возраст";
// переменной age установлено число 55
age = 55;  

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

Имя переменной можно составлять из букв, цифр и символов $ и _. При этом первый символ переменной не должен быть цифрой. Кроме этого в качестве имени переменной нельзя использовать зарезервированные слова.

// создание двух переменных, первая переменная имеет имя phone, вторая - meassage;
let phone, message;

Регистр букв в имени переменной имеет значение. Т.е., например, переменная phone и Phone - это две разные переменные.

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

price = 250.00; // создали переменную без использования var и инициализировали её числом 250.00
percent = "20%"; // создали переменную без использования var и инициализировали её строкой «20%»

Но создавать, таким образом, переменные не рекомендуется.

Типы данных

В JavaScript типы данных можно разделить на примитивные и объектные.

Переменные, содержащие примитивные типы данных хранят значение явно.

В JavaScript выделяют 5 примитивных типов данных:

• число (number);
• строка (string);
• булевый тип (boolean);
• null;
• undefined.

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

let x = 77;
let y = x;

x = 55;
y; // 77

Переменные, содержащие объект, на самом деле хранят не сам объект, а ссылку на него.

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

// пример 1 (с типом данных «объект»)
let coord1 = {
  x: 77,
  y: 100
};
let coord2 = coord1;

coord1.x = 55; // установим свойству x объекта новое значение
coord2.x; // 55, т.к. coord1 и coord2 содержат ссылку на один и тот же объект

// пример 2 (с типом данных «массив»)
let coord1 = [77, 100];
let coord2 = coord1;

coord1[0] = 55; // установим элементу с 0 индексом новое значение
coord2[0]; // 55, т.к. coord1 и coord2 содержат ссылку на один и тот же объект

// пример 3 (с типом данных «дата»)
let date1 = new Date(2018,00,01);
let date2 = date1;

date2 = date2.setDate(date2.getDate()+7); // увеличим дату на 7 дней
date1; // 07.01.2018, т.к. date1 и date2 содержат ссылку на один и тот же объект

Число (number)

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

let int = 5; // целое число
let float = 5.98; // дробное число

Формат представления чисел в JavaScript осуществляется в соответствии со стандартом IEEE 754-2008.

Целые числа в JavaScript можно задавать не только в десятичной системе счисления, но и в восьмеричной (0) или шестнадцатеричной системе счисления (0x) с использованием префиксов, указанных в круглых скобках:

let int = 010; // 8
int = 055; // 45
int = 0xFF; //255
int = 0xB8; // 184

Записывать числа возможно в экспоненциальной форме:

let 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 (ложь).

let a = true;
let b = false;

Строка (String)

Строка (String) – это тип данных, который используется в JavaScript для представления текста.

Строка JavaScript может состоять из 0 или большего количества символов.

В качестве формата строки в JavaScript всегда использутся кодировка Unicode.

Создание строки (литерала строки) выполняется посредством заключения текста в одинарные или двойные кавычки.

"JavaScript";
'ECMAScript';

В JavaScript нет разницы между одинарными и двойными кавычками.

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

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

'"ECMAScript"'; // без экранирования (с использованием одинарных кавычек)
"\"ECMAScript\""; // с экранированием

Строка в JavaScript может содержать специальные символы. Например, \n (перевод строки), \t (табуляция), \r (возврат каретки) и др.

'Это предложение.\nА это тоже предложение, но оно будет начинаться с новой линии.';

Со строками можно произовдить операцию сложения (объединения) или другими словами конкатенацию. Для этого используется оператор +. Сымысл данной операции заключается в присоединении второй строки к концу первой.

"Я люблю " + "JavaScript"; // Я люблю JavaScript  

Значение "undefined"

undefined - специальный примитивный тип данных, который имеет одно значение, равное undefined.

Этот тип данных имеет объявленная переменная, которой ещё не присвоено значение.

let num; // undefined

Значение undefined также будет возвращено при обращении к несуществующему свойству объекта.

let obj = {}; // пустой объект
obj.prop; // undefined

Значение "null"

null - специальный примитивный тип данных, который имеет одно значение, равное null.

null - это просто специальное значение, которое имеет смысл «ничего» или «неизвестное значение», т.е. оно явно ничего не означает.

Объект (Object)

Объект – это структура данных, состоящая из пар имя-значение.

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

{
  имя_1: значение_1,
  имя_2: значение_2,
  имя_3: значение_3,
  ...
}

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

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

Другими словами, объект - это структура данных, состоящая из свойств и методов.

let 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(выражение)

Пример:

let name;
let age = 37;
let email = 'v3@gmail.com';  
let isLicense = true;
let interest: null;  
let lastExperience: {
  period: 'June 2011 - June 2018',
  place: 'ISACA, Moscow',
  position: 'Web designer'
};
let 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" (прототипом функции является объект)