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

Прежде чем использовать переменную в JavaScript, ее необходимо объявить. Для объявления или, другими словами, создания переменной используется ключевое слово var (от variable — переменная):

var myName;
var age;

Переменной, объявляемой с помощью ключевого слова var, можно присвоить начальное значение (это называется инициализацией переменной):

var myName;
myName = "Chris"; // сохраним в переменной строку

// можно совместить объявление переменной и запись данных:
var age = 33; // сохраним в переменной число

Значение переменной сохраняется в соответствующей области памяти и в дальнейшем доступ к нему осуществляется при обращении по имени. Если же переменную не инициализировать, то ее начальное значение остается неопределенным undefined:

Выполнить код »

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

// объявление нескольких переменных
var myName, age, firstName, lastName;
// объявление и инициализация нескольких переменных
var firstName = 'Homer', lastName = 'Simpson';

JavaScript – это нетипизированный язык. Это означает, что переменная JavaScript может содержать значение любого типа, в отличие от Java- или C-переменной, в которой может содержаться только определенный тип данных, заданный при ее объявлении.
Так, в JavaScript можно присвоить переменной число, а затем присвоить той же переменной строку. Тип значения переменной может меняться во время выполнения программы, и JavaScript позаботится об этом автоматически.

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

Выполнить код »

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

Когда одна переменная с примитивным значением присваивается другой, создается копия значения, хранящегося в ячейке памяти, а затем она записы­вается по адресу другой переменной, например:

Выполнить код »

Здесь msg1 содержит строковое значение "Строка". Когда переменная msg2 инициализируется значе­нием переменной msg1, она также получает значение "Строка". ТОеперь переменная msg2 никак не связана с msg1, потому что содержит копию значения.
В дальнейшем эти переменные можно использовать по отдель­ности без побочных эффектов для скрипта.

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

  • буква в верхнем или нижнем регистре;
  • символ подчеркивания _;
  • знак доллара $.

Вслед за первым символом имени переменной можно использовать последовательность букв, цифр и символа подчеркивания без пробелов и знаков препинания. Поскольку JavaScript чувствителен к регистру, буквы включают символы от "A" до "Z" (верхний регистр) и символы от "a" до "z" (нижний регистр). Вы можете использовать буквы ISO 8859-1 или Unicode, например, å или ü.

Примеры правильных имен переменных:

myName, my_adress, _x, tel512_7456.

Примеры неправильных имен переменных:

var 512group; // начало не может быть цифрой
var my-adress; // дефис '-' не является разрешенным символом
var my adress;// пробел не является разрешенным символом

При выборе имен переменных нельзя использовать ключевые слова, то есть слова, используемые в определениях конструкций языка. Например, нельзя выбирать слова var, return, class, const, true, false, function, super, switch и ряд других.

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

var class = 15; // ошибка!
alert(class); // не сработает

Имя переменной должно быть понятным и максимально чётко соответствовать хранимым в ней данным.

Существуют проверенные опытом правила именования перемененных:

  • Имена, состоящие из одной буквы, равно как и имена, не несущие смысловой нагрузки можно применять только в том случае, если они используются в небольшом фрагменте кода и их применение очевидно.
  • Используйте составные имена из нескольких слов, чтобы как можно точнее описать назначение переменных.
    Возможны два способа объединения слов для создания имени: использование «верблюжьей нотации» (англ. camelCase) или запись слов через символ подчеркивания. Обычно применяют первый из них.
  • При выборе имен применяйте только английский язык, т.к. среди разработчиков всего мира принято использовать английский язык для имён переменных.

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

В JavaScript существует два типа области видимости:

  • Глобальные переменные имеют глобальную область видимости – они могут использоваться в любом месте программы, а также в вызываемых программах из других файлов.
  • Локальные переменные имеют локальную область видимости — это переменные, определенные только в коде функции с помощью ключевого слова var либо только в рамках блока {...}, в котором объявлена переменная с помощью ключевого слова let.

Внутри тела функции локальная переменная имеет преимущество перед глобальной переменной с тем же именем:

Выполнить код »

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

age = 15; // переменная будет создана, если ее не было

В строгом режиме "use strict" так делать уже не допускается:

"use strict";
age = 15; // error: age is not defined

Примечание: Подробнее об области видимости переменной мы поговорим, когда будем рассматривать функции.

