JavaScript — итоги
Кратко — что стоит унести из раздела "JavaScript". Если пункт кажется туманным — откройте указанную главу или оглавление.
FAQ — Часто задаваемые вопросы
Типичные сбои и ситуации, с которыми сталкиваются новички после раздела. Здесь — что делать и где копать в главах; определения для зачёта — в чек-листе.
Вопрос. Нажимаю кнопку на странице — ничего не происходит, в консоли ошибка "Cannot read properties of null".
Ответ. Скрипт часто выполняется раньше, чем браузер построил DOM, и querySelector возвращает null. Подключайте скрипт в конце <body>, используйте DOMContentLoaded или defer. Подробнее здесь — работа с HTML, основы.
Вопрос. В консоли console.log(obj) показывает [object Object] — как увидеть содержимое?
Ответ. Для отладки используйте console.log(JSON.stringify(obj, null, 2)), console.dir(obj) или разверните объект в DevTools. Для вложенных структур помогает structuredClone или сериализация. Подробнее здесь — типы данных, JSON.
Вопрос. Думал, что JavaScript — это Java с другим названием. С чего начать, чтобы не путать?
Ответ. Это разные языки и экосистемы: JavaScript живёт в браузере и Node.js, Java — на JVM. Синтаксис местами похож, но модель типов, сборка и инструменты другие. Подробнее здесь — основы, история.
Вопрос. fetch к своему API падает с "blocked by CORS policy" — сервер же мой, почему браузер мешает?
Ответ. Браузер по умолчанию запрещает JS читать ответ с другого origin, пока сервер явно не разрешит заголовками CORS. Настройте Access-Control-Allow-Origin на бэкенде или проксируйте запросы через dev-сервер. Подробнее здесь — CORS и middleware, асинхронность и fetch.
Вопрос. async функция возвращает Promise, а мне нужно значение — код "не ждёт".
Ответ. Внутри async используйте await; снаружи — .then() или снова await в другой async функции. Забытый await — частая причина "данных нет, хотя запрос прошёл". Подробнее здесь — асинхронность.
Вопрос. Коллбэк вызывается, но this внутри — undefined или "чужой" объект.
Ответ. У обычной функции this зависит от способа вызова; у стрелочной — от внешнего лексического контекста. Для обработчиков событий часто нужен .bind(this) или стрелочная функция. Подробнее здесь — функции и this.
Вопрос. 0.1 + 0.2 === 0.3 даёт false — язык сломан?
Ответ. Числа хранятся в формате IEEE 754 с погрешностью. Для денег и точных расчётов используйте целые копейки, библиотеки decimal или округление с явной точностью. Подробнее здесь — типы данных.
Вопрос. После npm install папка node_modules занимает гигабайты — это нормально?
Ответ. Для современного фронтенда много транзитивных зависимостей — типичная картина. Не коммитьте node_modules в git; следите за package-lock.json, периодически чистите кэш npm. Подробнее здесь — Node.js и npm, экосистема.
Вопрос. Error: Cannot find module после import — файл есть, что не так?
Ответ. Проверьте расширение в пути, регистр букв (Linux-сервер), "type": "module" в package.json и относительный путь ./. В браузере без сборщика нужны <script type="module"> и корректные URL. Подробнее здесь — модули, Node.js.
Вопрос. Запускаю npm start — "Port 3000 is already in use".
Ответ. Порт занят другим процессом (часто старый dev-сервер). Завершите процесс или укажите другой порт в конфиге Vite/Webpack/Express. На Windows — диспетчер задач или netstat. Подробнее здесь — Node.js и Express.
Вопрос. React-компонент уходит в бесконечный перерендер, вкладка зависает.
Ответ. Частая причина — useEffect без массива зависимостей или обновление state прямо в теле render. Проверьте зависимости эффекта и не мутируйте объекты state — создавайте новые. Подробнее здесь — React — первая программа, React — обзор.
Вопрос. На экране видны сырые {{ message }} вместо текста — Vue/React "не работает".
Ответ. Шаблон не скомпилирован: не подключён runtime, ошибка сборки или скрипт не смонтирован на #app. Откройте консоль на ошибки, проверьте createApp(...).mount(...). Подробнее здесь — Vue — первая программа, React — первая программа.
Вопрос. После деплоя SPA обновление страницы по прямой ссылке даёт 404.
Ответ. Сервер ищет файл по пути URL, а маршрутизация у вас на клиенте. Настройте fallback на index.html (nginx try_files, Vercel rewrites). Подробнее здесь — Next.js и SSR, применение в вебе.
Вопрос. Express принимает POST, но req.body пустой.
Ответ. Без middleware express.json() тело JSON не разбирается. Подключите его до маршрутов и проверьте заголовок Content-Type: application/json на клиенте. Подробнее здесь — Express, middleware.
Вопрос. API-ключ в .env на фронте всё равно виден в DevTools — как спрятать?
Ответ. В браузерный бандл нельзя спрятать секрет: любой ключ в клиентском JS доступен пользователю. Секреты держите на сервере, проксируйте запросы через backend. Подробнее здесь — безопасность на фронте, Node и API.
Вопрос. JSON.parse падает на "valid" ответе от сервера.
Ответ. Сервер мог вернуть HTML страницу ошибки, BOM или лишние символы вместо JSON. Проверьте response.ok, Content-Type и тело через response.text() перед parse. Подробнее здесь — JSON, fetch.
Вопрос. Дата в JS "съезжает" на день — проблема часового пояса?
Ответ. new Date('2024-01-15') и строки без времени интерпретируются по-разному в UTC и локали. Для хранения используйте ISO с временем и явную зону или библиотеки вроде date-fns/dayjs. Подробнее здесь — даты.
Вопрос. Старый Internet Explorer или встроенный браузер — синтаксис const и стрелки "Unexpected token".
Ответ. Среда не поддерживает ES6+. Нужен транспайлер (Babel) и полифиллы, либо отказ от поддержки legacy. Подробнее здесь — сборка Vite/Webpack, история и совместимость.
Вопрос. TypeScript ругается после обновления пакетов, хотя JS-код "работал".
Ответ. Типы из @types/* могли ужесточиться. Исправляйте реальные несоответствия, а не отключайте проверку глобально. Начните с strict: true постепенно. Подробнее здесь — TypeScript.
Вопрос. Electron-приложение — белый экран, в DevTools ошибки CSP или require is not defined.
Ответ. Разделяйте main, renderer и preload; не включайте nodeIntegration в окне с HTML. Общение — через contextBridge. Подробнее здесь — Electron в разделе десктопа.
Вопрос. Сохранил JWT в localStorage — коллега говорит, что так нельзя.
Ответ. При XSS скрипт злоумышленника прочитает localStorage. Для учебных проектов допустимо; в проде рассматривайте httpOnly cookie, короткий TTL и refresh-токены на сервере. Подробнее здесь — безопасность.
Вопрос. Vite показывает изменения только после полной перезагрузки — HMR "мертв".
Ответ. HMR ломают циклические импорты, экспорт не-react компонентов как React-компонентов, ошибки в accept-handler. Перезапустите dev-сервер и проверьте консоль на предупреждения HMR. Подробнее здесь — сборка.
Вопрос. npm сыпет предупреждения peer dependency — игнорировать или чинить?
Ответ. Peer dependency — ожидание совместимой версии React, ESLint и т.д. Сначала выровняйте версии в package.json; --legacy-peer-deps — временный костыль, не норма для команды. Подробнее здесь — Node.js.
Вопрос. Скрипт из Stack Overflow использует $ — у меня "$ is not defined".
Ответ. Это jQuery, его нужно подключить или переписать на document.querySelector. В новых проектах чаще vanilla JS или фреймворк. Подробнее здесь — jQuery — обзор, DOM.
Вопрос. Страница грузится по HTTPS, а API по HTTP — браузер блокирует "Mixed Content".
Ответ. Безопасная страница не загрузит незащищённый ресурс. Поднимите API на HTTPS или проксируйте через тот же origin в dev. Подробнее здесь — применение в вебе, fetch.
Вопрос. Выбрал React, Vue и Angular одновременно — проект разросся и ничего не собирается.
Ответ. На старте достаточно одного UI-подхода плюс при необходимости Node для API. Сравните задачи и маршрут в intro, не смешивайте три фреймворка в одном репозитории. Подробнее здесь — оглавление, React, Vue, Angular.
Вопрос. addEventListener срабатывает дважды на один клик.
Ответ. Обработчик зарегистрировали дважды (повторный вызов при hot reload, дублирующий скрипт) или сработали и capture, и bubble без stopPropagation. Проверьте список listeners в DevTools. Подробнее здесь — события, делегирование.
Частые поисковые запросы
Вопрос. Чем JavaScript отличается от Java — это один и тот же язык?
Ответ. Нет: разные языки и платформы. JavaScript — скрипт в браузере и Node.js; Java — байт-код на JVM. Схожесть в названии историческая. Подробнее здесь — основы JavaScript, история.
Вопрос. Как выучить JavaScript с нуля — с чего начать новичку?
Ответ. Маршрут: HTML/CSS → синтаксис JS → DOM и события → асинхронность → один фреймворк (React или Vue). Параллельно откройте консоль браузера и пишите маленькие скрипты каждый день. Подробнее здесь — оглавление раздела, основы, работа с HTML.
Вопрос. JavaScript или Python — что лучше выбрать первым языком?
Ответ. Для веб-интерфейса и фронтенда — JavaScript неизбежен; для скриптов, data science и backend — Python часто проще старт. Выбор зависит от цели, а не от "лучше/хуже". Подробнее здесь — применение JS, раздел Python.
Вопрос. React или Vue — что изучать в 2025–2026?
Ответ. Оба востребованы: React — больше вакансий и экосистема; Vue — мягче вход и удобная документация. Важнее освоить один до pet-проекта, чем метаться между двумя. Подробнее здесь — React, Vue, первая программа React, первая программа Vue.
Вопрос. Нужен ли TypeScript для фронтенд-разработчика?
Ответ. Для учебы достаточно JavaScript; в коммерческих проектах TypeScript стандарт de facto — типы ловят ошибки до запуска. Имеет смысл подключать после базового JS. Подробнее здесь — TypeScript.
Вопрос. Что такое Node.js простыми словами?
Ответ. Node.js — среда выполнения JavaScript вне браузера на движке V8: серверы, CLI, сборщики, автоматизация. Это не отдельный язык. Подробнее здесь — Node.js, Express.
Вопрос. Как подключить JavaScript к HTML-странице?
Ответ. Тег <script src="app.js" defer> или inline-код; для модулей — type="module". Скрипт без defer/async блокирует разбор страницы. Подробнее здесь — работа с HTML, основы.
Вопрос. Можно ли писать backend на JavaScript?
Ответ. Да: стек Node.js + Express (или Fastify, NestJS) — REST, WebSocket, работа с БД через драйверы. Один язык на фронте и API ускоряет обучение fullstack. Подробнее здесь — Node.js, Express, fullstack и CORS.
Вопрос. Сколько времени учить JavaScript до первой работы?
Ответ. Базовый синтаксис — недели; до junior frontend обычно 6–12 месяцев с практикой, pet-проектами и основами React/Vue. Срок сильно зависит от интенсивности и портфолио. Подробнее здесь — маршрут в intro, чек-лист.
Вопрос. Что такое ECMAScript и чем ES6 отличается от JavaScript?
Ответ. ECMAScript — стандарт языка; JavaScript — реализация в браузерах и Node. ES6 (ES2015) — крупное обновление: let/const, классы, модули, стрелки. Подробнее здесь — история и ES6+, основы.
Вопрос. Angular ещё актуален или все перешли на React?
Ответ. Angular жив в корпоративных и enterprise-проектах — полный фреймворк с TypeScript, routing, forms из коробки. React чаще в стартапах и SPA; выбор — по вакансиям и типу продукта. Подробнее здесь — Angular, Angular — первая программа.
Вопрос. Как сделать REST API на JavaScript?
Ответ. Поднимите сервер на Express: маршруты GET/POST, express.json(), коды ответов, при необходимости CORS для фронта. Подробнее здесь — Express, middleware, fullstack.
Вопрос. Next.js — что это и зачем нужен?
Ответ. Next.js — фреймворк поверх React с маршрутизацией, SSR/SSG, оптимизацией картинок и API routes. Ускоряет SEO и первую загрузку по сравнению с чистым SPA. Подробнее здесь — Next.js, Server и Client Components.
Вопрос. Как стать frontend-разработчиком — пошаговый маршрут?
Ответ. HTML → CSS → JavaScript → Git → React или Vue → HTTP/API → сборка (Vite) → pet-проект в портфолио. Параллельно — DevTools и доступность базово. Подробнее здесь — intro, применение в вебе, React.
Вопрос. Можно ли делать сайт на JavaScript без React и Vue?
Ответ. Да: vanilla JS + DOM API достаточен для лендингов и учебных задач. Фреймворки нужны при сложном UI и масштабе команды. Подробнее здесь — работа с HTML, события.
Вопрос. Express.js — что это такое?
Ответ. Express — минималистичный веб-фреймворк для Node.js: маршруты, middleware, JSON API. Де-факто старт для backend на JS. Подробнее здесь — Express, Node.js.
Вопрос. jQuery или React — что использовать сегодня?
Ответ. В новых проектах — React/Vue или vanilla JS; jQuery остаётся в legacy-сайтах. jQuery упрощал DOM в эпоху IE; сейчас API браузера богаче. Подробнее здесь — jQuery — обзор, React.
Вопрос. Fullstack на одном JavaScript — реально ли?
Ответ. Да: React/Vue + Node/Express (или Next.js fullstack) — распространённый стек. Общие типы с TypeScript, один npm-экосистема. Подробнее здесь — fullstack, Node.js.
Вопрос. Код JavaScript в браузере и в Node — один и тот же?
Ответ. Язык один (ECMAScript), но API разные: в браузере DOM и Web API, в Node — fs, http, process. Общая логика переносится, платформенный код — нет. Подробнее здесь — основы и среды, Node.js.
Вопрос. Как написать первую программу "Hello, World" на JavaScript?
Ответ. В HTML — console.log("Hello, World") в <script> или отдельном .js; в Node — файл hello.js и команда node hello.js. Подробнее здесь — основы, первая программа в intro.
Вопрос. Webpack или Vite — что выбрать новичку?
Ответ. Для новых проектов чаще Vite — быстрый dev-сервер и простой конфиг. Webpack — в legacy и сложной кастомной сборке. Подробнее здесь — сборка Vite/Webpack.
Вопрос. Event loop в JavaScript — что это простыми словами?
Ответ. JS однопоточный: call stack выполняет код, очереди задач подставляют коллбэки и промисы, когда стек пуст. Отсюда "сначала sync, потом microtasks, потом macrotasks". Подробнее здесь — асинхронность, основы.
Вопрос. Electron — как делают десктопные приложения на JavaScript?
Ответ. Electron объединяет Chromium (UI) и Node.js (система): VS Code, Discord и многие десктоп-клиенты так собраны. Безопасность — через preload и отключение nodeIntegration. Подробнее здесь — применение Electron, раздел десктопа.
Вопрос. Как получить данные с сервера в JavaScript — fetch пример?
Ответ. const res = await fetch(url); const data = await res.json(); — проверяйте res.ok и обрабатывайте ошибки сети. Подробнее здесь — асинхронность и fetch.
Что запомнить
JavaScript — это динамический, мультипарадигменный язык программирования, изначально созданный для придания интерактивности веб-страницам. Сегодня он применяется не только на клиенте, но и на сервере (Node.js), в мобильной разработке (React Native, Ionic), десктопных приложениях (Electron), а также в инструментах сборки, автоматизации и даже в микроконтроллерах.
Основные категории применения JavaScript:
- Фронтенд — управление DOM, обработка событий, анимации, взаимодействие с API;
- Бэкенд — серверная логика, маршрутизация, работа с базами данных через Node.js;
- Инструменты разработки — сборщики (Webpack, Vite), транспайлеры (Babel), тестовые фреймворки (Jest, Cypress);
- Скриптовая автоматизация — скрипты в браузере, расширения, автоматизация задач.
Ключевые особенности языка:
- Динамическая типизация: тип переменной определяется во время выполнения;
- Прототипное наследование: вместо классов (до ES6) использовались объекты и прототипы;
- Асинхронность: основанная на событиях модель выполнения с поддержкой промисов и async/await;
- Замыкания: функции сохраняют доступ к переменным внешнего контекста;
- Гибкая экосистема: огромное количество библиотек, фреймворков и инструментов.
Эволюция языка прошла путь от простого скриптового инструмента до полноценного языка промышленной разработки благодаря стандарту ECMAScript, регулярным обновлениям (ES6+, TypeScript как надмножество) и развитой среде выполнения (V8, SpiderMonkey и др.).
Три основных правила эффективной работы с JavaScript:
- Понимать модель выполнения — однопоточность, цикл событий, стек вызовов, очередь задач.
- Следить за совместимостью: использовать транспайлеры или полифиллы при необходимости поддержки старых сред.
- Писать читаемый и модульный код — применять современные практики, избегать глобальных переменных, использовать строгий режим (
'use strict').
Три фундаментальных момента:
- JavaScript — это язык, ориентированный на взаимодействие с пользователем и средой;
- Его мощь раскрывается в связке с HTML и CSS, а также с современными фреймворками;
- Без понимания асинхронности и замыканий невозможно писать качественный код на этом языке.
Проверьте себя: Чек-лист самопроверки — язык, Node, React/Vue/Next, fullstack.
Куда идти дальше
| Тема | Раздел |
|---|---|
| "Low-code и No-code платформы" | "Low-code и No-code платформы" |
| "Python — о разделе" | "Python — о разделе" |
| "Автоматическое управление памятью" | "Автоматическое управление памятью" |
| "Java — о разделе" | "Java — о разделе" |
Проверьте себя: Чек-лист самопроверки.