Основы JavaScript: первый шаг в программировании

Введение в JavaScript и концепция переменных как контейнеров для данных

Представьте, что вы решили собрать сложный конструктор, но детали к нему приходят не в коробках, а в виде бесконечного потока пластика, который нужно мгновенно превращать в нужные формы. JavaScript выполняет в браузере именно эту роль: он берет сырые данные — текст, числа, картинки — и превращает их в живой, реагирующий на действия пользователя интерфейс. Без него интернет был бы набором статичных газетных страниц, где нельзя нажать на кнопку «Лайк», отправить сообщение в чате или увидеть, как цена в корзине пересчитывается при добавлении товара.

Роль JavaScript в современной экосистеме

JavaScript часто называют «языком веба», и это не преувеличение. Если HTML отвечает за структуру страницы (заголовки, абзацы), а CSS — за её внешний вид (цвета, шрифты), то JavaScript управляет поведением. Это единственный язык программирования, который понимает любой браузер в мире, будь то Chrome на мощном компьютере или Safari на старом смартфоне.

Однако сегодня JavaScript вышел далеко за пределы браузера. На нем пишут серверную часть сайтов, создают мобильные приложения и даже программируют роботов. Но для новичка важно понимать главное: код на JavaScript — это набор инструкций, которые говорят компьютеру, что делать с информацией. Чтобы компьютер мог выполнить эти инструкции, ему нужно где-то хранить промежуточные данные. Именно здесь на сцену выходят переменные.

Что такое переменная: от метафоры к архитектуре памяти

Самая простая и точная метафора для переменной — это подписанная коробка. Представьте, что вы переезжаете. У вас есть множество вещей: книги, посуда, одежда. Если вы просто свалите всё в одну кучу посреди комнаты, вы ничего не найдете. Вместо этого вы берете коробку, кладете туда книги и пишете на боку маркером: «Книги».

В программировании происходит то же самое. Компьютер обладает огромным объемом оперативной памяти, но она выглядит как бесконечная сетка из ячеек с адресами вроде 0x7fff5fbff610. Человеку невозможно запомнить такие адреса. Переменная позволяет нам дать этой ячейке понятное имя.

Когда мы создаем переменную, мы говорим компьютеру:

Зарезервируй немного места в памяти.

Дай этому месту имя (например, userName).

Положи туда конкретное значение (например, «Алексей»).

Теперь, когда нам понадобится узнать имя пользователя, нам не нужно искать адрес в памяти. Мы просто обращаемся к слову userName, и компьютер выдает нам содержимое «коробки».

Эволюция объявления переменных: let и const

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

Изменяемые данные с помощью let

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

В этом примере мы сначала создали коробку с надписью score и положили туда число 0. Затем мы решили, что счет изменился, и заменили 0 на 10. Обратите внимание: слово let пишется только один раз — при «рождении» переменной. Дальше мы обращаемся к ней просто по имени.

Неизменяемые данные с помощью const

Слово const — сокращение от «constant» (константа). Как следует из названия, такую переменную нельзя изменить после того, как ей было присвоено значение. Если вы попытаетесь перезаписать const, программа выдаст ошибку и остановится.

Зачем нам ограничивать себя? В программировании существует правило: если значение не должно меняться, оно обязано быть константой. Это защищает код от случайных ошибок. Например, дата рождения пользователя, число Пи или гравитационная постоянная — это данные, которые не могут внезапно стать другими.

Использование const делает ваш код «предсказуемым». Другой программист (или вы сами через месяц), читая код, сразу поймет: «Ага, если это const, значит, это значение останется неизменным на протяжении всей работы программы».

Правила именования: как не запутать компьютер и коллег

Компьютеру все равно, как вы назовете переменную — a, x1 или theBestVariableInTheWorld. Но код пишется в первую очередь для людей. Плохие имена переменных — главная причина головной боли при поддержке программ.

В JavaScript существуют строгие правила и общепринятые традиции именования:

CamelCase (верблюжий регистр). Это стандарт для JavaScript. Первое слово пишется с маленькой буквы, а каждое следующее — с большой. Например: userEmail, isLoggedIn, totalPrice. Это похоже на горбы верблюда, отсюда и название.

Запрещенные символы. Имя переменной не может начинаться с цифры. Оно может содержать буквы, цифры, знаки подчеркивания _ и знак доллара $. Пробелы внутри имен строго запрещены.

Смысловая нагрузка. Избегайте имен вроде data, value или temp. Если переменная хранит количество товаров в корзине, назовите ее cartItemsCount. Имя должно отвечать на вопрос «Что внутри этой коробки?».

Регистрозависимость. Переменные user, User и USER — это три абсолютно разные «коробки» для JavaScript. Будьте внимательны.

Жизненный цикл переменной: объявление, инициализация и использование

Процесс работы с переменной можно разделить на три этапа. Понимание этой последовательности критически важно для отладки кода.

