Переменные в JavaScript

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

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

var temp;

var temp;

Слово var происходит от английского variable, т.е. переменная.

С появлением стандарта ES6 в 2015 году, вы можете также при объявлении переменных использовать ключевые слова let и для объявления констант - const. Об их особенностях можно прочитать в отдельной статье.

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

var start, end, prev, next;

1	var start, end, prev, next;

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

var temp;
temp = 0;

1 2	var temp; temp = 0;

Эти данные будут сохранены в соответствующей ячейке памяти компьютера, и в дальнейшем будут использованы в каких-либо действиях: расчетах, функциях, выводе информации на экран или в консоль браузера:

var temp;
temp = 0;
alert(temp); //выведет 0 в диалоговом окне

var temp;

temp = 0;

alert(temp); //выведет 0 в диалоговом окне

Очень интересно, как читается выражение temp=0. Если произносить словами, то это не "темп равно ноль", а "присвоить ноль в переменную темп". Т.е. сначала создается переменная, а потом в нее заносится значение. Можно сравнить это действие с заполнением шкафа:

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

Можно сразу инициализировать переменную при ее объявлении, т.е. записать в нее данные:

var str = "Hello world!";
alert( str );

1 2	var str = "Hello world!"; alert( str );

Подобным образом можно инициализировать сразу несколько переменных:

var start = 0, end = 20, prev = -1, next = 1;

1	var start = 0, end = 20, prev = -1, next = 1;

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

var start = 0, end = 20, prev = -1, next = 1;
start = 2*next + 3*prev;
alert(start);

start = 2*1 + 3*(-1); // выполняемые действия
alert(start); //выведет -1

var start = 0, end = 20, prev = -1, next = 1;

start = 2*next + 3*prev;

alert(start);

start = 2*1 + 3*(-1); // выполняемые действия

alert(start); //выведет -1

Фактически мы оперируем значениями переменных и записываем результат математических действий в переменную start. Примерно также вы когда-то решали уравнения, если были известны значения переменных в них. Правда, вместо start и end, prev и next в математике чаще были x и y или a и b. Ничего не мешает на первых порах вам называть так переменные и в JavaScript, но в будущем желательно давать переменным имена, которые бы отражали суть выполняемых ими действий.

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

var a = "Hello world!";
alert(a);

1 2	var a = "Hello world!"; alert(a);

Но лучше, если вы дадите ей более "говорящее" имя message:

var message = "Hello world!";
alert( message );

message = "Happy new Year!";
alert( message );

var message = "Hello world!";

alert( message );

message = "Happy new Year!";

alert( message );

Это хорошая практика, особенно, если вы думаете заняться JavaScript всерьез.

Здесь следует отдельно остановиться на правилах именования переменных:

имена переменных чувствительны к регистру, т.е. ball и Ball - это 2 разных переменных;
имена переменных должны состоять из цифр, букв латинского алфавита, знака $ и знака нижнего подчеркивания _. Т.е. можно задать переменную $order, или pic_url, или div1, div2, div3, но нельзя использовать pic-url, т.к. это будет уже операция вычитания, или 1div, 2div, 3div. Кстати, в JS (JavaScript сокращенно) часто используется так называемый Camel Syntaxis, т.е. "горбатый синтаксис", когда имя переменной или функции состоит из 2-х-3-х слов, но пишется слитно. Причем каждое следующее слово пишется с большой буквы. Например, findPicUrl;
имена переменных не могут начинаться с цифры;
переменная должна быть объявлена до того, как вы начнете ее использовать.
нельзя использовать в качестве имени переменной одно из зарезервированных слов JavaScript, так как они используются в синтаксисе самого языка, например: var, class, return, export и др.

Например, такой пример выдаст синтаксическую ошибку:

var class= "Мой класс"; // ошибка
alert(class);

1 2	var class= "Мой класс"; // ошибка alert(class);

Типы переменных в JavaScript

Особенностью JavaScript по сравнению с другими языками программирования является то, что не нужно при объявлении переменной задавать ее тип, как, например, в C++. Достаточно присвоить ей какое-либо значение, и тип переменной определиться автоматически. И в JavaScript лучше использовать переменные-литералы, т.е. переменные с фиксированным значением, а не переменные-объекты.

Итак, по типу различают:
1. Числовые переменные (number):

var ch1 = 147; //целочисленные
var ch2 = 3.14; //число с плавающей точкой, т.е. дробное
var ch3 = 1e-3; //число в экспоненциальной форме, т.е. 0.001 или 10 в -3 степени
alert("ch1 = "+ch1+"\nch2 = "+ch2+"\nch3 = "+ch3);

var ch1 = 147; //целочисленные

var ch2 = 3.14; //число с плавающей точкой, т.е. дробное

