Что такое JavaScript

JavaScript (JS) — это высокоуровневый, динамически мультипарадигменный язык программирования, который исполняется непосредственно в браузере и вне браузера (например, в Node.js). Он управляет поведением веб-страниц (DOM), строит интерфейсы, общается с серверами, а в бэкенде обслуживает запросы, крутится в serverless-функциях и автоматизирует сборку.

Время прочтения:

4 минуты

Дата публикации:

23.07.25

55

Главная

Что такое JavaScript

глоссарий

a

b

c

d

e

f

g

h

i

j

l

m

o

p

r

s

t

u

v

w

y

А

Y

А

Б

В

Г

Д

Е

з

и

к

л

м

н

о

п

р

с

т

у

ф

х

ц

ч

ш

А

Я

метрика месяца

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

ROMI

Не путайте c Java — это разные языки. JS стандартизирован как ECMAScript (ES). Крупное обновление — ES2015 (ES6), далее ежегодные релизы.

Где «живет» JavaScript

Браузер (Web APIs): доступ к DOM (разметка), BOM (окно/история/хранилище), fetch, WebSockets, Canvas/WebGL/WebGPU, Web Components, Intl, IntersectionObserver и т. п;
Вне браузера: Node.js (серверы, CLI, скрипты), Deno, Bun. Там вместо DOM — модули для файловой системы, сети и пр;
UI-фреймворки: React, Vue, Svelte, Solid, Angular;
Сборка/инструменты: npm/yarn/pnpm, Vite, Webpack, Rollup, esbuild; транспилеры — Babel, TypeScript.

Ключевые особенности языка

Однопоточный рантайм + событийный цикл (event loop): код выполняется последовательно; долгие операции — асинхронно (через колбеки, Promises, async/await). Очереди task и microtask (например, Promise.then) важны для понимания порядка выполнения;
Динамическая типизация: тип определяется на лету; популярна надстройка TypeScript (типизированный надмножество JS);
Объектная модель на прототипах (классический prototype, синтаксический сахар class с ES2015);
JIT-движки (V8, SpiderMonkey, JavaScriptCore, Chakra) компилируют JS «на лету», поэтому производительность высока при грамотном коде;
Модули:

в браузере и Node (современно) — ESM (import/export),
в старых сборках Node — CommonJS (require/module.exports).

Типы данных

Примитивы: string, number (двойной float), bigint, boolean, null, undefined, symbol.

Ссылочный: object (включая Array, Function, Date, Map/Set, RegExp и др.).

Мини-пример

index.html
<button id="load">Загрузить пост</button>
<article id="post"></article>
<script type="module">
  import { tplPost } from './view.js';

  const $btn = document.getElementById('load');
  const $post = document.getElementById('post');

  $btn.addEventListener('click', async () => {
    try {
      const res = await fetch('https://jsonplaceholder.typicode.com/posts/1');
      if (!res.ok) throw new Error('HTTP ' + res.status);
      const data = await res.json();
      $post.innerHTML = tplPost(data);
    } catch (e) {
      $post.textContent = 'Ошибка: ' + e.message;
    }
  });
</script>

view.js
export const tplPost = ({ title, body }) => `
  <h2>${escapeHtml(title)}</h2>
  <p>${escapeHtml(body)}</p>
`;
function escapeHtml(s=''){
  return s.replace(/[&<>"']/g, m =>
    ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[m]));
}

Что делают на JavaScript

Фронтенд: интерактивные интерфейсы, SPA/MPA, графики, карты, редакторы, игры (Canvas/WebGL/WebGPU);
Бэкенд: REST/GraphQL API, SSR (Next.js/Nuxt), WebSockets, очереди, воркеры;
Мобильные/desktop: React Native, Electron, Tauri;
Автоматизация: скрипты сборки, линтинг, тесты (ESLint, Prettier, Vitest/Jest, Playwright).

Производительность и качество

Скорость рендера: минимизируйте перерасчёты и перерисовки; батчируйте DOM-изменения; используйте виртуальный DOM/сигналы там, где уместно;
Размер бандла: treeshaking, code splitting, динамические импорты, удаление «мёртвого кода»;
Web Vitals: не блокируйте критический рендер (CSS/JS), лениво грузите вторичное, используйте Web Workers для тяжёлых вычислений;
Память: снимайте обработчики событий, избегайте утечек через замыкания и глобальные ссылки.

Безопасность

XSS: всегда экранируйте пользовательские данные при вставке в DOM, используйте безопасные шаблонизаторы; Content-Security-Policy;
CSRF: токены/SameSite для сессионных кук, fetch с credentials только при необходимости;
Supply chain: фиксируйте версии зависимостей (lockfile), регулярно обновляйте; проверка npm audit, snyk;
eval и динамический Function — избегать; не доверять postMessage без проверки origin.

Инструменты и экосистема

npm/pnpm/yarn — менеджеры пакетов; package.json — манифест проекта;
ESLint/Prettier — единый стиль и статпроверки, TypeScript — типобезопасность;
Vite/Webpack/Rollup/esbuild — сборка, трансформация, HMR;
Testing: Vitest/Jest (unit), Playwright/Cypress (e2e);
SSR/ISR: Next.js / Nuxt / SvelteKit для гибридной генерации.

Когда JS не нужен или «нужен по-другому»

Статичный контент: делайте «без JS» или с минимумом — быстрее и надёжнее;
Тяжёлые вычисления: выносите в Web Worker или на бэкенд;
SEO-критичные страницы: используйте SSR/SSG или «островную» гидрацию, чтобы контент был виден без долгого JS.

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

«Всё в один бандл на 2 МБ» → медленный первый рендер;
Работа с DOM «вручную» без учёта перерисовок → лаги;
Игнорирование асинхронности (колбэчный хаос вместо async/await);
Логика безопасности на клиенте «для надёжности» (её обязательно дублировать/проверять на сервере);
Слепое доверие библиотекам и копипаст-сниппетам.

Мини-чек-лист «здорового» JS-проекта

Используются ES-модули, линтинг (ESLint), автоформатирование (Prettier);
Есть TypeScript или JSDoc-типы на публичных API;
Настроены treeshaking, code-split, динамические импорты;
Критичный контент доступен без JS или через SSR/SSG;
Безопасность: экранирование данных, CSP, audit зависимостей;
Тесты: unit + e2e (хотя бы на «санити»);
Мониторинг ошибок (Sentry/LogRocket) и производительности (RUM/Web Vitals).

заключение

JavaScript — «двигатель» современного веба и не только. Его сила — в универсальности (браузер/сервер), сильной экосистеме и асинхронной модели. Пишите модульно, думайте об асинхронности, производительности и безопасности, используйте инструменты экосистемы — и получайте быстрые, надёжные и удобные приложения.