Как объявлять переменные в JavaScript
Программирование

Как объявлять переменные в JavaScript

Чтобы начать работу с JavaScript, необходимо понимать, что такое переменные. Вот три способа объявления переменных в JavaScript

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

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

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

Три способа объявления переменной JavaScript

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

  • var.
  • пусть
  • const.

Закодировать переменную в JavaScript очень просто. Например, вот как это сделать, используя ключевое слово var :

var myVariable = 15;

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

Ключевые термины

Область применения

Область видимости переменной – это то, какие части вашей программы могут видеть переменную. Некоторые переменные имеют ограниченную область видимости, другие доступны всей вашей программе. Переменные, доступные всей программе, имеют глобальную область видимости

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

Блок

Функции, созданные в JavaScript, используют фигурные скобки. Код внутри фигурных скобок называется блок , и вы можете вложить в функцию столько блоков, сколько хотите

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

function blockTest(){
//This is a block
{
//This is a nested block
}
};

Учитывая это, давайте узнаем о переменных JavaScript!

1. Переменная JavaScript: var

Когда вы объявляете переменную через var , областью видимости переменной является либо:

  • Если объявлена внутри функции: объемлющая функция.
  • Если объявлено вне функции: глобальная область видимости.

Это базовое объявление переменной с помощью var. В коде есть несколько комментариев, чтобы помочь вам разобраться с этими определениями

var test = 5; //Variable declaration
function varTest(){
console.log(test); //This prints the variable
};
varTest();
>> 5

В этом примере переменная test была объявлена с помощью var и ей было присвоено значение 5. Функция varTest() выводит переменную в консоль. Вывод функции равен 5

Переменная была объявлена вне функции, поэтому она имеет глобальную область видимости. Несмотря на то, что переменная test не была объявлена внутри функции, она работает нормально

Если вы измените переменную внутри функции, программа выдаст другой результат

var test = 5;
function varTest(){
var test = 10;
console.log(test);
};
varTest();
>> 10

Обновленная функция объявляет переменную test внутри функции, и консоль считывает новое значение (10). Переменная была объявлена внутри функции, поэтому область видимости блока перекрывает глобальную область видимости

Если вывести переменную саму по себе, не запуская функцию:

console.log(test);
>> 5

Вы получите результат глобальной переменной

2. Переменная JavaScript: Let

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

Это функция с несколькими блоками, и она поможет показать разницу между var и let

Вот функция, которая использует var внутри нескольких блоков. Посмотрите на код и попробуйте понять, что происходит

function varTest(){
var test = 5;
{
var test = 10;
console.log(test);
}
console.log(test);
};
varTest();
>> 10
>> 10

Оба выхода равны 10

Переменные, объявленные с помощью var , доступны всей функции. В первом блоке переменная test была объявлена как 5. Во втором блоке переменная была изменена на 10

Это изменило переменную для всей функции. К тому моменту, когда программа дойдет до второго console.log() переменная была изменена

Вот тот же пример с комментариями, сопровождающими переменную:

function varTest(){
var test = 5; // Variable created
{
var test = 10; //Variable changed, 5 is overriden
console.log(test); // 10
}
console.log(test); // 10, The variable is now 10 for the entire function
};

Вот тот же пример с let , смотрите, что происходит внутри блоков

function letTest(){
let test = 5;
{
let test = 10;
console.log(test);
}
console.log(test);
};
letTest();
>> 10
>> 5

Результат изменился. Вот тот же код с комментариями. Назовем первый блок ‘Блок A’, а второй ‘Блок B’

function letTest(){
let test = 5; // Variable created in Block A
{
let test = 10; // Variable created in Block B, this is a new variable
console.log(test); // Prints 10
}
console.log(test); // Prints 5, since we're back to Block A
};
letTest();
>> 10
>> 5

3.JavaScript Переменная: Const

Использование const для объявления переменной имеет блочное копирование, как и let

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

Считайте, что const – это сокращение для обозначения константы. Она постоянна и не изменяется. Если вы переходите с другого языка программирования, например Java, то, возможно, вы уже знакомы с этой концепцией

Давайте объявим переменную const и попробуем ее в действии

const permanent = 10;

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

const permanent = 20;
>> Uncaught SyntaxError: Identifier 'permanent' has already been declared

Значение не может быть изменено, JavaScript выбрасывает ошибку в консоль. Давайте проявим смекалку и попробуем использовать ключевое слово new variable для изменения значения:

let permanent = 20;
>> Uncaught SyntaxError: Identifier 'permanent' has already been declared

По-прежнему не удается изменить переменную. Как насчет того же значения с новым ключевым словом?

let permanent = 10;
>> Uncaught SyntaxError: Identifier 'permanent' has already been declared

Это все равно не работает. Даже если значение то же самое, попытка изменить ключевое слово приводит к ошибке

Это все, что касается использования ключевого слова const. Оставьте его для специальных переменных, которые вам нужно защитить в программе

Становимся экспертом JavaScript

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

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

Об авторе

Алексей Белоусов

Привет, меня зовут Филипп. Я фрилансер энтузиаст . В свободное время занимаюсь переводом статей и пишу о потребительских технологиях для широкого круга изданий , не переставая питать большую страсть ко всему мобильному =)

Комментировать

Оставить комментарий