var ch3 = 1e-3; //число в экспоненциальной форме, т.е. 0.001 или 10 в -3 степени

alert("ch1 = "+ch1+"\nch2 = "+ch2+"\nch3 = "+ch3);

2. Строковые переменные (string):

var str = "Прекрасное утро сегодня"; //в двойных кавычках
var str1 = 'Лицом к лицу лица не увидать...'; //в одинарных кавычках
var strObj = new String("Привет, мир!"); //строка как объект

alert("str = "+str+"\ntypeof str = "+typeof(str)+"\n\nstr1 = "+str1+"\ntypeof str1 = "+typeof(str1) +
"\n\nstrObj = "+strObj+"\ntypeof strObj = "+typeof(strObj));

var str = "Прекрасное утро сегодня"; //в двойных кавычках

var str1 = 'Лицом к лицу лица не увидать...'; //в одинарных кавычках

var strObj = new String("Привет, мир!"); //строка как объект

alert("str = "+str+"\ntypeof str = "+typeof(str)+"\n\nstr1 = "+str1+"\ntypeof str1 = "+typeof(str1) +

"\n\nstrObj = "+strObj+"\ntypeof strObj = "+typeof(strObj));

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

Примечание: здесь для показа типа переменной использован оператор typeof, о котором речь пойдет ниже.

Не разрывайте строку в JavaScript, т.е. не переносите ее с помощью клавиши Enter на новую строку, т.к. это вызовет ошибку. Если нужно вывести текст с переносом строк, например, отрывок стихотворения, используйте специальные символы:

\n - перенос строки
\t - знак табуляции
\\ - экранирование обратного слэша
\" - экранирование двойной кавычки
\' - экранирование одинарной кавычки

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

var str = "\"И, боже вас сохрани, не читайте до обеда советских газет\"\nГлава 3. \"Собачье Сердце\". \n\tБулгаков";

alert( str );

var str = "\"И, боже вас сохрани, не читайте до обеда советских газет\"\nГлава 3. \"Собачье Сердце\". \n\tБулгаков";

alert( str );

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

3. Логические, или булевы, переменные (Boolean)

Используются, как правило, в условных конструкциях типа if...else.

var flag = true, choose = false;
alert(typeof flag + ", " + typeof( choose ) );

1 2	var flag = true, choose = false; alert(typeof flag + ", " + typeof( choose ) );

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

var a= "Вася", b = 10;
alert( "a = "+ a + "\nb = " + b  );
a = b = null;
alert( "a = "+ a + "\nb = " + b  );

var a= "Вася", b = 10;

alert( "a = "+ a + "\nb = " + b );

a = b = null;

alert( "a = "+ a + "\nb = " + b );

5. NaN - Not a Number (т.е. НЕ число) - тип данных, который, как правило получается, когда пытаются произвести математические действия над переменными строкового типа. Например,

var a= "Вася", b = 10;
alert( a - b );

1 2	var a= "Вася", b = 10; alert( a - b );

Существует специальная функция для проверки этого типа данных - isNaN(переменная или выражение). Она возвращает true, если переменная или выражение соответствуют типу NaN, и false, если не соответствуют.

var a= "abcd", b = 80;
alert( isNaN( a / b)  );

1 2	var a= "abcd", b = 80; alert( isNaN( a / b) );

6. undefined - неопределенный. Его имеет та переменная, значение которой не указано. Как правило, мы не очень рады такому типу данных, т.к. чаще всего он получается из-за ошибок в коде.

var somestring;
alert( somestring );

1 2	var somestring; alert( somestring );

7. Объектный тип данных (Object).

По сути дела в JS почти все переменные есть объекты, т.к. для объектов характерно наличие свойств и методов. И для строк, и для чисел такие методы доступны, если вы объявляете их и как объект типа Number или String, и как литерал строки или числа.

Например,

var name = "Алина"; //литерал строки
alert( "Количество букв в строке "+ name.length);// выведет 5
alert( name.toUpperCase() );// выведет имя в верхнем регистре (большими буквами)

var sername = new String( "ИВАНОВА" );//строка-объект
alert( "Количество букв в строке "+ sername.length);// выведет 7
alert( sername.toLowerCase() );// выведет имя в нижнем регистре (маленькими буквами)

var name = "Алина"; //литерал строки

alert( "Количество букв в строке "+ name.length);// выведет 5

alert( name.toUpperCase() );// выведет имя в верхнем регистре (большими буквами)

var sername = new String( "ИВАНОВА" );//строка-объект

alert( "Количество букв в строке "+ sername.length);// выведет 7

alert( sername.toLowerCase() );// выведет имя в нижнем регистре (маленькими буквами)

Но в JavaScript существуют встроенные объекты, которые позволяют создать их только с помощью конструктора, т.е. с использованием ключевого слова new. Например, таким является объект Date:

