A. Введение в переменные JavaScript: -

Что такое переменные?

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

Точно так же, как фрукты в мешке, значения переменных могут меняться, а могут и не меняться.

Давайте посмотрим пример,

let name = "RAJAT AGRAWAL";

В приведенном выше фрагменте кода name — это переменная, в которой хранится значение RAJAT AGRAWAL.

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

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

В JavaScript есть разные способы объявления переменных. Это:

  1. Использование ключевого слова let.
  2. Использование ключевого слова const.
  3. Использование ключевого слова var.

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

  1. Используя ключевое слово 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. В основном это: -

  1. Переменные должны начинаться с буквы, подчеркивания (_) или символа доллара символа ($).
  2. Переменные не могут быть названы с номерами в начальном индексе.
  3. Переменные в JavaScript чувствительны к регистру.
  4. Ключевые слова нельзя использовать в качестве имен переменных.

Давайте разберемся во всех этих моментах с помощью одного полного примера для всех сценариев.

Рассмотрим код, показанный ниже.

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 ключевые слова, и, наконец, изучили допустимые и недопустимые имена переменных.

Как бы вы оценили эту статью →

Расскажите об этом, аплодируя и комментируя под этой статьей, и не забудьте поделиться этой статьей с новичками или теми, кто в настоящее время плохо знаком с веб-разработкой и хочет узнать об этом.

Подпишитесь на меня, чтобы увидеть больше таких статей!!

Спасибо 👋✨