1. Объявление (Declaration). Мы сообщаем интерпретатору JavaScript, что нам нужно зарезервировать имя. let message; На данный момент коробка создана, но она пуста. Если мы попытаемся заглянуть в нее прямо сейчас, JavaScript скажет нам, что там лежит undefined (специальное значение, означающее «не определено»).

2. Инициализация (Initialization). Это момент первого присваивания значения. message = 'Привет, мир!'; Теперь у переменной появилось содержимое. В JavaScript можно совмещать объявление и инициализацию в одну строку, что делается в 99% случаев: let message = 'Привет, мир!';.

3. Использование и манипуляция. Мы можем использовать имя переменной везде, где нам нужно её значение.

Здесь мы создали две переменные, а затем создали третью, значение которой вычислили, «заглянув» в первые две. Важно понимать: когда мы пишем totalFruit = apples + oranges, мы не связываем эти переменные навечно. Мы просто берем текущие числа из коробок apples и oranges, складываем их и кладем результат в новую коробку. Если позже мы изменим apples = 10, значение в totalFruit само не изменится — там по-прежнему будет лежать 8, пока мы не отдадим команду пересчитать.

Особенности динамической типизации

JavaScript — это язык с динамической типизацией. Это означает, что переменная не привязана к конкретному типу данных (число, текст и т.д.) навсегда. В одну и ту же «коробку», созданную через let, вы можете сначала положить число, а затем заменить его на строку текста.

Хотя технически язык это позволяет, в профессиональной разработке так делать не рекомендуется. Если вы назвали переменную age (возраст), ожидается, что там всегда будет число. Резкая смена типа данных может привести к тому, что другие части программы, ожидающие число для расчетов, сломаются.

Глубокое понимание: почему var ушел в прошлое

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

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

С let такой номер не пройдет: язык выдаст ошибку, сообщив, что переменная name уже существует. Это предотвращает случайное дублирование имен в больших файлах кода.

Практический сценарий: переменные в действии

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

В этом примере мы видим четкое разделение: pricePerUnit — это константа, так как цена товара в рамках этой операции фиксирована. quantity и discount — это let, так как в реальном приложении покупатель может изменить количество в корзине или применить промокод.

Если мы захотим вывести результат, мы будем обращаться к переменной total. Если завтра цена товара изменится, нам не придется искать все места в коде, где используется число 500. Мы изменим его только в одном месте — при инициализации константы pricePerUnit, и вся остальная логика пересчитается автоматически. В этом и заключается главная сила переменных: они делают код гибким и легким для изменений.

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

Типы данных и выполнение базовых операций над значениями

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

Фундамент данных: примитивы и их природа

В JavaScript все данные делятся на две большие группы: примитивы и объекты. Примитивы — это «простые» значения, которые нельзя разложить на составляющие. Они неизменяемы (immutable): если вы измените число в переменной, вы на самом деле просто замените старое число на новое, а не «перекрасите» само число внутри памяти.

Числа (Number) и математическая точность

Тип Number в JavaScript универсален. В отличие от многих других языков, здесь нет разделения на целые числа и числа с плавающей точкой (дробные) на уровне базового типа. И , и — это всё Number.

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

Помимо обычных чисел, тип Number включает три специальных значения:

Infinity (бесконечность): получается, например, при делении положительного числа на ноль.

-Infinity: результат деления отрицательного числа на ноль.

NaN (Not a Number): сигнализирует о математической ошибке.

> NaN — это уникальное значение. Оно получается, когда вы пытаетесь выполнить математическую операцию с чем-то, что принципиально не является числом, например, делите строку «Привет» на число . Самое странное, что NaN не равен даже самому себе.

Строки (String) и магия кавычек

Строки — это последовательности символов, заключенные в кавычки. В JavaScript существует три способа создания строк: * Одинарные кавычки: 'Текст'. * Двойные кавычки: "Текст". * Косые кавычки (backticks): ` Текст .

Первые два способа идентичны по функционалу. Выбор между ними — вопрос стиля или удобства. Если внутри строки нужно использовать двойную кавычку, логично обернуть всю строку в одинарные: 'Он сказал: "Привет!"'.

Косые кавычки — это «суперсила» JavaScript. Они позволяют создавать многострочные блоки текста и использовать интерполяцию. Интерполяция — это способ вставить значение переменной прямо внутрь строки, используя конструкцию {userName}!; // Результат: Привет, Алексей! javascript let result = (2 + 2) * 2; // 8, а не 6 javascript let word = "Программирование"; console.log(word.length); // 16 javascript let email = "Admin@Example.com"; let lowerEmail = email.toLowerCase(); // "admin@example.com" let hasAt = email.includes("@"); // true javascript typeof 42; // "number" typeof "Привет"; // "string" typeof true; // "boolean" typeof undefined; // "undefined" `

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

Понимание типов данных и того, как JavaScript переключается между ними, — это разница между «я пишу код наугад» и «я точно знаю, что произойдет». Когда вы складываете значения, сравниваете их или выводите на экран, всегда задавайте себе вопрос: «Какого типа эти данные сейчас?». Это сэкономит вам часы поиска ошибок в будущем.