Первый код: console.log и консоль разработчика
Вот он — момент, которого вы ждали. Сейчас мы напишем первый настоящий JavaScript-код. Разберёмся, что такое console.log, запустим его в браузерной консоли и через Node.js, и заглянем под капот — как именно это всё работает.
💬 Что такое console.log
Первая команда, которую учат все программисты на JavaScript — это console.log(). Давайте разберём её по частям, чтобы понять, а не просто запомнить.
Это встроенный объект JavaScript. Он предоставляет доступ к консоли — инструменту вывода информации. «Объект» пока что можете воспринимать как «вещь с набором инструментов».
Точка — это оператор доступа. Он говорит: «возьми что-то внутри этого объекта». Читается как «у объекта console возьми инструмент log».
Это функция (метод). Слово «log» означает «записать в журнал». Скобки () означают вызов функции. Внутрь скобок мы кладём то, что хотим вывести.
То есть вся конструкция console.log() читается так: «Возьми объект console, вызови у него метод log и передай ему вот этот текст». Результат — текст появляется в консоли.
📺 Аналогия с телевизором: Представьте console как телевизор, а log — как кнопку «показать». Когда вы пишете console.log("Привет") — вы нажимаете кнопку «показать» на телевизоре и говорите, что именно показать. Текст «Привет» появляется на экране (в консоли).
Зачем вообще нужен console.log? Это инструмент отладки — способ посмотреть, что происходит внутри вашей программы. Когда код делает что-то не то, разработчик расставляет console.log() в разных местах и смотрит, какие значения там появляются. Это как контрольные точки на маршруте — убеждаетесь, что идёте правильно.
Кстати, console.log() — не единственный метод у объекта console. Есть ещё console.error() (красный вывод), console.warn() (жёлтый), console.table() (таблица). Но log() — самый используемый, и его хватит надолго.
✏️ Пишем первый код: примеры
Давайте разберём конкретные примеры. Открывайте консоль (F12 → Console) и набирайте каждый пример руками. Не копируйте — набирайте. Это важно.
Пример 1: Вывод текста
console.log("Hello, world!")Что происходит: Текст "Hello, world!" передаётся в метод log(). Кавычки (двойные или одинарные — оба варианта работают) обозначают, что это строка — последовательность символов. Движок JS вызывает метод, и текст появляется в консоли. Традиционно первая программа на любом языке выводит именно «Hello, world!» — это программистская традиция с 1972 года.
Пример 2: Математические вычисления
console.log(2 + 2)Что происходит: Здесь внутри скобок не строка в кавычках, а выражение 2 + 2. JavaScript сначала вычисляет это выражение (получает 4), а потом передаёт результат в log(). В консоли вы увидите 4. Кавычки не нужны — цифры JavaScript понимает напрямую как числа.
Попробуйте другие операции:
console.log(10 - 3) // вычитание → 7
console.log(5 * 6) // умножение → 30
console.log(15 / 4) // деление → 3.75
console.log(2 ** 8) // возведение в степень → 256Всё после // — это комментарий. JavaScript игнорирует его при выполнении. Комментарии — для людей, которые читают код.
Пример 3: Несколько аргументов
console.log("Меня зовут", "Иван")Что происходит: console.log() умеет принимать несколько значений через запятую. Он выведет их через пробел: Меня зовут Иван. Это удобно, когда нужно вывести несколько вещей в одну строку.
Можно смешивать текст и числа:
console.log("Результат:", 2 + 2)
console.log("Имя:", "Анна", "Возраст:", 25)Выведет: Результат: 4 и Имя: Анна Возраст: 25. Обратите внимание: JS сам добавляет пробелы между аргументами.
Пример 4: Несколько console.log подряд
console.log("Строка 1")
console.log("Строка 2")
console.log("Строка 3")Что происходит: JavaScript выполняет код сверху вниз. Каждый console.log() — это отдельная команда. Они выполняются последовательно, и в консоли появятся три строки одна за другой. В консоли браузера вы введёте всё в одно поле — используйте Shift+Enter для переноса строки без выполнения.
🧪 Совет-эксперимент: Попробуйте написать console.log("Привет" + " " + "мир"). Что вы думаете, получится? JS умеет «складывать» строки — это называется конкатенация. Знак + между строками соединяет их в одну. Попробуйте разные варианты и посмотрите, что выходит.
🌐 Запуск JavaScript в консоли браузера
Консоль браузера — это самое быстрое место для проверки кода. Открыли, написали, нажали Enter — сразу видите результат. Никаких файлов, никакого терминала.
Пошаговая инструкция
Откройте любую вкладку в Chrome (можно даже пустую — about:blank). Нажмите F12. Откроются инструменты разработчика.
Нажмите на вкладку Console. Вы увидите поле ввода с символом > или >> слева.
Кликните на поле и начните набирать код. Для выполнения нажмите Enter.
Результат появляется прямо под введённой строкой. Голубая стрелка «→» показывает возвращаемое значение выражения. Если вызвали console.log() — сначала виден вывод, потом undefined (это нормально, объясним ниже).
Что значит undefined в консоли?
Когда вы пишете в консоли console.log("Привет") и нажимаете Enter, вы видите два результата:
Привет ← это вывод console.log
← undefined ← это возвращаемое значение самой функцииКонсоль всегда показывает результат выражения, которое вы ввели. console.log() что-то выводит в консоль, но сама функция ничего не возвращает — поэтому её возвращаемое значение равно undefined (буквально: «не определено»). Это нормально и не ошибка. Просто консоль честно показывает, что получилось в итоге.
💡 Лайфхак консоли: Нажмите стрелку вверх в поле ввода консоли — появится предыдущая команда. Стрелка вверх снова — ещё раньше. Это история команд, как в терминале. Очень удобно, когда хочешь запустить чуть изменённый вариант предыдущей команды.
🟢 Запуск JavaScript через Node.js
Консоль браузера — удобна для быстрых экспериментов. Но настоящий код пишется в файлы. Вот как запустить JavaScript-файл через Node.js:
Шаг 1. Откройте VS Code. Создайте новый файл — например, first.js. Напишите в нём несколько строк:
console.log("Hello, world!")
console.log("Меня зовут Иван")
console.log(2 + 2)
console.log("Результат умножения:", 7 * 8)Шаг 2. Сохраните файл (Ctrl+S или Cmd+S).
Шаг 3. Откройте терминал внутри VS Code (Ctrl+` или меню Вид → Терминал). Убедитесь, что терминал открыт в той же папке, что и файл. Должно быть написано что-то вроде ~/Documents/js-practice.
Шаг 4. Введите команду:
node first.jsШаг 5. В терминале появится вывод:
Hello, world!
Меня зовут Иван
4
Результат умножения: 56Это и есть Node.js — он прочитал ваш файл построчно, выполнил каждую команду и вывел результат. Никакого браузера!
🔑 Ключевое различие: В браузерной консоли вы пишете один код и сразу видите результат. В файле с Node.js — пишете всю программу, сохраняете, запускаете. Для изучения основ — удобнее консоль. Для реальных скриптов — файлы и Node.js.
⚙️ Под капотом: что происходит, когда выполняется console.log
Давайте на секунду остановимся и разберём, что на самом деле происходит за кадром, когда вы пишете и запускаете console.log("Hello"). Это понимание поможет вам не «заучивать команды», а думать как программист.
Движок читает текст вашего кода как строку символов и разбивает его на смысловые единицы — токены: console (идентификатор), . (точка), log (идентификатор), ( (скобка открытия), "Hello" (строка), ) (скобка закрытия). Это как разбор предложения на части речи в грамматике.
Токены выстраиваются в иерархическую структуру — AST (Abstract Syntax Tree). Дерево показывает, что log — это метод объекта console, что ему передаётся аргумент (строка «Hello»), и что вся конструкция — это вызов функции.
V8 (движок Chrome/Node.js) превращает AST в машинный код — набор инструкций для процессора. JIT («точно в срок») означает, что компиляция происходит прямо во время выполнения, а не заранее. Часто используемые части кода компилируются в суперэффективный машинный код.
Процессор выполняет скомпилированный код. JS находит объект console (он встроен в каждую среду выполнения), берёт его метод log, передаёт строку «Hello» как аргумент, и метод выводит её в консоль. Всё это происходит за миллисекунды.
Всё это происходит каждый раз, когда вы нажимаете Enter в консоли. Это не магия — это инженерия. И в будущем понимание этих шагов поможет вам разбираться в сложных ситуациях.
💬 Не нужно запоминать эти шаги наизусть. Достаточно понимать на высоком уровне: движок читает ваш текст, разбирает его на части, понимает структуру, и выполняет. Это помогает, когда вы видите ошибку — вы понимаете, на каком этапе она могла возникнуть.
🐛 Частые ошибки новичков с console.log
Ошибки — это часть обучения. Но некоторые из них настолько типичны, что их стоит знать заранее. Вот что бывает чаще всего и что это означает.
Console.log("Привет") // ❌ Ошибка!
console.log("Привет") // ✅ ВерноJavaScript чувствителен к регистру. Console с большой буквы — это не то же самое, что console. Объект называется именно console, строчными буквами. Вы увидите ошибку: ReferenceError: Console is not defined.
console.log(Привет) // ❌ Ошибка!
console.log("Привет") // ✅ ВерноБез кавычек JS решит, что Привет — это имя переменной. А переменной с таким именем нет. Ошибка: ReferenceError: Привет is not defined. Текст (строки) всегда заключается в кавычки — одинарные (') или двойные (").
console.log("Привет" // ❌ Нет закрывающей скобки
console.log("Привет") // ✅ ВерноКаждая открывающая скобка ( должна иметь пару — закрывающую ). VS Code подсвечивает парные скобки и помогает не пропускать их.
console.log("Имя". "Иван") // ❌ Ошибка
console.log("Имя", "Иван") // ✅ ВерноНесколько аргументов разделяются запятой ,, а не точкой .. Точка — это оператор доступа к свойствам объекта, и в данном контексте она даст синтаксическую ошибку.
🔍 Как читать ошибки: Когда JS выдаёт ошибку, он говорит что-то вроде SyntaxError: Unexpected token или ReferenceError: ... is not defined. Не пугайтесь — это не катастрофа. Прочитайте сообщение. Часто там прямо написано, где проблема. Умение читать ошибки — ключевой навык разработчика.
🎯 Потренируйтесь прямо сейчас
Откройте консоль браузера или VS Code + Node.js и выполните эти задания по очереди. Не подглядывайте в ответы — попробуйте сами:
Выведите в консоль ваше имя. Используйте console.log() с текстом в кавычках.
Посчитайте в консоли: сколько минут в сутках? (24 * 60). Выведите результат через console.log().
Выведите текст и результат вычисления в одном console.log(): «Минут в сутках:» и значение 24*60.
Намеренно допустите ошибку: напишите Console.log("тест") с большой буквы. Прочитайте сообщение об ошибке.
✅ Итоги урока
console.log()— инструмент вывода информации в консоль. Используется для отладки и просмотра значенийconsole— встроенный объект,.— оператор доступа,log()— метод (функция)- Строки (текст) всегда берутся в кавычки:
"текст"или'текст' - Числа и выражения пишутся без кавычек:
console.log(2 + 2)выведет4 - Можно передавать несколько аргументов через запятую:
console.log("Имя:", "Иван") undefinedв консоли после вывода — нормально, это возвращаемое значение функцииlog()- Файлы запускаются через
node имяфайла.jsв терминале - Движок читает код → разбивает на токены → строит дерево → компилирует → выполняет
- JavaScript чувствителен к регистру:
consoleиConsole— разные вещи
В следующем разделе мы изучим переменные — один из главных строительных блоков любой программы. Пора хранить данные! 📦
console.log и первый код
6 вопросов