Введение в JavaScript: от переменных до консольного вывода

Раздел: Программирование -> Обучение с нуля

Основы работы с переменными и вывод данных

Как объявить переменную для хранения числа?

Современный стандарт ES6 рекомендует использовать let для переменных, значение которых может меняться. Пример:

let age = 25;

Javascript для начинающих (javascript для начинающих)

Этот код создаёт переменную age и присваивает ей число 25. После этого значение можно изменить: age = 26;. Такой подход делает код более предсказуемым.

До появления let использовали var. Тот же пример:

var age = 25;

Оба варианта работают, но у var есть особенность: переменная «всплывает» (hoisting) в начало области видимости, что может приводить к неожиданным ошибкам.

Типичная ошибка: попытка обратиться к переменной до её объявления. С var это вернёт undefined, а с let вызовет ошибку ReferenceError. Решение - всегда объявлять переменные в начале блока.

Как объявить неизменяемое значение?

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

const PI = 3.14159;

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

В более старых скриптах константы имитировали с помощью var и соглашения об именовании (например, var PI = 3.14159;). Но такая переменная оставалась изменяемой, что нарушало логику.

Частая проблема: забыть, что const не запрещает изменение свойств объекта. Например, const obj = {}; obj.key = 1; - это разрешено. Если нужна полная неизменность, используют Object.freeze().

Как вывести значение в консоль браузера?

Для отладки и показа результатов применяют console.log(). Он принимает любое количество аргументов:

let name = 'Мария';
console.log('Привет,', name);

В консоли появится Привет, Мария. Это удобно для проверки промежуточных значений.

Раньше часто использовали alert() для всплывающего окна:

alert('Привет, ' + name);

Такой способ отвлекает пользователя и не подходит для отладки. В современных проектах от него отказываются.

Ошибка: путать вывод в консоль с возвратом значения. console.log() ничего не возвращает (undefined). Для получения строки используйте шаблонные литералы или конкатенацию.

Расширенные примеры работы с переменными

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

Шаблонные строки (template literals)

Вместо конкатенации с плюсом удобнее использовать обратные кавычки:

Пример

let user = 'Иван';
let age = 30;
let greeting = `Пользователь ${user}, возраст ${age} лет.`;
console.log(greeting);

Пользователь Иван, возраст 30 лет.

Внутри ${} можно выполнять любые выражения, например ${age + 5}.

Неявное преобразование типов

JavaScript автоматически преобразует типы при операциях. Пример:

Пример

let a = '5';
let b = 3;
console.log(a + b); // строка + число → строка

Чтобы избежать неожиданностей, применяйте Number() или унарный плюс: console.log(+a + b) вернёт 8.

Область видимости (scope) let vs var

Переменная, объявленная через let внутри блока, не видна снаружи:

Пример

if (true) {
  let x = 10;
  var y = 20;
}
console.log(y); // 20
console.log(x); // ReferenceError: x is not defined

var игнорирует блоки (кроме функций), что может привести к утечке переменных.

Использование const с объектами и массивами

Ссылка на объект остаётся постоянной, но содержимое допускается менять:

Пример

const arr = [1, 2, 3];
arr.push(4);
console.log(arr); // [1, 2, 3, 4]
// arr = [5, 6]; // Ошибка

Если требуется защитить внутренние данные, применяют Object.freeze() для поверхностной заморозки.

Деструктуризация (destructuring)

Быстрое извлечение значений из объекта или массива:

Пример

const user = { name: 'Анна', age: 28 };
const { name, age } = user;
console.log(name, age); // Анна 28

Это сокращает код и делает его читаемым.

Типичные ошибки при работе с переменными

Забыть let или const - переменная становится глобальной (в нестрогом режиме). Всегда используйте строгий режим "use strict";.
Путать оператор присваивания = и сравнения ===. В условиях это частая причина ошибок.
Переопределение const без переименования: const a = 1; a = 2; приводит к SyntaxError.

JavaScript для начинающих - comments

Javascript для начинающих (javascript)