Как задать переменную в javascript

JavaScript Переменные

Ключевые слова let и const объясняются в следующих главах.

Переменные

JavaScript переменные — это контейнеры для хранения значений данных.

В этом примере x , y , и z переменные, объявляются с ключевым словом var :

Пример

var x = 5;
var y = 6;
var z = x + y;

Из приведенного выше примера результат будет такой:

• Переменная x сохранит значение 5
• Переменная y сохранит значение 6
• Переменная z сохранит значение 11

Программирование как в алгебре

В этом примере price1 , price2 и total , тоже являются переменными:

Пример

var price1 = 5;
var price2 = 6;
var total = price1 + price2;

В программирование, как и в алгебре, мы используем переменные (например, price1) для хранения значений.

В программирование, как и в алгебре, мы используем переменные в выражениях (total = price1 + price2).

Из приведенного выше примера вы можете рассчитать, что общая сумма будет 11.

JavaScript переменные — это контейнеры для хранения значений данных.

JavaScript Идентификаторы

Все JavaScript переменные должны быть определены с уникальным именами.

Уникальные имена называются идентификаторами.

К примеру, идентификаторы могут быть короткими именами (например, x и y) или более описательными именами (age, sum, totalVolume).

Общие правила построения для имен переменных (уникальных идентификаторов):

• Имена переменных могут содержать буквы, цифры, символы подчеркивания и знаки доллара
• Имена переменных должны начинаться с буквы
• Имена переменных, также могут начинаться с $ и _ (но мы не будем использовать в этом руководстве)
• Имена переменных чувствительны к регистру (y и Y — разные переменные)
• Зарезервированные слова (например, ключевые слова JavaScript) нельзя использовать в качестве переменных имен

JavaScript идентификаторы чувствительны к регистру.

JavaScript Оператор присваивания

В JavaScript знак равенства ( = ) является оператором «присваивания», а не оператором «равно».

Отличие от алгебры. Следующий пример не имеет смысла в алгебре:

Однако в JavaScript смысл таков: он присваивает значение x + 5 к переменной x.

(Он вычисляет значение x + 5 и помещает результат в x. Значение x увеличивается на 5.)

Оператор «равно» написан, как == в JavaScript.

JavaScript Типы данных

JavaScript переменные могут содержать числа, такие как 100, и текстовые значения, например «Щипунов Андрей».

В программировании, текстовые значения называются текстовыми строками.

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

Строки заключаются в двойные или одинарные кавычки. Числа пишутся без кавычек.

Если вы поместите число в кавычки, оно будет рассматриваться, как текстовая строка.

Пример

var pi = 3.14;
var person = «Щипунов Андрей»;
var answer = ‘Да это я!’;

JavaScript Объявление (создание переменной)

Создание переменной в JavaScript называется «объявлением» переменной.

К примеру, вы объявляете переменную JavaScript с ключевым словом var :

var carName;

После объявления, переменная не имеет значения (технически имеет значение undefined ).

Чтобы присвоить значение переменной, используйте знак равенства:

carName = «Вольво»;

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

var carName = «Вольво»;

В приведенном ниже примере создаем переменную с именем carName и присваиваеваете к ней значение «Вольво».

Затем «выводим» значение внутри параграфа HTML с :

Пример

var carName = «Вольво»;
document.getElementById(«demo»).innerHTML = carName;

Хорошая практика программирования — объявлять все переменные в начале скрипта.

Подтверждение

Вы можете объявить большое количество переменных в одном операторе.

Начните с var и разделите переменные запятыми:

var person = «Щипунов Андрей», carName = «Вольво», price = 200;

Объявление может занимать несколько строк:

var person = «Щипунов Андрей»,
carName = «Вольво»,
price = 200;

Значение = undefined

В компьютерных программах переменные часто объявляются без значения. Значение может быть чем-то, что нужно вычислить, или чем-то, что будет предоставлено позже, введенным пользователем.

Переменная, которая объявленная без значения, будет иметь значение undefined .

Переменная carName, будет иметь значение undefined после выполнения этого оператора:

Пример

var carName;

JavaScript Повторное объявление переменных

Если вы повторно объявите переменную JavaScript, она не потеряет своего значения.

После carName выполнения этих операторов переменная по-прежнему будет иметь значение «Вольво»:

Пример

var carName = «Вольво»;
var carName;

JavaScript Арифметика

Как и в случае с алгеброй, вы можете выполнять арифметические операции с переменными JavaScript, используя такие операторы, как = и + :

Пример

var x = 5 + 2 + 3;

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

JavaScript: Объявление переменных

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

Объявление

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

var num; let num2;

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

var num, num2; let num3, num4;

Инициализация и присваивание значения

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

