Большую часть времени приложению JavaScript приходится работать с информацией. Вот два примера:
Интернет-магазин – информация может включать в себя продаваемые товары и корзину покупок.
Приложение чата — информация может включать пользователей, сообщения и многое другое.
Переменные используются для хранения этой информации.
Переменная — это «именованное хранилище» данных. Мы можем использовать переменные для хранения вкусностей, посетителей и других данных.
Чтобы создать переменную в JavaScript, используйте ключевое слово let .
Следующий оператор создает (другими словами: объявляет ) переменную с именем «сообщение»:
пусть сообщение;
Теперь мы можем поместить в него некоторые данные, используя оператор присваивания = :
пусть сообщение; сообщение = 'Привет'; // сохраняем строку «Hello» в переменной с именем message
Теперь строка сохраняется в области памяти, связанной с переменной. Мы можем получить к нему доступ, используя имя переменной:
пусть сообщение; сообщение = 'Привет!'; предупреждение (сообщение); // показывает содержимое переменной
Для краткости мы можем объединить объявление и присвоение переменной в одну строку:
let message = 'Привет!'; // определяем переменную и присваиваем значение предупреждение (сообщение); // Привет!
Мы также можем объявить несколько переменных в одной строке:
let user = «Джон», age = 25, message = «Привет»;
Это может показаться короче, но мы не рекомендуем этого делать. Для лучшей читаемости используйте одну строку для каждой переменной.
Многострочный вариант немного длиннее, но его легче читать:
пусть пользователь = 'Джон'; пусть возраст = 25; пусть сообщение = 'Привет';
Некоторые люди также определяют несколько переменных в этом многострочном стиле:
пусть пользователь = 'Джон', возраст = 25, сообщение = 'Привет';
…Или даже в стиле «сначала запятая»:
пусть пользователь = 'Джон' , возраст = 25 , сообщение = 'Привет';
Технически все эти варианты делают одно и то же. Так что это вопрос личного вкуса и эстетики.
var вместо let
В старых скриптах вы также можете встретить другое ключевое слово: var вместо let :
вар сообщение = 'Привет';
Ключевое слово var почти такое же, как и let . Он также объявляет переменную, но немного другим, «старым» способом.
Между let и var есть тонкие различия, но они пока не имеют для нас значения. Мы рассмотрим их подробно в главе «Старый «вар».
Мы можем легко понять концепцию «переменной», если представить ее как «коробку» для данных с наклейкой с уникальным именем.
Например, переменную message можно представить как поле с надписью "message" и значением "Hello!" в нем:
Мы можем поместить в поле любое значение.
Мы также можем изменить его столько раз, сколько захотим:
пусть сообщение; сообщение = 'Привет!'; сообщение = 'Мир!'; // значение изменено предупреждение (сообщение);
При изменении значения старые данные удаляются из переменной:
Мы также можем объявить две переменные и скопировать данные из одной в другую.
let hello = 'Привет, мир!'; пусть сообщение; // копируем «Hello world» из «Hello» в сообщение сообщение = привет; // теперь две переменные содержат одни и те же данные оповещение (привет); // Привет, мир! предупреждение (сообщение); // Привет, мир!
Объявление дважды вызывает ошибку
Переменная должна быть объявлена только один раз.
Повторное объявление одной и той же переменной является ошибкой:
пусть сообщение = «Это»; // повторение 'let' приводит к ошибке let message = "Это"; // Синтаксическая ошибка: «сообщение» уже объявлено
Итак, мы должны объявить переменную один раз, а затем обращаться к ней без let .
Функциональные языки
Интересно отметить, что существуют так называемые чисто функциональные языки программирования, такие как Haskell, которые запрещают изменение значений переменных.
В таких языках, как только значение сохраняется «в ящике», оно остается там навсегда. Если нам нужно сохранить что-то еще, язык заставляет нас создать новый блок (объявить новую переменную). Мы не можем повторно использовать старый.
Хотя на первый взгляд это может показаться немного странным, эти языки вполне способны к серьезному развитию. Более того, существуют такие области, как параллельные вычисления, где это ограничение дает определенные преимущества.
В JavaScript есть два ограничения на имена переменных:
Имя должно содержать только буквы, цифры или символы $ и _ .
Первый символ не должен быть цифрой.
Примеры допустимых имен:
пусть имя пользователя; пусть test123;
Если имя содержит несколько слов, обычно используется верблюжий регистр. То есть: слова идут одно за другим, каждое слово, кроме первого, начинается с заглавной буквы: myVeryLongName .
Что интересно — в именах также можно использовать знак доллара '$' и подчеркивание '_' . Это обычные символы, как и буквы, без особого значения.
Эти имена действительны:
пусть $ = 1; // объявлена переменная с именем "$" пусть _ = 2; // и теперь переменная с именем "_" предупреждение ($ + _); // 3
Примеры неправильных имен переменных:
пусть 1а; // не может начинаться с цифры пусть мое имя; // дефисы '-' в имени не допускаются
Дело имеет значение
Переменные с именами apple и APPLE — это две разные переменные.
Нелатинские буквы разрешены, но не рекомендуются.
Возможно использование любого языка, включая кириллицу, китайские логотипы и т.п., вот так:
пусть имя = '...'; пусть 我 = '...';
Технически ошибки здесь нет. Такие имена разрешены, но существует международное соглашение об использовании английского языка в именах переменных. Даже если мы пишем небольшой сценарий, у него может быть долгая жизнь впереди. Людям из других стран, возможно, когда-нибудь придется это прочитать.
Зарезервированные имена
Существует список зарезервированных слов, которые нельзя использовать в качестве имен переменных, поскольку они используются самим языком.
Например: let , class , return и function зарезервированы.
Код ниже дает синтаксическую ошибку:
пусть пусть = 5; // не могу назвать переменную "let", ошибка! пусть возврат = 5; // также нельзя назвать его «возвратом», ошибка!
Назначение без use strict
Обычно нам необходимо определить переменную перед ее использованием. Но в старые времена было технически возможно создать переменную простым присвоением значения без использования let . Это по-прежнему работает, если мы не используем в наших скриптах use strict для обеспечения совместимости со старыми скриптами.
// примечание: в этом примере нет «использовать строгое» число = 5; // переменная "num" создается, если она не существовала оповещение (число); // 5
Это плохая практика, которая может привести к ошибке в строгом режиме:
«используйте строгий»; число = 5; // ошибка: номер не определен
Чтобы объявить постоянную (неизменяющуюся) переменную, используйте const вместо let :
const myBirthday = '18.04.1982';
Переменные, объявленные с использованием const называются «константами». Их нельзя переназначить. Попытка сделать это приведет к ошибке:
const myBirthday = '18.04.1982'; мойДень Рождения = '01.01.2001'; // ошибка, невозможно переназначить константу!
Когда программист уверен, что переменная никогда не изменится, он может объявить ее с помощью const чтобы гарантировать и сообщить об этом факте всем.
Существует широко распространенная практика использования констант в качестве псевдонимов для трудно запоминающихся значений, которые известны до выполнения.
Такие константы называются заглавными буквами и знаками подчеркивания.
Например, давайте создадим константы для цветов в так называемом «веб-» (шестнадцатеричном) формате:
const COLOR_RED = "#F00"; const COLOR_GREEN = "#0F0"; const COLOR_BLUE = "#00F"; const COLOR_ORANGE = "#FF7F00"; // ...когда нам нужно выбрать цвет пусть цвет = COLOR_ORANGE; предупреждение (цвет); // #FF7F00
Преимущества:
COLOR_ORANGE запомнить гораздо легче, чем "#FF7F00" .
Гораздо проще ошибиться в "#FF7F00" чем COLOR_ORANGE .
При чтении кода COLOR_ORANGE гораздо более значим, чем #FF7F00 .
Когда нам следует использовать заглавные буквы для обозначения константы, а когда следует называть ее обычным образом? Давайте проясним это.
Быть «константой» просто означает, что значение переменной никогда не меняется. Но некоторые константы известны до выполнения (например, шестнадцатеричное значение красного цвета), а некоторые константы вычисляются во время выполнения, во время выполнения, но не изменяются после их первоначального назначения.
Например:
const pageLoadTime = /* время, необходимое веб-странице для загрузки */;
Значение pageLoadTime неизвестно до загрузки страницы, поэтому оно называется обычным. Но это все равно константа, поскольку не меняется после присвоения.
Другими словами, константы с заглавными буквами используются только как псевдонимы для «жестко запрограммированных» значений.
Говоря о переменных, есть еще одна чрезвычайно важная вещь.
Имя переменной должно иметь ясное и очевидное значение, описывающее данные, которые оно хранит.
Именование переменных — один из самых важных и сложных навыков в программировании. Взглянув на имена переменных, можно определить, какой код был написан новичком, а какой – опытным разработчиком.
В реальном проекте большая часть времени тратится на изменение и расширение существующей базы кода, а не на написание чего-то совершенно отдельного с нуля. Когда мы возвращаемся к какому-то коду после того, как какое-то время занимались чем-то другим, гораздо легче найти хорошо размеченную информацию. Или, другими словами, когда переменные имеют хорошие имена.
Пожалуйста, подумайте о правильном имени переменной, прежде чем объявлять ее. Это щедро отплатит вам.
Вот некоторые правила, которые полезно соблюдать:
Используйте удобочитаемые имена, такие как userName или shoppingCart .
Держитесь подальше от сокращений или коротких названий, таких как a , b и c , если вы не знаете, что делаете.
Названия делайте максимально информативными и краткими. Примерами плохих имен являются data и value . Такие названия ничего не говорят. Их можно использовать только в том случае, если из контекста кода становится совершенно очевидно, на какие данные или значение ссылается переменная.
Согласуйте условия внутри своей команды и в уме. Если посетитель сайта называется «пользователем», то мы должны назвать соответствующие переменные currentUser или newUser вместо currentVisitor или newManInTown .
Звучит просто? Действительно, это так, но создание описательных и кратких имен переменных на практике — нет. Действуй.
Использовать повторно или создавать?
И последнее замечание. Есть некоторые ленивые программисты, которые вместо объявления новых переменных склонны повторно использовать существующие.
В результате их переменные подобны коробкам, в которые люди бросают разные вещи, не меняя при этом наклеек. Что сейчас внутри коробки? Кто знает? Нам нужно подойти поближе и проверить.
Такие программисты немного экономят на объявлении переменных, но теряют в десятки раз больше на отладке.
Дополнительная переменная – это добро, а не зло.
Современные минификаторы JavaScript и браузеры достаточно хорошо оптимизируют код, поэтому проблем с производительностью не возникает. Использование разных переменных для разных значений может даже помочь движку оптимизировать ваш код.
Мы можем объявить переменные для хранения данных, используя ключевые слова var , let или const .
let – современное объявление переменной.
var – это объявление переменной старой школы. Обычно мы его вообще не используем, но мы рассмотрим тонкие отличия от let в главе «Старый «var», на тот случай, если они вам понадобятся.
const – похож на let , но значение переменной изменить нельзя.
Переменные должны быть названы так, чтобы мы могли легко понять, что внутри них.
важность: 2
Объявите две переменные: admin и name .
Присвойте значение "John" name .
Скопируйте значение из name в admin .
Покажите значение admin с помощью alert (необходимо вывести «Джон»).
В приведенном ниже коде каждая строка соответствует элементу в списке задач.
пусть админ, имя; // можем объявить две переменные одновременно имя = «Джон»; администратор = имя; оповещение (администратор); // "Джон"
важность: 3
Создайте переменную с названием нашей планеты. Как бы вы назвали такую переменную?
Создайте переменную для хранения имени текущего посетителя веб-сайта. Как бы вы назвали эту переменную?
Это просто:
let OurPlanetName = «Земля»;
Обратите внимание: мы могли бы использовать более короткое название planet , но может быть неочевидно, к какой планете оно относится. Приятно быть более многословным. По крайней мере, пока переменная не станет NotTooLong.
пусть currentUserName = «Джон»;
Опять же, мы могли бы сократить его до userName если точно знаем, что пользователь является текущим.
Современные редакторы и автозаполнение упрощают написание длинных имен переменных. Не экономьте на них. Имя, состоящее из трех слов, подойдет.
А если в вашем редакторе нет правильного автодополнения, приобретите новый.
важность: 4
Изучите следующий код:
const день рождения = '18.04.1982'; const age = someCode (день рождения);
Здесь у нас есть постоянная дата birthday , а также константа age .
age рассчитывается от birthday с помощью someCode() , что означает вызов функции, которую мы еще не объяснили (скоро объясним!), но детали здесь не имеют значения, дело в том, что age каким-то образом рассчитывается на основе birthday .
Было бы правильно использовать заглавные буквы для birthday ? По age ? Или даже для обоих?
const ДЕНЬ РОЖДЕНИЯ = '18.04.1982'; // сделать день рождения заглавными буквами? const AGE = someCode(ДЕНЬ РОЖДЕНИЯ); // сделать возраст заглавными буквами?
Обычно мы используем верхний регистр для констант, которые «жестко запрограммированы». Или, другими словами, когда значение известно до выполнения и напрямую записано в код.
В этом коде birthday именно такой. Поэтому мы могли бы использовать для этого верхний регистр.
Напротив, age оценивается во время выполнения. Сегодня у нас один век, через год будет другой. Он постоянен в том смысле, что не меняется при выполнении кода. Но это немного «меньше константы», чем birthday »: оно рассчитывается, поэтому нам следует оставить его в нижнем регистре.