В ES-2015 предусмотрен новый способ объявления переменных: через let. Областью видимости переменных, объявленных ключевым словом let, является блок, в котором они объявлены. В этом работа оператора let схожа с работой оператора var. Основным отличием является то, что переменная, объявленная через var, видна везде в функции. Переменная, объявленная через let, видна только в рамках блока {...}, в котором объявлена:

Выполнить код »

На заметку: В коде лучше использовать локальные переменные, а не глобаль­ные потому, что ограничение области видимости снижает вероятность того, что значение такой переменной будет случайно заменено значением дру­гой переменной с тем же именем.

Константа – это переменная, которая никогда не изменяется. Вы можете создать именованную константу, доступную только для чтения, используя ключевое слово const. Как правило, имена констант пишутся буквами в верхнем регистре, через подчёркивание. В остальном синтаксис идентификатора константы является таким же, как и у идентификатора обычной переменной.

Имена констант не должны совпадать с именами переменных, объявленных в той же области видимости, например, следующий сценарий выдаст синтаксическую ошибку:

const MAX_SIZE = 99; 
var MAX_SIZE = 33; // ошибка!

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

Выполнить код »
  • В JavaScript можно объявлять переменные используя ключевые слова var, let и const.
  • При объявлении переменной желательно указать ее первоначальное значение, поскольку если забыть ее инициализировать перед первым исполь­зованием, результаты вычисления могут быть неопределенными.
  • JavaScript – это нетипизированный язык, в частности, это значит, что переменная может содержать значение любого типа.
  • Глобальные переменные принято объявлять в начале скрипта, чтобы все функции наследовали эти переменные и их значения.
  • Внутри программной единицы (функции, подпрограммы, блока) локальная переменная имеет преимущество перед глобальной переменной с тем же именем.

  • Копирование значений


    Объявите переменную с именем test и присвойте ему значение – 7. Затем создайте другую переменную с именем test1. Скопируйте значение пременной test в test1. Выведите значение переменной test1. Выведите тип данных переменной test1.

    Показать решение

    Решение:

    Выполнить код »
  • Хороший или плохой фильм?

    Программист хочет создать глобальную переменную film и другую перемен­ную, которая называется так же, но действует только в функции showBadFilm(). Какое сообщение выведет alert из функции showGoodFilm()? А какое сообщение будет выведено, если эту функцию вызвать повторно, но после вызова функции showBadFilm()?

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Хороший или плохой фильм?</title>
    </head>
    
    <body>
    <script>
      var film = "Калина красная";
      function showGoodFilm() {
        alert( film + " - хороший фильм!" );
      }
      function showBadFilm() { 
        film = "11 сентября"; 
        alert( film + " - плохой фильм!" );
      }
    
      showGoodFilm(); // что выведет alert?
      showBadFilm(); // что выведет alert?
      showGoodFilm(); // что выведет alert?
    </script>  
    </body>
    </html>
    
    Показать решение

    Решение:

    Обратите внимание на то, что в функции showBadFilm() перед переменной film отсут­ствует ключевое слово var. Поэтому JavaScript предполагает, что вы хотите переопределить зна­чение глобальной переменной, а не создать одноименную локальную переменную. Поэтому повторный вызов функции showGoodFilm() выведет: "11 сентября – хороший фильм!"

    Выполнить код »
  • Проверка типа данных

    К какому из примитивных типов данных относятся следующие переменные? Постарайтесь ответить не запуская скрипт.

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Проверка типа данных</title>
    </head>
    
    <body>
    <script>
      var film = "Калина красная";
      var 07_agent = "Агент";
      var num = 10;
      var num1 = "10";
      var u = true;
      var x;
      
      alert( typeof Film ); //???
      alert( typeof 07_agent ); //???
      alert( typeof num ); //???
      alert( typeof num1 ); //???
      alert( typeof u ); //???
      alert( typeof x ); //???
    </script>  
    </body>
    </html>
    
    Показать решение

    Решение:

    Обратите внимание на то, что первая переменная объявлена под именем film, а в alert указана переменная Film. Это две разные переменные, поскольку JavaScript – регистрозависимый язык. Имя 07_agent начинается с цифры, а это вызовет синтаксическую ошибку и, как результат – скрипт не сработает.

    Выполнить код »

Комментарии

пожелания к комментариям…
  • Приветствуются комментарии, соответствующие теме урока: вопросы, ответы, предложения.
  • Одну строчку кода оборачивайте в тег <code>, несколько строчек кода — в теги <pre><code>...ваш код...</code></pre>.
  • Допускаются ссылки на онлайн-песочницы (codepen, plnkr, JSBin и др.).