var color = "чёрный"; let num = 10, num2 = 15;

Переменные в JavaScript не имеют типа, поэтому переменной может быть присвоено значение любого типа, а затем этой же переменной может быть присвоено значение другого типа:

var a = 10; let b = 20; a = "текст"; b = "текст";

Если при объявлении переменной ей не было присвоено никакого значения, она будет иметь специальное значение undefined, до тех пор, пока ей не будет присвоено другое значение:

var a; let b; console.log(a); // undefined console.log(b); // undefined

Обращение к значению

После того как переменная объявлена ключевое слово var или let при использовании переменной указывать не нужно. Чтобы в программе обратиться к значению переменной, надо просто написать имя переменной, интерпретатор JavaScript вместо неё подставит значение, которое хранится в переменной:

var x = 10, msg = "Hello"; alert(x); document.write(msg);

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

var a = 10; let b; b = a; // Тоже самое, что и b = 10;

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

console.log(x); // Ошибка

С этой темой смотрят:

• Переменные и константы
• Область видимости переменных
• Идентификаторы
• Типы данных
• Присваивание
• Методы alert, document.write, prompt

Копирование материалов с данного сайта возможно только с разрешения администрации сайта
и при указании прямой активной ссылки на источник.
2011 – 2023 © puzzleweb.ru | razumnikum.ru

Переменные

JavaScript-приложению обычно нужно работать с информацией. Например:

1. Интернет-магазин – информация может включать продаваемые товары и корзину покупок.
2. Чат – информация может включать пользователей, сообщения и многое другое.

Переменные используются для хранения этой информации.

Переменная

Переменная – это «именованное хранилище» для данных. Мы можем использовать переменные для хранения товаров, посетителей и других данных.

Для создания переменной в JavaScript используйте ключевое слово let .

Приведённая ниже инструкция создаёт (другими словами, объявляет) переменную с именем «message»:

let message;

Теперь можно поместить в неё данные (другими словами, определить переменную), используя оператор присваивания = :

let message; message = 'Hello'; // сохранить строку 'Hello' в переменной с именем message

Строка сохраняется в области памяти, связанной с переменной. Мы можем получить к ней доступ, используя имя переменной:

let message; message = 'Hello!'; alert(message); // показывает содержимое переменной

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

let message = 'Hello!'; // определяем переменную и присваиваем ей значение alert(message); // Hello!

Мы также можем объявить несколько переменных в одной строке:

let user = 'John', age = 25, message = 'Hello';

Такой способ может показаться короче, но мы не рекомендуем его. Для лучшей читаемости объявляйте каждую переменную на новой строке.

Многострочный вариант немного длиннее, но легче для чтения:

let user = 'John'; let age = 25; let message = 'Hello';

Некоторые люди также определяют несколько переменных в таком вот многострочном стиле:

let user = 'John', age = 25, message = 'Hello';

…Или даже с запятой в начале строки:

let user = 'John' , age = 25 , message = 'Hello';

В принципе, все эти варианты работают одинаково. Так что это вопрос личного вкуса и эстетики.

var вместо let

В старых скриптах вы также можете найти другое ключевое слово: var вместо let :

var message = 'Hello';

Ключевое слово var – почти то же самое, что и let . Оно объявляет переменную, но немного по-другому, «устаревшим» способом.

Есть тонкие различия между let и var , но они пока не имеют для нас значения. Мы подробно рассмотрим их в главе Устаревшее ключевое слово «var».

Аналогия из жизни

Мы легко поймём концепцию «переменной», если представим её в виде «коробки» для данных с уникальным названием на ней.

Например, переменную message можно представить как коробку с названием «message» и значением «Hello!» внутри:

Мы можем положить любое значение в коробку.

Мы также можем изменить его столько раз, сколько захотим:

let message; message = 'Hello!'; message = 'World!'; // значение изменено alert(message);

При изменении значения старые данные удаляются из переменной:

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

let hello = 'Hello world!'; let message; // копируем значение 'Hello world' из переменной hello в переменную message message = hello; // теперь две переменные содержат одинаковые данные alert(hello); // Hello world! alert(message); // Hello world!

Повторное объявление вызывает ошибку

Переменная может быть объявлена только один раз.

Повторное объявление той же переменной является ошибкой:

let message = "Это"; // повторение ключевого слова 'let' приводит к ошибке let message = "Другое"; // SyntaxError: 'message' has already been declared

Поэтому следует объявлять переменную только один раз и затем использовать её уже без let .

Функциональные языки программирования

Примечательно, что существуют функциональные языки программирования, такие как Scala или Erlang, которые запрещают изменять значение переменной.

