Как устроен JavaScript: движок, стек, DOM и event loop прост

JavaScript устроен как язык, который выполняется внутри окружения: браузера, Node.js или другого runtime. Сам язык отвечает за переменные, функции, объекты, массивы, условия и Promise. Браузер добавляет DOM, события, fetch, таймеры и доступ к странице. Поэтому важно разделять JavaScript как язык и браузер как среду выполнения

Короткая схема:

JavaScript-код -> движок JS -> call stack
Браузер -> DOM, события, таймеры, fetch
Event loop -> помогает выполнять отложенные задачи

Содержание

Движок JavaScript
Call stack
DOM и браузерные API
Event loop
Почему это важно
Браузерный JavaScript и Node.js
Как проверить модель на практике
Частые ошибки
Думать, что DOM — часть самого языка
Путать асинхронность с параллельностью
Блокировать поток тяжелым циклом
Мини-задание
Что почитать дальше по JavaScript

Движок JavaScript

Движок читает код, разбирает его и выполняет. В Chrome и Edge это V8, в Firefox — SpiderMonkey, в Safari — JavaScriptCore. Для новичка не нужно знать внутренности движка, но полезно понимать: код не «живет сам», его выполняет конкретное окружение

Пример:

const a = 5;
const b = 7;

console.log(a + b);

Движок создает переменные, считает выражение и вызывает console.log

Call stack

Call stack — это стек вызовов функций. Когда функция запускается, она попадает в стек. Когда заканчивает работу, уходит из стека

function first() {
  second();
}

function second() {
  console.log("Готово");
}

first();

Сначала вызывается first, внутри нее second, затем second завершается, потом завершается first

DOM и браузерные API

document.querySelector, кнопки, формы и изменение HTML — это не ядро языка, а возможности браузера:

const title = document.querySelector("#title");
title.textContent = "Новый текст";

Если такой код запустить в Node.js, будет ошибка document is not defined, потому что Node.js не знает HTML-страницу

Event loop

JavaScript часто называют однопоточным: одновременно он выполняет один участок кода в одном call stack. Но браузер умеет принимать события, ждать таймеры и сетевые ответы. Event loop помогает поставить такие задачи в очередь и выполнить их, когда стек свободен

Пример:

console.log("1");

setTimeout(() => {
  console.log("2");
}, 0);

console.log("3");

Обычно вывод будет:

1
3
2

setTimeout не выполняется мгновенно между строками. Колбэк попадет в очередь и выполнится позже

Почему это важно

Если понимать устройство JavaScript, легче объяснить частые ошибки:

document is not defined — браузерный код запущен в Node.js;
кнопка не работает — обработчик не повешен или элемент не найден;
setTimeout выполняется позже — задача ушла в очередь;
страница «зависла» — длинный синхронный код занял call stack.

Браузерный JavaScript и Node.js

Один и тот же язык может вести себя по-разному из-за окружения. В браузере есть страница, DOM и пользовательские события:

document.querySelector("button");

В Node.js есть файловая система, терминал и серверные инструменты:

import fs from "node:fs";

Поэтому вопрос «как устроен JavaScript» всегда стоит уточнять: в браузере, в Node.js, в сборщике или в конкретном фреймворке. Сам язык один, но набор доступных API разный

Как проверить модель на практике

Сделайте три коротких эксперимента:

console.log("sync");
setTimeout(() => console.log("timeout"), 0);
Promise.resolve().then(() => console.log("promise"));

Потом попробуйте код с document.querySelector в браузере и в Node.js. Так вы быстро увидите разницу между синхронным кодом, очередями задач и API окружения

Частые ошибки

Думать, что DOM — часть самого языка

DOM дает браузер. JavaScript как язык может работать и без DOM, например в Node.js

Путать асинхронность с параллельностью

Асинхронный код не всегда значит «выполняется одновременно». Часто он просто ждет своей очереди

Блокировать поток тяжелым циклом

Большой синхронный цикл может заморозить интерфейс. Разбивайте тяжелую работу или выносите ее в другое решение

Мини-задание

Запустите пример с setTimeout и console.log("1"), console.log("3"). Предскажите порядок вывода до запуска, потом проверьте. Это простой способ почувствовать event loop