что такое переменная в javascript
Переменные
JavaScript-приложению обычно нужно работать с информацией. Например:
Переменные используются для хранения этой информации.
Переменная
Переменная – это «именованное хранилище» для данных. Мы можем использовать переменные для хранения товаров, посетителей и других данных.
Приведённая ниже инструкция создаёт (другими словами: объявляет или определяет) переменную с именем «message»:
Теперь можно поместить в неё данные, используя оператор присваивания = :
Строка сохраняется в области памяти, связанной с переменной. Мы можем получить к ней доступ, используя имя переменной:
Для краткости можно совместить объявление переменной и запись данных в одну строку:
Мы также можем объявить несколько переменных в одной строке:
Такой способ может показаться короче, но мы не рекомендуем его. Для лучшей читаемости объявляйте каждую переменную на новой строке.
Многострочный вариант немного длиннее, но легче для чтения:
Некоторые люди также определяют несколько переменных в таком вот многострочном стиле:
…Или даже с запятой в начале строки:
В принципе, все эти варианты работают одинаково. Так что это вопрос личного вкуса и эстетики.
В старых скриптах вы также можете найти другое ключевое слово: var вместо let :
Аналогия из жизни
Мы легко поймём концепцию «переменной», если представим её в виде «коробки» для данных с уникальным названием на ней.
Например, переменную message можно представить как коробку с названием «message» и значением «Hello!» внутри:
Мы можем положить любое значение в коробку.
Мы также можем изменить его столько раз, сколько захотим:
При изменении значения старые данные удаляются из переменной:
Мы также можем объявить две переменные и скопировать данные из одной в другую.
Переменная может быть объявлена только один раз.
Повторное объявление той же переменной является ошибкой:
Примечательно, что существуют функциональные языки программирования, такие как Scala или Erlang, которые запрещают изменять значение переменной.
В таких языках однажды сохранённое «в коробку» значение остаётся там навсегда. Если нам нужно сохранить что-то другое, язык заставляет нас создать новую коробку (объявить новую переменную). Мы не можем использовать старую переменную.
Хотя на первый взгляд это может показаться немного странным, эти языки вполне подходят для серьёзной разработки. Более того, есть такая область, как параллельные вычисления, где это ограничение даёт определённые преимущества. Изучение такого языка (даже если вы не планируете использовать его в ближайшее время) рекомендуется для расширения кругозора.
Имена переменных
В JavaScript есть два ограничения, касающиеся имён переменных:
Примеры допустимых имён:
Самое интересное – знак доллара ‘$’ и подчёркивание ‘_’ также можно использовать в названиях. Это обычные символы, как и буквы, без какого-либо особого значения.
Эти имена являются допустимыми:
Примеры неправильных имён переменных:
Переменные с именами apple и AppLE – это две разные переменные.
Можно использовать любой язык, включая кириллицу или даже иероглифы, например:
Технически здесь нет ошибки, такие имена разрешены, но есть международная традиция использовать английский язык в именах переменных. Даже если мы пишем небольшой скрипт, у него может быть долгая жизнь впереди. Людям из других стран, возможно, придётся прочесть его не один раз.
Существует список зарезервированных слов, которые нельзя использовать в качестве имён переменных, потому что они используются самим языком.
Приведённый ниже код даёт синтаксическую ошибку:
Это плохая практика, которая приводит к ошибке в строгом режиме:
Константы
Чтобы объявить константную, то есть, неизменяемую переменную, используйте const вместо let :
Константы в верхнем регистре
Широко распространена практика использования констант в качестве псевдонимов для трудно запоминаемых значений, которые известны до начала исполнения скрипта.
Названия таких констант пишутся с использованием заглавных букв и подчёркивания.
Например, сделаем константы для различных цветов в «шестнадцатеричном формате»:
Когда мы должны использовать для констант заглавные буквы, а когда называть их нормально? Давайте разберёмся и с этим.
Название «константа» просто означает, что значение переменной никогда не меняется. Но есть константы, которые известны до выполнения (например, шестнадцатеричное значение для красного цвета), а есть константы, которые вычисляются во время выполнения сценария, но не изменяются после их первоначального назначения.
Значение pageLoadTime неизвестно до загрузки страницы, поэтому её имя записано обычными, а не прописными буквами. Но это всё ещё константа, потому что она не изменяется после назначения.
Другими словами, константы с именами, записанными заглавными буквами, используются только как псевдонимы для «жёстко закодированных» значений.
Придумывайте правильные имена
В разговоре о переменных необходимо упомянуть, что есть ещё одна чрезвычайно важная вещь.
Название переменной должно иметь ясный и понятный смысл, говорить о том, какие данные в ней хранятся.
Именование переменных – это один из самых важных и сложных навыков в программировании. Быстрый взгляд на имена переменных может показать, какой код был написан новичком, а какой – опытным разработчиком.
В реальном проекте большая часть времени тратится на изменение и расширение существующей кодовой базы, а не на написание чего-то совершенно нового с нуля. Когда мы возвращаемся к коду после какого-то промежутка времени, гораздо легче найти информацию, которая хорошо размечена. Или, другими словами, когда переменные имеют хорошие имена.
Пожалуйста, потратьте время на обдумывание правильного имени переменной перед её объявлением. Делайте так, и будете вознаграждены.
Несколько хороших правил:
Звучит просто? Действительно, это так, но на практике для создания описательных и кратких имён переменных зачастую требуется подумать. Действуйте.
И последняя заметка. Есть ленивые программисты, которые вместо объявления новых переменных повторно используют существующие.
В результате их переменные похожи на коробки, в которые люди бросают разные предметы, не меняя на них этикетки. Что сейчас находится внутри коробки? Кто знает? Нам необходимо подойти поближе и проверить.
Такие программисты немного экономят на объявлении переменных, но теряют в десять раз больше при отладке.
Дополнительная переменная – это добро, а не зло.
Современные JavaScript-минификаторы и браузеры оптимизируют код достаточно хорошо, поэтому он не создаёт проблем с производительностью. Использование разных переменных для разных значений может даже помочь движку оптимизировать ваш код.
Итого
Переменные должны быть названы таким образом, чтобы мы могли легко понять, что у них внутри.
Грамматика и типы
В данной главе рассматриваются базовая грамматика, объявление переменных, типы данных и литералы.
Основы
JavaScript заимствует большую часть синтаксиса из Java, но также испытал влияние таких языков, как Awk, Perl и Python.
JavaScript чувствителен к регистру и использует кодировку символов Unicode. Например, слово Früh («рано» по-немецки) может использоваться в качестве имени переменной.
Но, переменная früh не то же самое что Früh потому что JavaScript чувствителен к регистру.
В JavaScript инструкции называются statements и разделяются точкой с запятой (;). Пробел (space), табуляция (tab) и перевод строки (newline) называются пробельными символами (whitespace). Исходный текст скриптов на JavaScript сканируется слева направо и конвертируется в последовательность входных элементов, являющихся токенами (tokens), управляющими символами, символами конца строки, комментариями или пробельными символами. ECMAScript также определяет некоторые ключевые слова и литералы и устанавливает правила для автоматической вставки точек с запятой (ASI), чтобы обозначить конец инструкций (statements). Однако, рекомендуется всегда ставить точку с запятой в конце каждой инструкции вручную, чтобы избежать побочных эффектов. Чтобы получить более подробную информацию, прочитайте Lexical Grammar.
Комментарии
Синтаксис комментариев является таким же, как и в C++ и во многих других языках:
Объявления
В JavaScript существует три вида объявлений:
var Объявляет переменную, инициализация переменной значением является необязательной. let Объявляет локальную переменную в области видимости блока, инициализация переменной значением является необязательной. const Объявляет именованную константу, доступную только для чтения.
Переменные
Вы можете использовать переменные как символические имена для значений в вашем приложении. Имена переменных называются identifiers и должны соответствовать определённым правилам.
Идентификатор в JavaScript должен начинаться с буквы, нижнего подчёркивания (_) или знака доллара ($); последующие символы могут также быть цифрами (0-9). Поскольку JavaScript чувствителен к регистру, буквы включают символы от «A» до «Z» (верхний регистр) и символы от «a» до «z» (нижний регистр).
Вы можете использовать в идентификаторах буквы ISO 8859-1 или Unicode, например, å или ü. Вы также можете использовать управляющие последовательности Unicode как символы в идентификаторах.
Объявление переменных
Вы можете объявить переменную тремя способами:
Присваивание значений
При попытке доступа к необъявленной переменной или переменной до её объявления будет выброшено исключение ReferenceError :
Значение null ведёт себя как 0 в числовом контексте и как false в логическом контексте:
Область видимости переменных
Когда вы объявляете переменную вне функции, то такая переменная называется глобальной переменной, т.к. доступна любому коду в текущем документе. Когда вы объявляете переменную внутри функции, то такая переменная называется локальной переменной, т.к. доступна только внутри данной функции.
Поднятие переменных
Другим необычным свойством переменных в JavaScript является то, что можно сослаться на переменную, которая объявляется позже, и не получить при этом исключения. Эта концепция известна как поднятие (hoisting) переменных; переменные в JavaScript поднимаются в самое начало функции или выражения. Однако, переменные, которые ещё не были инициализированы, возвратят значение undefined :
Приведённые выше примеры будут интерпретироваться так же, как:
Из-за поднятия переменных, все операторы var в функции следует размещать настолько близко к началу функции, насколько это возможно. Следование этому правилу улучшает ясность кода.
Поднятие функций
Для функций: только определения функций поднимаются наверх, но не функции, определённые через выражения.
Глобальные переменные
Константы
Нельзя изменить значение константы через присваивание или повторное объявление во время выполнения скрипта. Значение должно быть указано при инициализации.
Нельзя объявить константу с таким же именем, как у функции или переменной в одной области видимости. Следующие примеры выбросят исключение TypeError :
Однако, атрибуты объектов не защищены, так что следующее выражение выполнится без проблем
Структуры и типы данных
Типы данных
Последний стандарт ECMAScript определяет семь типов данных:
Хотя типов данных относительно немного, но они позволяют вам выполнять полезные функции в ваших приложениях. Объекты и функции являются другими фундаментальными элементами языка. Вы можете думать об объектах как об именованных контейнерах для значений и о функциях как о процедурах, которые ваше приложение может исполнять.
Преобразование типов данных
JavaScript — это динамически типизированный язык. Это означает, что вам не нужно указывать тип данных переменной, когда вы её объявляете, типы данных преобразуются автоматически по мере необходимости во время выполнения скрипта. Так, например, вы можете определить переменную следующим образом:
А позже вы можете присвоить этой переменной строковое значение, например:
Поскольку JavaScript является динамически типизированным, это присваивание не вызовет сообщения об ошибке.
В выражениях с другими операторами JavaScript не преобразует числовые значения в строковые. Например:
Преобразование строк в числа
В том случае, если значение, представляющее число, хранится в памяти как строка, можно использовать методы для преобразования строк в числа:
parseInt преобразует строку в целочисленное значение. Хорошей практикой является всегда указывать основание системы счисления (параметр radix ).
Альтернативным способом для получения числа из строки является использование оператора «унарный плюс»:
Литералы
Литералы используются для представления значений в JavaScript. Они являются фиксированными значениями, а не переменными. В данной секции рассматриваются следующие типы литералов:
Литерал массива
Литерал массива — это список из нуля или более выражений, каждое из которых представляет элемент массива, заключённый в квадратные скобки ( [] ). Когда вы создаёте массив, используя литерал массива, он инициализируется с помощью переданных значений, которые будут являться его элементами, длина массива будет равна числу переданных аргументов.
В следующем примере создаётся массив coffees с тремя элементам и длиной, равной трём:
Замечание : Обратите внимание на то, что литерал массива является инициализатором объекта. Чтобы получить более подробную информацию, прочитайте Использование инициализаторов объекта.
Если массив создаётся с помощью литерала в скрипте верхнего уровня, то JavaScript интерпретирует массив каждый раз, когда вычисляет выражение, содержащее литерал. Кроме того, литерал, используемый в функции, создаётся каждый раз, когда вызывается функция.
Лишние запятые в литералах array
Замечание : Лишние запятые могут вызывать ошибки в старых версиях браузеров, поэтому лучше избегать их использования.
В следующем примере длина массива равна четырём, элементы myList[0] и myList[2] имеют значение undefined :
Понимание поведения лишних запятых важно для понимания JavaScript как языка. Однако, когда будете писать свой собственный код, то имейте в виду, что явное объявление отсутствующих элементов как undefined улучшает ясность кода и лёгкость его поддержки.
Логические литералы
Литерал целого числа
Целые числа могут быть записаны в десятичной, шестнадцатеричной, восьмеричной и двоичной системах счисления.
Несколько примеров целочисленных литералов:
Литерал числа с плавающей точкой
Числа с плавающей точкой могут состоять из следующих частей:
Экспонента состоит из символа «e» или «E», за которым следует целое число, которое может иметь знак. Число с плавающей точкой должно состоять по крайней мере из одной цифры и либо десятичной точки, либо символа «e» (или «E»).
В более сжатой форме синтаксис выглядит следующим образом:
Литерал объекта
Литерал объекта — это список из нуля или более пар, состоящих из имён свойств и связанных с ними значений, заключённый в фигурные скобки ( <> ). Вам не следует использовать литерал объекта в начале выражения, т.к. это приведёт к ошибке или к поведению, которого вы не ожидаете, потому что символ «<" будет интерпретироваться как начало блока.
Кроме того, вы можете использовать числовой или строковой литералы в именах свойств или вкладывать один объект в другой. Например:
Обратите внимание на следующий пример:
RegExp литерал
Строковый литерал
Строковый литерал — это ноль или более символов, заключённых в двойные ( » ) или одинарные ( ‘ ) кавычки. Строка должна быть ограничена кавычками одного типа, т.е. либо обе одинарные, либо обе двойные. Например:
В ES2015 также доступны шаблоны строк. Шаблоны строк представляют собой синтаксический сахар для конструирования строк. Это похоже на возможности интерполяции строк в Perl, Python и других. Дополнительно, может быть добавлен тег, позволяющий настраивать конструирование строк, избегая атак внедрения и построения структур данных высокого уровня из содержимого строки.
Использование специальных символов в строках
Кроме обычных символов вы также можете включать специальные символы в строки.
В следующей таблице перечислены специальные символы, которые вы можете использовать.
| Символ | Значение |
|---|---|
| \b | Возврат (Backspace) |
| \f | Перевод или прогон страницы (Form feed) |
| \n | Перевод строки (New line) |
| \r | Возврат каретки (Carriage return) |
| \t | Табуляция (Tab) |
| \v | Вертикальная табуляция (Vertical tab) |
| \’ | Апостроф или одинарная кавычка |
| \» | Двойная кавычка |
| \\ | Обратная косая черта (Backslash) |
| \XXX | |
| \u | Символ в UTF-32BE. Например, \u <2F804>обозначает то же, что обычная запись \uD87E\uDC04. |
Экранирующие символы
Для символов, не перечисленных в вышеприведённой таблице, предваряющая обратная косая черта игнорируется. Такое использование не является рекомендованным (deprecated) и вам следует избегать его.
Вы можете вставить кавычку в строку, если поставите перед ней обратную косую черту. Это называется экранированием кавычек. Например:
Чтобы включить обратную косую черту в строку, перед ней нужно поставить ещё одну обратную косую черту. Например:
Вы также можете экранировать перевод строки. Обратная косая черта и перевод строки будут удалены из содержимого строки. Например:
Хотя JavaScript не поддерживает синтаксис «heredoc» (форматированный текст в одной строковой переменной), но вы можете эмулировать его, добавив перевод строки и обратную косую черту в конец каждой строки:
Дополнительная информация
Данная глава сфокусирована на базовом синтаксисе для объявлений и типов. Чтобы получить более подробную информацию о конструкциях JavaScript, прочитайте:
В следующей главе рассматриваются управляющие конструкции и обработка ошибок.
JavaScript Переменные
Пример
Из приведенного выше примера вы можете ожидать:
Использование let и const (2015)
До 2015 года использование ключевого слова var было единственным способом объявить переменную JavaScript.
Safari 10 и Edge 14 были первыми браузерами, полностью поддерживающими версию ES6:
| Chrome 58 | Edge 14 | Firefox 54 | Safari 10 | Opera 55 |
| Jan 2017 | Aug 2016 | Mar 2017 | Jul 2016 | Aug 2018 |
По состоянию на начало 2021 года практически все современные браузеры поддерживают версию JavaScript 2015 (ES6).
Очень похоже на алгебру
Пример
В программировании, как и в алгебре, мы используем переменные (например, price1) для хранения значений.
В программировании, как и в алгебре, мы используем переменные в выражениях (total = price1 + price2).
Из приведенного выше примера вы можете рассчитать сумму, которая равна 11.
JavaScript Идентификаторы
Все JavaScript переменные должны быть идентифицированы с помощью уникальных имён.
Эти уникальные имена называются идентификаторами.
Идентификаторы могут быть короткими именами (например, x и y) или более описательными именами (age, sum, totalVolume).
Общие правила построения имен для переменных (уникальные идентификаторы):
JavaScript идентификаторы чувствительны к регистру.
Оператор присваивания
В JavaScript знак равенства ( = ) является оператором «присваивания», а не оператором «равно».
Это такое отличие от алгебры. Следующее выражение не имеет смысла в алгебре:
В JavaScript, однако, такое выражение имеет смысл: х присваивается значение x + 5.
(Вычисляется значение x + 5 и результат помещается в x. Значение x увеличивается на 5.)
Оператор «равно» в JavaScript записывается как == (два знака «равно»).
JavaScript Типы данных
В программировании текстовые значения называются текстовыми строками.
JavaScript может обрабатывать многие типы данных, но сейчас просто подумайте о числах и строках.
Строки пишутся в двойных или одинарных кавычках. Числа пишутся без кавычек.
Если вы поставите число в кавычки, оно будет рассматриваться как текстовая строка.
Пример
Объявление (создание) переменных JavaScript
Создание переменной в JavaScript называется «объявлением» переменной.
Вы объявляете переменную JavaScript с ключевым словом var :
Чтобы присвоить значение переменной, используйте знак равенства = :
Вы также можете присвоить значение переменной при объявлении её:
В приведенном ниже примере мы создаем переменную с именем carName и присваиваем ей значение «Volvo».
Затем мы «выводим» значение внутри HTML параграфа с :
Пример
Одна инструкция, много переменных
Вы можете объявить много переменных в одной инструкции.
Начните инструкцию с var и разделите переменные запятой:
Объявление может занимать несколько строк:
Значение = undefined (не определено)
В компьютерных программах переменные часто объявляются без значения. Значение может быть чем-то, что должно быть рассчитано, или что-то, что будет предоставлено позже, например, пользовательский ввод.
Переменная carName будет иметь значение undefined после выполнения этой инструкции:
Пример
Повторное объявление переменных JavaScript
Если вы повторно объявите переменную JavaScript, она не потеряет своего значения.
Переменная carName по-прежнему будет иметь значение «Volvo» после выполнения этих инструкций:
Пример
JavaScript Арифметика
Как и в случае с алгеброй, вы можете выполнять арифметику с переменными JavaScript, используя такие операторы, как = и + :
Пример
Вы также можете добавить строки, но строки будут объединены:
Пример
Также попробуйте это:
Пример
Если взять число в кавычки, остальные числа будут считаться строками и объединятся.
Теперь попробуйте это:
Пример
ПАЛИТРА ЦВЕТОВ
ПРИСОЕДИНЯЙТЕСЬ!
Получите ваш
Сертификат сегодня!
Связь с админом
Если вы хотите сообщить об ошибке, а также внести предложение о работе сайта, добавить объявление или рекламу на сайт, не стесняйтесь отправить админу электронное письмо на email:
Топ Учебники
Топ Справочники
Топ Примеры
Веб Сертификаты
Этот сайт оптимизирован для обучения и тестирования. Примеры могут быть упрощены для улучшения чтения и базового понимания. Учебные пособия, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность и работоспособность всего контента. Используя этот сайт, вы соглашаетесь с тем, что прочитали и приняли условия использования, cookie и политику конфиденциальности.
Также вы можете абсолютно бесплатно скачать офлайн версию сайта W3Schools на русском архивом с GitHub и пользоваться локально на своём компьютере.
Также доступна версия сайта W3Schools на украинском языке.
Copyright 1999-2021 by Refsnes Data. All Rights Reserved.
Сайт работает на фреймворке W3.CSS.
Переменные в JavaScript
Курс: Основы HTML и CSS
Курс: Разработка на C#
Курс: Python-разработчик с нуля
Осваивайте профессию, начните зарабатывать, а платите через год!
Курсы Python Акция! Бесплатно!
Станьте хакером на Python за 3 дня
Веб-вёрстка. CSS, HTML и JavaScript
Станьте веб-разработчиком с нуля
Объявление переменных
Прежде чем использовать переменную в JavaScript, ее необходимо объявить. Для объявления или, другими словами, создания переменной используется ключевое слово var (от variable — переменная):
Значение переменной сохраняется в соответствующей области памяти и в дальнейшем доступ к нему осуществляется при обращении по имени. Если же переменную не инициализировать, то ее начальное значение остается неопределенным undefined :
При желании можно объявить сразу несколько переменных, разделив их запятыми:
JavaScript – это нетипизированный язык. Это означает, что переменная JavaScript может содержать значение любого типа, в отличие от Java- или C-переменной, в которой может содержаться только определенный тип данных, заданный при ее объявлении.
Так, в JavaScript можно присвоить переменной число, а затем присвоить той же переменной строку. Тип значения переменной может меняться во время выполнения программы, и JavaScript позаботится об этом автоматически.
Значение в переменной можно изменять сколько угодно раз:
При объявлении можно инициализировать переменную, а затем скопировать значение переменной в новую переменную.
Когда одна переменная с примитивным значением присваивается другой, создается копия значения, хранящегося в ячейке памяти, а затем она записывается по адресу другой переменной, например:
Имена переменных
Вслед за первым символом имени переменной можно использовать последовательность букв, цифр и символа подчеркивания без пробелов и знаков препинания. Поскольку JavaScript чувствителен к регистру, буквы включают символы от «A» до «Z» (верхний регистр) и символы от «a» до «z» (нижний регистр). Вы можете использовать буквы ISO 8859-1 или Unicode, например, å или ü.
Примеры правильных имен переменных:
Примеры неправильных имен переменных:
Например, следующий сценарий выдаст синтаксическую ошибку:
Имя переменной должно быть понятным и максимально чётко соответствовать хранимым в ней данным.
Область видимости переменной
Внутри тела функции локальная переменная имеет преимущество перед глобальной переменной с тем же именем: