Переменные и типы данных — JavaScript

Что это и зачем?

Представь, что твой компьютер — это огромный письменный стол. На нём лежат учебники, тетради, ручки и, конечно, твой смартфон. Чтобы быстро найти нужную вещь, ты кладёшь каждую на своё место. В программировании то же самое: когда программа работает, ей нужно где-то хранить числа, слова и другие данные. Для этого существуют переменные.

Переменная — это как коробка с наклейкой. На наклейке ты пишешь имя (например, "мойВозраст"), а внутрь кладёшь значение (например, 12). Когда тебе понадобится это значение, ты просто говоришь: "Дай мне то, что лежит в коробке с именем мойВозраст".

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

В JavaScript (JS) типы данных работают почти как в Python, но есть важные отличия. Например, в Python ты пишешь age = 12, и Python сам догадывается, что 12 — это число. В JavaScript то же самое, но есть нюансы: JS иногда слишком "догадливый" и может сделать не то, что ты ожидаешь. Поэтому мы будем учиться явно указывать, что мы хотим.

Зачем это нужно? Представь, что ты пишешь программу-калькулятор. Если ты перепутаешь типы и сложишь число 5 с текстом "5", то получишь не 10, а "55" (пять пятёрок подряд). Компьютер сделает так, как ты сказал, а не так, как ты думал. Поэтому знание типов данных — это суперсила, которая помогает не допускать глупых ошибок.

Примеры кода с объяснением

Давай сразу перейдём к практике. Открой любой редактор кода (например, встроенный в браузер, нажав F12 и перейдя на вкладку Console) или используй онлайн-редактор вроде CodePen или JSFiddle. Пиши код и смотри, что получается.

Пример 1: Создаём переменные с числами

// Создаём переменную с именем "myAge" и кладём в неё число 12
let myAge = 12;

// Создаём переменную "pi" и кладём в неё дробное число 3.14
let pi = 3.14;

// Создаём переменную "negativeNumber" и кладём в неё отрицательное число -5
let negativeNumber = -5;

// Выводим значения на экран
console.log("Мой возраст:", myAge);   // Выведет: Мой возраст: 12
console.log("Число Пи:", pi);         // Выведет: Число Пи: 3.14
console.log("Отрицательное число:", negativeNumber); // Выведет: Отрицательное число: -5

// Теперь попробуем сложить два числа
let sum = myAge + pi;  // 12 + 3.14 = 15.14
console.log("Сумма возраста и Пи:", sum); // Выведет: Сумма возраста и Пи: 15.14

// Обрати внимание: в JavaScript дробная часть отделяется точкой, а не запятой!
// Если напишешь 3,14 — это будет ошибка, потому что запятая имеет другое значение.

Объяснение: Мы использовали ключевое слово let. Оно говорит JavaScript: "Создай новую коробку". После этого мы написали имя переменной (myAge), знак равенства (=) и значение (12). Знак равенства здесь не означает "равно" в математическом смысле. Он означает "положи в коробку". В Python ты бы написал то же самое: my_age = 12. Разница только в том, что в JavaScript принято использовать camelCase (первое слово с маленькой буквы, каждое следующее — с большой), а в Python — snake_case (слова через подчёркивание).

Пример 2: Текстовые строки (String)

// Строка — это любой текст. Его нужно брать в кавычки.
let myName = "Анна";      // Двойные кавычки
let myCity = 'Москва';    // Одинарные кавычки — тоже работает!
let myHobby = `рисование`; // Обратные кавычки — современный способ

// Выводим строки
console.log("Меня зовут:", myName);          // Выведет: Меня зовут: Анна
console.log("Я живу в городе:", myCity);     // Выведет: Я живу в городе: Москва
console.log("Моё хобби:", myHobby);          // Выведет: Моё хобби: рисование

// Строки можно склеивать (конкатенация)
let greeting = "Привет, " + myName + "! Ты живёшь в " + myCity + ".";
console.log(greeting); // Выведет: Привет, Анна! Ты живёшь в Москве.

