Переменные в JavaScript

Переменные являются основополагающим аспектом программирования на JavaScript или любом другом языке программирования. Важно понимать, что такое переменные и чего ожидать при их использовании. Долгое время в JavaScript был только один способ объявления переменных - с помощью ключевого слова var. С момента появления ES6 (ES2015) для объявления переменных были доступны ключевые слова let и const. Идея добавления этих функций в язык заключалась в том, чтобы предоставить способы управления тем, как объявляются переменные, присваиваются им значения и они становятся видимыми для других частей программы на JavaScript с помощью концепции области видимости.

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

var

Объявление переменной var используется в javascript с момента его создания. Переменная var (а также переменные let и const) используются для хранения различных типов данных. Переменная может хранить такие данные, как строки, числа, логические значения, объекты, функции и многое другое.

var myName = 'Иван';
var myAge = 34;
var clubMember = true;
var schoolSupplies = ['карандаш', 'тетрадь', 'ручка', 'ластик'];
var schoolSchedule = {
    math: 'Алгебра',
    science: 'Физика',
    literature: 'Современная литература',
};
var sayHello = function () {
    console.log('Привет');
};

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

var myName = 'Иван';

function studentProfile() {
    console.log(`Имя студента: ${myName}`);
}

studentProfile(); // Имя студента: Иван - переменная myName является
// частью глобальной области видимости

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

function getStudentGrade() {
    testResults = [75, 86, 93, 87];
    var testResultsAverage =
        testResults.reduce((a, b) => a + b) / testResults.length;
    return testResultsAverage;
}

console.log(testResults); // 85.25 - переменная testResults является
// частью глобальной области видимости

Переменные, объявленные с помощью var внутри логических блоков кода, известных как область действия блока (например, if..else), доступны за пределами блока.

if (true) {
    var newName = 'Игорь';
}
console.log(newName); // Игорь - переменная newName является
// частью глобальной области видимости

let

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

let studentName = 'Вася';

function greetStudent() {
    console.log(`Добрый день, ${studentName}!`);
}

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

function chooseClub() {
    let clubSelection = 'Клуб шахмат';
    console.log(clubSelection);
}

console.log(clubSelection); // Ошибка - переменная clubSelection доступна в области видимости функции

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

if (10 > 5) {
    let answer = '10 больше чем 5';
}
console.log(answer); // Ошибка - переменная answer видна только в области условного блока

const

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

const friendName = 'Петя';
function sayFriendName() {
    console.log(`Привет, ${friendName}!`);
}

sayFriendName(); // Привет, Петя! - переменная friendName является
// частью глобальной видимости

И точно так же, как переменные, объявленные с помощью let, переменная, объявленная с помощью const, недоступна за пределами области действия функции или блока и вызовет ошибку.

function getLunch() {
    const specialMeal = 'Макароны';
}

console.log(specialMeal); // Ошибка - переменная specialMeal доступна
// только в области видимости функции

if ('пицца' === 'пицца') {
    const favoriteFood = 'Пицца с сыром';
}

console.log(favoriteFood); // Ошибка - переменная favoriteFood доступна
// только в области видимости условного блока

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

// Значение
const courseLength = '2 часа';
courseLength = 120; // Ошибка - у константы courseLength нельзя изменить значение

// Массив
const courseTitles = ['Введение в математику', 'Английский язык', 'Биология'];
courseTitles = ['Физика', 'Геометрия', 'Французский']; // Ошибка - у константы
// courseTitles нельзя изменить значение

// Объект
const courseProfile = {
    name: 'Химия',
    days: ['Понедельник', 'Среда'],
    time: '09:30',
    instructor: 'Валентина Георгиевна',
};

courseProfile = {
    name: 'Английский язык',
    days: ['Пятница'],
    time: '14:00',
    instructor: 'Иван Дмитриевич',
}; // Ошибка - константа courseProfile не может быть изменена

Однако важно отметить, что const действительно позволяет изменять как данные внутри массивов, так и объекты.

// Массив
const weekDays = [ 'Понедельник', 'Вторник', 'Среда', 'Четверг', 'Пятница' ];
weekDays.push('Суббота');
console.log(weekDays); // [ 'Понедельник', 'Вторник', 'Среда', 'Четверг', 'Пятница', 'Суббота' ]

// Объект
const mathAssignment = {
    partOne: 'Чтение конспектов',
    partTwo: 'Выполнить домашнюю работу',
};
mathAssignment.partThree = 'Пройти викторину';
console.log(mathAssignment); // { partOne: 'Чтение конспектов', partTwo: 'Выполнить домашнюю работу', partThree: 'Пройти викторину' }

Заключение

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

Добавление let и const призвано решить некоторые из этих проблем. Они стали полезными инструментами, помогающими разработчикам писать код, который ограничивает видимость и модификацию данных, и, следовательно, помогает разработчикам избегать небольших ошибок, которые могут вызвать серьезные проблемы.