Урок по программированию: Переменные в JavaScript

 

Введение

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

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

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

var

var — это старый способ объявления переменных в JavaScript. Переменные, объявленные с помощью var, имеют функциональную область видимости или глобальную область видимости, если они объявлены вне функции. Также var переменные подвержены так называемому "поднятию" (hoisting), что означает, что их объявление перемещается вверх области видимости.

Пример:

javascript
function example() {
    console.log(harry); // undefined
    var harry = "Гарри Поттер";
    console.log(harry); // "Гарри Поттер"
}
example();

Здесь harry поднимается вверх области видимости функции, но остается инициализированной значением undefined до тех пор, пока не достигнет строки var harry = "Гарри Поттер";.

let

let — это более современный способ объявления переменных, введенный в ES6 (ECMAScript 2015). Переменные, объявленные с помощью let, имеют блочную область видимости (то есть они доступны только внутри ближайшего блока кода, заключенного в фигурные скобки {}). В отличие от var, let не подвержен поднятию таким образом, как var, и не может быть использован до объявления.

Пример:

javascript
function example() {
    // console.log(hermione); // Ошибка: Cannot access 'hermione' before initialization
    let hermione = "Гермиона Грейнджер";
    console.log(hermione); // "Гермиона Грейнджер"
}
example();

const

const также введен в ES6 и используется для объявления констант. Переменные, объявленные с помощью const, должны быть инициализированы(явное объявление) при объявлении и не могут быть пере-инициализированы. Они также имеют блочную область видимости. Хотя значение переменной, объявленной с помощью const, нельзя изменить, свойства объекта или элементы массива, объявленные через const, могут изменяться.

Пример:

javascript
const ron = "Рон Уизли";
console.log(ron); // "Рон Уизли"

// Следующая строка вызовет ошибку
// ron = "Рональд Уизли"; // Ошибка: Assignment to constant variable

const hogwarts = {
    house: "Гриффиндор",
    points: 150
};
hogwarts.points += 50; // Можно изменять свойства объекта
console.log(hogwarts.points); // 200

Когда использовать var, let и const

• Используйте let для переменных, значения которых могут изменяться.
• Используйте const для переменных, значения которых не должны изменяться.
• Использование var обычно избегается в современном коде, так как его область видимости и поведение при поднятии могут приводить к ошибкам и недоразумениям.

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

Правила именования переменных

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

Примеры корректных имен переменных:

javascript
var harry;
let _hermione;
const $ron;

Примеры некорректных имен переменных:

javascript
var 2dumbledore; // Начинается с цифры
let var;        // Зарезервированное слово
const ron-weasley; // Содержит недопустимый символ

Присваивание значений переменным

Присваивание значения переменной в JavaScript происходит с помощью оператора =:

javascript
let magicPointsHarry = 100;
const magicPointsHermione = 120;
var magicPointsRon = 90;

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

Изменение значений переменных

Как и Гарри, который растет в мастерстве, значения переменных можно изменять:

javascript
let magicPointsHarry = 100;
console.log(magicPointsHarry); // Выведет: 100

magicPointsHarry = 150;
console.log(magicPointsHarry); // Выведет: 150

magicPointsHarry += 50; // Гарри использует заклинание "Экспекто Патронум"
console.log(magicPointsHarry); // Выведет: 200

Переменные, объявленные с const, не могут изменять свое значение после присвоения:

javascript
const magicPointsHermione = 120;
console.log(magicPointsHermione); // Выведет: 120

// Следующая строка вызовет ошибку
magicPointsHermione = 130;

Типы данных в JavaScript

JavaScript поддерживает различные типы данных, которые можно присваивать переменным. Вот некоторые из них:

• Целые числа (Number):

  javascript
  let ageHarry = 17;
  

• Числа с плавающей точкой (Number):

  javascript
  let heightHermione = 1.65;
  

• Строки (String):

  javascript
  var nicknameRon = "Рон Уизли";
  

• Логические значения (Boolean):

  javascript
  const isHogwartsStudent = true;
  

• Массивы (Array):

  javascript
  let goldenTrio = ["Гарри", "Гермиона", "Рон"];
  

• Объекты (Object):

  javascript
  let abilitiesHarry = {
    spell: "Экспеллиармус",
    house: "Гриффиндор",
    bestFriend: "Рон Уизли"
  };
  

Переменные и операторы

JavaScript поддерживает различные операторы, которые можно использовать с переменными:

• Арифметические операторы: +, -, *, /, %, **

  javascript
  let magicPointsHarry = 100;
  let magicPointsRon = 90;
  
  let totalMagicPoints = magicPointsHarry + magicPointsRon; // Сложение
  let diffMagicPoints = magicPointsHarry - magicPointsRon; // Вычитание
  let multiMagicPoints = magicPointsHarry * 2; // Умножение
  let divMagicPoints = magicPointsHarry / 2; // Деление
  let modMagicPoints = magicPointsHarry % magicPointsRon; // Остаток от деления
  let expMagicPoints = magicPointsHarry ** 2; // Возведение в степень
  

• Операторы сравнения: ==, !=, >, <, >=, <=

  javascript
  let magicPointsHarry = 100;
  let magicPointsRon = 90;
  
  let isEqual = (magicPointsHarry == magicPointsRon); // Равно ли
  let isNotEqual = (magicPointsHarry != magicPointsRon); // Не равно ли
  let isGreater = (magicPointsHarry > magicPointsRon); // Больше ли
  let isLesser = (magicPointsHarry < magicPointsRon); // Меньше ли
  let isGreaterOrEqual = (magicPointsHarry >= magicPointsRon); // Больше или равно
  let isLesserOrEqual = (magicPointsHarry <= magicPointsRon); // Меньше или равно
  

• Логические операторы: &&, ||, !

  javascript
  let harryReady = true;
  let ronReady = false;
  
  let bothReady = harryReady && ronReady; // Логическое И
  let eitherReady = harryReady || ronReady; // Логическое ИЛИ
  let notReady = !harryReady; // Логическое НЕ
  

Вывод значений переменных

Для вывода значений переменных в JavaScript можно использовать команду console.log:

javascript
let harry = "Гарри Поттер";
let age = 17;

console.log("Имя: " + harry + ", Возраст: " + age);

Также можно использовать шаблонные строки для форматированного вывода:

javascript
let harry = "Гарри Поттер";
let age = 17;

console.log(`Имя: ${harry}, Возраст: ${age}`);

Заключение

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

Дальше, как истинные волшебники, мы углубимся в более сложные концепции, такие как функции и объекты.