// А ещё можно вставлять переменные прямо в строку с помощью обратных кавычек
let greetingModern = `Привет, ${myName}! Ты живёшь в ${myCity}.`;
console.log(greetingModern); // Выведет то же самое: Привет, Анна! Ты живёшь в Москве.

// Обрати внимание: ${...} — это специальный синтаксис, который работает только в обратных кавычках.
// Это очень удобно, не нужно постоянно ставить плюсики!

Объяснение: В Python строки тоже можно создавать с одинарными или двойными кавычками. Но в JavaScript есть дополнительный вид — обратные кавычки (`` ` ``). Они позволяют вставлять переменные прямо в текст с помощью ${}. Это называется шаблонные строки (template strings). В Python для этого используется f-строки: f"Привет, {my_name}!". Принцип тот же, просто синтаксис разный.

Пример 3: Логический тип (Boolean) — правда или ложь

// Логический тип может быть только двух значений: true (правда) или false (ложь)
let isStudent = true;      // Я ученик — это правда
let hasPets = false;       // У меня нет домашних животных — это ложь

console.log("Я ученик?", isStudent);  // Выведет: Я ученик? true
console.log("У меня есть питомцы?", hasPets); // Выведет: У меня есть питомцы? false

// Логические значения часто получаются в результате сравнений
let myAge = 12;
let drivingAge = 18;

let canDrive = myAge >= drivingAge;  // 12 >= 18? Это ложь!
console.log("Могу ли я водить машину?", canDrive); // Выведет: Могу ли я водить машину? false

// Ещё примеры сравнений:
let number1 = 10;
let number2 = 20;

console.log("10 больше 20?", number1 > number2);   // false
console.log("10 меньше 20?", number1 < number2);   // true
console.log("10 равно 20?", number1 === number2);  // false (строгое равенство)
console.log("10 не равно 20?", number1 !== number2); // true

// Внимание! В JavaScript есть два вида равенства:
// == — нестрогое равенство (сравнивает, но может преобразовывать типы)
// === — строгое равенство (сравнивает и тип, и значение)
// Всегда используй ===, чтобы избежать сюрпризов!

Объяснение: Логический тип — это как ответ на вопрос: "Да или нет?". В Python он называется bool и пишется с большой буквы: True и False. В JavaScript — с маленькой: true и false. Запомни: регистр важен! Если напишешь True с большой буквы, JavaScript подумает, что это какая-то переменная, и выдаст ошибку.

Операторы сравнения (>, <, >=, <=, ===, !==) работают одинаково в обоих языках. Но в Python для равенства используется ==, а в JavaScript есть == (плохой) и === (хороший). Почему == плохой? Потому что он может преобразовывать типы. Например, 5 == "5" вернёт true, хотя число 5 и текст "5" — это разные вещи. А 5 === "5" вернёт false, потому что типы разные. Всегда используй ===!

Пример 4: Специальное значение — undefined и null

// undefined — это когда переменная существует, но в ней ничего нет
let myCar;
console.log("Моя машина:", myCar); // Выведет: Моя машина: undefined

// null — это когда мы нарочно говорим: "Здесь ничего нет"
let myPet = null;
console.log("Мой питомец:", myPet); // Выведет: Мой питомец: null

// Разница между undefined и null:
// undefined — это "ещё не назначено" (компьютер сам так сделал)
// null — это "я специально сказал, что здесь пусто" (программист так решил)

// В Python аналог undefined — это NameError (если переменная не существует),
// а аналог null — это None. None в Python пишется с большой буквы.

// Иногда программисты путают undefined и null, но это разные вещи.
// Если ты хочешь сбросить значение переменной, лучше использовать null:
let score = 100;
score = null; // Теперь в коробке пусто, но коробка существует
console.log("Очки после сброса:", score); // Выведет: Очки после сброса: null

Объяснение: undefined и null — это два способа сказать "ничего". В Python есть только None. Но в JavaScript их два, и это может сбивать с толку. Просто запомни правило: undefined появляется автоматически, когда ты создал переменную, но не положил в неё значение. null ты используешь сам, когда хочешь сказать: "Я намеренно убрал значение".

Пример 5: Проверяем тип данных с помощью typeof

// Иногда нужно узнать, какого типа переменная. Для этого есть оператор typeof
let someNumber = 42;
let someString = "Привет";
let someBoolean = true;
let someUndefined;
let someNull = null;

console.log("Тип числа:", typeof someNumber);    // Выведет: "number"
console.log("Тип строки:", typeof someString);   // Выведет: "string"
console.log("Тип логического:", typeof someBoolean); // Выведет: "boolean"
console.log("Тип undefined:", typeof someUndefined); // Выведет: "undefined"
console.log("Тип null:", typeof someNull);       // Выведет: "object" — это известная ошибка JavaScript!

// Обрати внимание на typeof null! Это баг, который остался в языке с древних времён.
// null должен быть "null", но JavaScript говорит "object". Запомни это, чтобы не удивляться.

// typeof возвращает строку с названием типа. Её можно использовать в условиях:
let value = "123";
if (typeof value === "string") {
    console.log("Это строка!"); // Этот код выполнится
}

// В Python аналог — функция type():
// type(42) вернёт 
// В JavaScript typeof 42 вернёт "number" (без слова class)

Объяснение: typeof — это как волшебное зеркало, которое смотрит на переменную и говорит: "Это число", "Это строка" и т.д. Это очень полезно, когда ты получаешь данные из интернета или от пользователя и не знаешь, что там лежит. В Python для этого есть функция type(), но она возвращает не строку, а специальный объект типа. В JavaScript всё проще: typeof возвращает обычную строку.

Типичные ошибки

Даже опытные программисты иногда путаются в типах данных. Вот список самых частых ошибок, которые делают новички (и не только).

Ошибка 1: Путаница между числами и строками

// Ошибка: складываем число и строку
let price = 10;
let item = "5";
let total = price + item;  // Что получится?
console.log(total); // Выведет: "105" — это строка "10" + "5" = "105", а не число 15!

// Почему так? Потому что JavaScript видит, что один операнд — строка,
// и решает: "Ага, значит, нужно всё превратить в строку и склеить".
// Это называется "неявное преобразование типов".

// Как исправить: нужно явно превратить строку в число
let itemNumber = Number(item);  // Number() превращает строку "5" в число 5
let correctTotal = price + itemNumber;
console.log(correctTotal); // Выведет: 15 — теперь правильно!

// В Python такая ошибка тоже возможна, но Python выдаст ошибку TypeError,
// а не сделает что-то неожиданное. JavaScript пытается "угадать", что ты имел в виду,
// и часто угадывает неправильно.

Ошибка 2: Использование == вместо ===

// Ошибка: нестрогое равенство
console.log(5 == "5");   // true — JavaScript говорит: "Да, они равны!"
console.log(0 == false); // true — "0 и false — это одно и то же?"
console.log("" == false); // true — "Пустая строка — это ложь?"

// На самом деле это разные вещи:
// 5 — это число, "5" — это строка
// 0 — это число, false — это логическое значение
// "" — это строка, false — логическое значение

// Как исправить: всегда используй ===
console.log(5 === "5");   // false — теперь правильно!
console.log(0 === false); // false — разные типы!
console.log("" === false); // false — тоже разные!

// Запомни золотое правило: в JavaScript всегда используй === и !==
// Никогда не используй == и !=, если не уверен на 100%, что делаешь.

Ошибка 3: Забыли объявить переменную (или путаница с var/let/const)

// Ошибка: используем переменную без объявления
myAge = 15;  // Это сработает, но создаст глобальную переменную (плохая практика!)
console.log(myAge); // Выведет 15

// Но если включён строгий режим ('use strict'), то будет ошибка:
'use strict';
// myAge = 15; // Ошибка: myAge is not defined

// Правильно: всегда объявляй переменные с let или const
let myAge = 15;
const PI = 3.14;