В таких языках однажды сохранённое «в коробку» значение остаётся там навсегда. Если нам нужно сохранить что-то другое, язык заставляет нас создать новую коробку (объявить новую переменную). Мы не можем использовать старую переменную.

Хотя на первый взгляд это может показаться немного странным, эти языки вполне подходят для серьёзной разработки. Более того, есть такая область, как параллельные вычисления, где это ограничение даёт определённые преимущества. Изучение такого языка (даже если вы не планируете использовать его в ближайшее время) рекомендуется для расширения кругозора.

Имена переменных

В JavaScript есть два ограничения, касающиеся имён переменных:

1. Имя переменной должно содержать только буквы, цифры или символы $ и _ .
2. Первый символ не должен быть цифрой.

Примеры допустимых имён:

let userName; let test123;

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

Самое интересное – знак доллара ‘$’ и подчёркивание ‘_’ также можно использовать в названиях. Это обычные символы, как и буквы, без какого-либо особого значения.

Эти имена являются допустимыми:

let $ = 1; // объявили переменную с именем "$" let _ = 2; // а теперь переменную с именем "_" alert($ + _); // 3

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

let 1a; // не может начинаться с цифры let my-name; // дефис '-' не разрешён в имени

Регистр имеет значение

Переменные с именами apple и APPLE – это две разные переменные.

Нелатинские буквы разрешены, но не рекомендуются

Можно использовать любой язык, включая кириллицу или даже иероглифы, например:

let имя = '. '; let 我 = '. ';

Технически здесь нет ошибки, такие имена разрешены, но есть международная традиция использовать английский язык в именах переменных. Даже если мы пишем небольшой скрипт, у него может быть долгая жизнь впереди. Людям из других стран, возможно, придётся прочесть его не один раз.

Зарезервированные имена

Существует список зарезервированных слов, которые нельзя использовать в качестве имён переменных, потому что они используются самим языком.

Например: let , class , return и function зарезервированы.

Приведённый ниже код даёт синтаксическую ошибку:

let let = 5; // нельзя назвать переменную "let", ошибка! let return = 5; // также нельзя назвать переменную "return", ошибка!

Создание переменной без использования use strict

Обычно нам нужно определить переменную перед её использованием. Но в старые времена было технически возможно создать переменную простым присвоением значения без использования let . Это все ещё работает, если мы не включаем use strict в наших файлах, чтобы обеспечить совместимость со старыми скриптами.

// заметка: "use strict" в этом примере не используется num = 5; // если переменная "num" раньше не существовала, она создаётся alert(num); // 5

Это плохая практика, которая приводит к ошибке в строгом режиме:

"use strict"; num = 5; // ошибка: num is not defined

Константы

Чтобы объявить константную, то есть, неизменяемую переменную, используйте const вместо let :

const myBirthday = '18.04.1982';

Переменные, объявленные с помощью const , называются «константами». Их нельзя изменить. Попытка сделать это приведёт к ошибке:

const myBirthday = '18.04.1982'; myBirthday = '01.01.2001'; // ошибка, константу нельзя перезаписать!

Если программист уверен, что переменная никогда не будет меняться, он может гарантировать это и наглядно донести до каждого, объявив её через const .

Константы в верхнем регистре

Широко распространена практика использования констант в качестве псевдонимов для трудно запоминаемых значений, которые известны до начала исполнения скрипта.

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

Например, сделаем константы для различных цветов в «шестнадцатеричном формате»:

const COLOR_RED = "#F00"; const COLOR_GREEN = "#0F0"; const COLOR_BLUE = "#00F"; const COLOR_ORANGE = "#FF7F00"; // . когда нам нужно выбрать цвет let color = COLOR_ORANGE; alert(color); // #FF7F00

• COLOR_ORANGE гораздо легче запомнить, чем «#FF7F00» .
• Гораздо легче допустить ошибку при вводе «#FF7F00» , чем при вводе COLOR_ORANGE .
• При чтении кода COLOR_ORANGE намного понятнее, чем #FF7F00 .

Когда мы должны использовать для констант заглавные буквы, а когда называть их нормально? Давайте разберёмся и с этим.

Название «константа» просто означает, что значение переменной никогда не меняется. Но есть константы, которые известны до выполнения (например, шестнадцатеричное значение для красного цвета), а есть константы, которые вычисляются во время выполнения сценария, но не изменяются после их первоначального назначения.

const pageLoadTime = /* время, потраченное на загрузку веб-страницы */;

Значение pageLoadTime неизвестно до загрузки страницы, поэтому её имя записано обычными, а не прописными буквами. Но это всё ещё константа, потому что она не изменяется после назначения.

Другими словами, константы с именами, записанными заглавными буквами, используются только как псевдонимы для «жёстко закодированных» значений.

