A. Введение в переменные JavaScript: -
Что такое переменные?
Переменные — это контейнеры, которые используются, когда вы хотите сохранить в них какие-то данные. Вы также можете представить переменную в качестве заполнителя для значения, например, когда вы идете за покупками, вы носите сумку с фруктами внутри, поэтому сумка является переменной, а фрукты являются значением переменной.
Точно так же, как фрукты в мешке, значения переменных могут меняться, а могут и не меняться.
Давайте посмотрим пример,
let name = "RAJAT AGRAWAL";
В приведенном выше фрагменте кода name — это переменная, в которой хранится значение RAJAT AGRAWAL.
Следует отметить, что переменная может содержать только значение в каждый момент времени, и это значение может быть любого типа.
B. Объявление переменных в JavaScript: -
В JavaScript есть разные способы объявления переменных. Это:
- Использование ключевого слова let.
- Использование ключевого слова const.
- Использование ключевого слова var.
Теперь давайте воспользуемся всеми этими ключевыми словами, чтобы лучше понять их.
- Используя ключевое слово let :-
Чтобы объявить переменную с помощью ключевого слова let, вы можете рассмотреть пример фрагмента кода, показанный ниже.
let name; let isCoding;
В приведенном выше коде я создаю две переменные с именами name и isCoding.
Ключевое слово let появилось в версии JavaScript ES6. Это самый популярный способ создания переменных, поскольку он менее подвержен ошибкам и более стабилен, чем ключевое слово var.
Обе переменные, созданные в приведенном выше коде, определены и не имеют никаких значений, поэтому их значения пока будут не определены.
2. Используя ключевое слово const :-
Ключевое слово const предоставляет еще один способ создания переменных в JavaScript. Если вы используете const, вы сообщаете своему интерпретатору, что значение, хранящееся в переменной, останется постоянным и никогда не изменится.
Это очень мощное ключевое слово, и вы всегда заметите, что оно в основном используется, когда вы хотите сохранить значения конфигурации наших приложений или значения, которые никогда не изменятся.
Всегда рекомендуется сначала использовать const, а когда вы исследуете сценарий, в котором вам нужно изменить значение переменной, рассмотрите возможность использования только ключевого слова let.
Ниже приведен фрагмент кода, показывающий, как можно использовать ключевое слово const.
const age; const totalAttempts;
В приведенном выше фрагменте кода я использую ключевое слово const для объявления двух констант, а именно age и totalAttempts.
3. Использование ключевого слова var
До 2015 года в JavaScript существовал только один способ создания переменных: с помощью ключевого слова var. Позже, после введения let и const в 2015 году, let стал предпочтительным способом создания переменных.
Тем не менее, люди по-прежнему используют var, поэтому вы найдете массу примеров, где используется var, хотя она более подвержена ошибкам.
В JavaScript я использую ключевое слово var для объявления переменных, как показано ниже.
var name; var message;
В приведенном выше фрагменте кода я использую ключевые слова var для создания двух разных переменных, а именно имя и сообщение.
Еще одна важная вещь, которую следует отметить в отношении ключевого слова var, заключается в том, что если вы используете старые веб-браузеры, вам, возможно, придется рассмотреть возможность использования только var, поскольку есть вероятность, что ключевое слово let не будет работать. там вообще.
Теперь, когда вы изучили объявление переменной с помощью трех ключевых слов, пришло время узнать, как присваивать значения переменным.
C. Присвоение значений переменным: -
Давайте создадим простой пример, в котором вы можете использовать все три ключевых слова: var, let и const, для объявления и присвоения значений в в то же время.
Рассмотрим код, показанный ниже.
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Variable Assignment</title> </head> <body> <script> let name = "RAJAT AGRAWAL"; console.log(name); const isCoding = "Yes"; console.log(isCoding); var designation = "Full Stack Developer"; console.log(designation); </script> </body> </html>
В приведенном выше коде я объявил три переменные, а именно name, isCoding и обозначение. Во время объявления я также присваиваю им значение.
Если я запущу приведенный выше код в браузере, я получу следующий вывод в консоли разработчика.
Вывод:
Обратите внимание, что я присвоил только текстовые значения вышеуказанным переменным. Вместо этого я также могу присваивать значения любого типа.
Теперь давайте также присвоим числовые значения переменным. Я заменю некоторые переменные, которые были в приведенном выше примере, но остальная часть кода останется прежней.
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Variable Assignment</title> </head> <body> <script> let age = 25; console.log(age); var year = 2023; console.log(year); const graduateYear = 2020; console.log(graduateYear); </script> </body> </html>
В приведенном выше примере кода я присвоил переменным числовые значения вместо текстовых значений, которые были в предыдущем примере.
Если мы запустим приведенный выше код в браузере, мы получим следующий вывод в консоли разработчика.
Вывод:
D. Использование переменных в JavaScript: -
В программах на JavaScript повсеместно используются переменные для хранения различных данных, и они являются неотъемлемой частью любого кода.
Важно создавать и хранить данные с использованием переменных. Если вы сразу начнете работать с необработанными данными, есть большая вероятность, что данные в какой-то момент будут потеряны, поэтому хранение данных в переменной поможет нам предотвратить это.
Если значение данных слишком длинное или слишком сложное, трудно запомнить все данные (например, идентификационный номер, номер паспорта). Вместо этого вы можете сохранить их в переменной и предоставить легко запоминающееся имя, которое вы сможете использовать позже в будущем.
E. Типы переменных: -
Прежде чем вы узнаете о типах переменных, давайте сначала разберемся с областью действия.
Область для ссылки может быть определена как пространство, в котором переменная может быть доступна в программе на JavaScript.
В зависимости от области действия можно разделить переменные на два типа:
- Глобальные переменные → Глобальная переменная имеет глобальную область действия, что означает, что вы можете использовать ее в любом месте программы.
- Локальные переменные → Доступ к локальной переменной возможен только внутри функции, внутри которой она определена.
Теперь давайте разберемся, что означают глобальная область видимости и локальная переменная области видимости.
Рассмотрим код, показанный ниже.
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Scope Example</title> </head> <body> <h1>Global Scope and Local Scope.</h1> <script> let isCoding = true; function normalFunction() { let running = false; console.log("Running 1:", running); console.log("isCoding 1:", isCoding); } normalFunction(); console.log("isCoding 2:", isCoding); console.log("isRunning 2:", running); </script> </body> </html>
Объяснение→ В приведенном выше коде вам нужно сосредоточиться на коде, написанном внутри тега script. Переменная isCoding является глобальной переменной, поскольку она не определена ни в одной функции, и я могу получить к ней доступ в любом месте программы, а затем я создал функцию с именем normalFunction. .
В normalFunction инициализируется переменная с именем running, и эта переменная доступна только внутри этой функции, если я попытаюсь получить доступ к этой переменной вне этой функции, я получу ошибку ссылки .
Если вы запустите приведенный выше код в браузере, вы получите следующий вывод в консоли разработчика.
Вывод:
Ссылочная ошибка в приведенном выше выводе связана с тем, что я пытаюсь получить доступ к локальной переменной вне функции, в которой она определена.
Следует отметить, что, начиная с ES2015, также существует нечто, называемое областью блока, которая представляет собой область, в которой переменная, однажды определенная, доступна только, и если вы попытаетесь получить доступ к переменной за пределами этого блока, она будет недоступна.
Только определенные переменные let и const являются заблокированными переменными области действия, а ключевое слово var имеет локальную или глобальную область действия. >.
Теперь давайте также рассмотрим пример области блока.
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Block Scope Example</title> </head> <body> <h1>Block scope.</h1> <script> function normalFunction() { let running = false; { let age = 100; console.log("Age 1: " + age); } console.log("Age 2: " + age); } normalFunction(); </script> </body> </html>
Объяснение → В приведенном выше коде внутри функции я создал блок, в котором я объявил и инициализировал переменную с именем age. Я пытаюсь получить доступ к переменной age вне блока, поэтому получаю ту же ошибку ссылки.
Вывод:
F. Имена переменных в JavaScript: -
Существуют определенные правила, которым вы должны следовать при объявлении переменных в JavaScript. В основном это: -
- Переменные должны начинаться с буквы, подчеркивания (_) или символа доллара символа ($).
- Переменные не могут быть названы с номерами в начальном индексе.
- Переменные в JavaScript чувствительны к регистру.
- Ключевые слова нельзя использовать в качестве имен переменных.
Давайте разберемся во всех этих моментах с помощью одного полного примера для всех сценариев.
Рассмотрим код, показанный ниже.
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Variable Convention Example</title> </head> <body> <h1>Variable Convention.</h1> <script> // Valid Variable Declarations let _name = 'Rajat'; console.log('_name:' + _name); let $age = 25; console.log('Age: ' + $age); let isStudent = false; console.log('isStudent:' + isStudent); // InValid Variable Declarations let 1age = 25; console.log('1age:' + 1age); // Cannot use keywords as variable names let var = 23; console.log('var:' + var); </script> </body> </html>
Объяснение —› В приведенном выше коде вы можете видеть, что я изучил допустимые имена переменных: _name, $age и isStudent и недопустимыеимена переменных: 1age и var.
Приведенный выше код вызовет ошибку выполнения.
Вывод:
Ниже приведен список ключевых слов, которые нельзя использовать в качестве имен переменных в JavaScript.
Ключевые слова:-
Заключение :-
В этой статье вы узнали о переменных и их использовании в JavaScript. Вы также научились создавать переменные, используя let, var и const ключевые слова, и, наконец, изучили допустимые и недопустимые имена переменных.
Как бы вы оценили эту статью →
Расскажите об этом, аплодируя и комментируя под этой статьей, и не забудьте поделиться этой статьей с новичками или теми, кто в настоящее время плохо знаком с веб-разработкой и хочет узнать об этом.
Подпишитесь на меня, чтобы увидеть больше таких статей!!
Спасибо 👋✨