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" (прототипом функции является объект)
Комментарии ()