var d = new Date(); //объект класса Date
alert( d.toLocaleString() );// выведет сегодняшнюю дату и время

1 2	var d = new Date(); //объект класса Date alert( d.toLocaleString() );// выведет сегодняшнюю дату и время

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

Объекты вы также можете создавать самостоятельно с помощью литерала объекта или с помощью конструктора new Object():

var dog = {
    name: "Randy",
    breed: "shepherd"
}
var cat = new Object();
cat.name = 'Markiz';
cat.breed = 'Siamese';
console.log(dog, cat);

var dog = {

name: "Randy",

breed: "shepherd"

}

var cat = new Object();

cat.name = 'Markiz';

cat.breed = 'Siamese';

console.log(dog, cat);

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

Следует отметить, что в JavaScript практически все типы данных могут быть объектами:

Логические переменные (Boolean) могут быть объектами (если объявлены с помощью ключевого слова new)
Числа (Number) могут быть объектами (если объявлены с помощью ключевого слова new)
Строки (String) могут быть объектами (если объявлены с помощью ключевого слова new );
Дата (экземпляры объекта Date) всегда являются объектами;
Экземпляры Math всегда являются объектами;
Регулярные выражения (RegExp, Regular expression) всегда являются объектами;
Массивы (Array) всегда являются объектами;
Функции (Function) - всегда являются объектами;
Экземпляры Object всегда являются объектами.

К примитивным типам данных относятся:

string
number
boolean
null
undefined
symbol

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

8. Тип данных Symbol

Symbol был добавлен в стандарте ES6 в качестве уникального и неизменяемого типа данных. Использование Symbol - это чаще всего создание уникального идентификатора, к которому нельзя получить доступ. Переменные такого типа создаются без использования ключевого слова new:

var symb = Symbol('myString');
console.log(typeof symb); //symbol

1 2	var symb = Symbol('myString'); console.log(typeof symb); //symbol

Символы могут использоваться в качестве свойств (полей) объекта. Для доступа к ним нужно использовать метод Object.getOwnPropertySymbols():

let obj = {
    name: 'admin',
    pass: 'default',
    [Symbol('id')]: 1267
}
console.log(Object.getOwnPropertySymbols(obj));

let obj = {

name: 'admin',

pass: 'default',

[Symbol('id')]: 1267

}

console.log(Object.getOwnPropertySymbols(obj));

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

var myArr = [25, 12, 142, 34];
var step = myArr[Symbol.iterator]();

console.log(step.next()); // { value: 25, done: false }
console.log(step.next()); // { value: 12, done: false }
console.log(step.next()); // { value: 142, done: false }
console.log(step.next()); // { value: 34, done: false }
console.log(step.next()); // { value: undefined, done: true }

var myArr = [25, 12, 142, 34];

var step = myArr[Symbol.iterator]();

console.log(step.next()); // { value: 25, done: false }

console.log(step.next()); // { value: 12, done: false }

console.log(step.next()); // { value: 142, done: false }

console.log(step.next()); // { value: 34, done: false }

console.log(step.next()); // { value: undefined, done: true }

У итераторов есть метод next(), который позволяет переходить к следующему элементу и получать данные из него в виде объекта с полями value (значение) и done со значением true | false , которое показывает, окончен ли перебор.

Оператор typeof

Для вывода типа переменной используют оператор typeof:

var words = "Слова летят легко...";
alert( typeof words );
alert( typeof(words) );
 
var flag = true, choose = false;
alert(typeof flag + ", " + typeof( choose ) );

var words = "Слова летят легко...";

alert( typeof words );

alert( typeof(words) );

var flag = true, choose = false;

alert(typeof flag + ", " + typeof( choose ) );

Этот оператор можно использовать в 2-х формах записи — со скобками и без:

typeof( choose );
typeof flag;

1 2	typeof( choose ); typeof flag;

Он может быть полезен, когда вы отлаживаете скрипты и не можете понять, в чем ошибка. А она может быть в неверном типе данных, особенно если дело касается операций сложения двух чисел. Дело в том, что большая часть информации, получаемая от пользователя, является строковой, а строки при сложении склеиваются (это называется красивым словом «Конкатенация»). В этом случае и пригодится оператор typeof. И способы преобразования типов данных. Но об этом — уже в другой статье.

Переменные и типы данных в JavaScript

Типы переменных в JavaScript

8. Тип данных Symbol

Оператор typeof

2 комментария

Добавить комментарий Отменить ответ

Переменные и типы данных в JavaScript

Типы переменных в JavaScript

8. Тип данных Symbol

Оператор typeof

Вам может понравиться

Генерируем случайный цвет в JS

Всплывающие (модальные) окна с помощью CSS, JavaScript и jQuery

Использование html-элемента dialog для создания модального окна

2 комментария

Добавить комментарий Отменить ответ