Придумывайте правильные имена

В разговоре о переменных необходимо упомянуть, что есть ещё одна чрезвычайно важная вещь.

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

Именование переменных – это один из самых важных и сложных навыков в программировании. Быстрый взгляд на имена переменных может показать, какой код был написан новичком, а какой – опытным разработчиком.

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

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

Несколько хороших правил:

• Используйте легко читаемые имена, такие как userName или shoppingCart .
• Избегайте использования аббревиатур или коротких имён, таких как a , b , c , за исключением тех случаев, когда вы точно знаете, что так нужно.
• Делайте имена максимально описательными и лаконичными. Примеры плохих имён: data и value . Такие имена ничего не говорят. Их можно использовать только в том случае, если из контекста кода очевидно, какие данные хранит переменная.
• Договоритесь с вашей командой об используемых терминах. Если посетитель сайта называется «user», тогда мы должны называть связанные с ним переменные currentUser или newUser , а не, к примеру, currentVisitor или newManInTown .

Звучит просто? Действительно, это так, но на практике для создания описательных и кратких имён переменных зачастую требуется подумать. Действуйте.

Повторно использовать или создавать новую переменную?

И последняя заметка. Есть ленивые программисты, которые вместо объявления новых переменных повторно используют существующие.

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

Такие программисты немного экономят на объявлении переменных, но теряют в десять раз больше при отладке.

Дополнительная переменная – это добро, а не зло.

Современные JavaScript-минификаторы и браузеры оптимизируют код достаточно хорошо, поэтому он не создаёт проблем с производительностью. Использование разных переменных для разных значений может даже помочь движку оптимизировать ваш код.

Итого

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

• let – это современный способ объявления.
• var – это устаревший способ объявления. Обычно мы вообще не используем его, но мы рассмотрим тонкие отличия от let в главе Устаревшее ключевое слово «var» на случай, если это всё-таки вам понадобится.
• const – похоже на let , но значение переменной не может изменяться.

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

Задачи

Работа с переменными

важность: 2

1. Объявите две переменные: admin и name .
2. Запишите строку «Джон» в переменную name .
3. Скопируйте значение из переменной name в admin .
4. Выведите на экран значение admin , используя функцию alert (должна показать «Джон»).

В коде ниже каждая строка решения соответствует одному элементу в списке задач.

let admin, name; // можно объявить две переменные через запятую name = "Джон"; admin = name; alert( admin ); // "Джон"

Объявляем переменную

Мы переключили тему на странице, но строки с кодом получились длинными и трудночитаемыми. А ещё пришлось дважды искать с помощью querySelector один и тот же элемент. Мы его уже один раз нашли, зачем искать снова?

Выход есть! И имя ему — переменная.

Переменная — это способ сохранить данные, дав им понятное название.

В JavaScript переменную можно создать, или, как говорят программисты, объявить, с помощью ключевого слова let . За ним следует имя переменной. После объявления в переменную нужно записать, или присвоить, какое-то значение:

let variableName = 'Я значение переменной!';

Имя переменной может быть почти любым, но не должно начинаться с цифры, а из спецсимволов разрешены только ‘_’ и ‘$’. Кроме того, в JavaScript есть зарезервированные слова, которые нельзя использовать для именования переменных. Имена переменных чувствительны к регистру: header , Header и HEADER — это разные переменные. Но самое главное — чтобы переменная действительно делала код понятнее, её имя должно описывать то, что в ней хранится.

Сохранять в переменные можно что угодно, в том числе элементы:

let header = document.querySelector('header');

Когда в коде встречается переменная, браузер вместо её имени подставляет присвоенное ей значение. Благодаря этому мы можем написать, например, так:

console.log(header); header.classList.add('new-class');

Обратите внимание, что let мы пишем только при объявлении переменной. После этого мы используем переменную, просто указывая её имя.

Давайте создадим в нашей программе переменную и запишем в неё элемент с классом page . С помощью этой переменной мы сделаем наши инструкции короче и понятней. И заодно убедимся, что ничего не сломалось.

Ключевое слово let появилось в JavaScript в 2015 году, до этого для объявления переменных использовалось слово var . Оно работает почти так же, как let , но есть некоторые отличия. О них мы расскажем в следующих частях.

Хотите всё и сразу? HTML, CSS, JavaScript, React, Node.js, оплачиваемая стажировка в Лиге А и гарантия трудоустройства. Записывайтесь на профессию «Фулстек-разработчик», которая стартует 16 января 2024. Всего от 5 250 ₽ в месяц.

Перейти к заданию

• index.html Сплит-режим
• style.css Сплит-режим
• script.js Сплит-режим

На главную Изменить тему