Подготовка к собеседованию — Frontend-разработчик

Короткий ответ: Хойстинг — это подъём объявлений в начало их области видимости на этапе компиляции. var поднимается и инициализируется как undefined (функциональная область видимости), а let/const поднимаются, но остаются в TDZ (temporal dead zone) до строки объявления и имеют блочную область видимости.

Подробно:

1. var — функциональная область видимости, доступна как undefined до объявления, можно переобъявлять.
2. let — блочная область видимости, в TDZ до объявления, переприсваивание разрешено.
3. const — как let, но без переприсваивания (само значение объекта при этом мутабельно).
4. TDZ — обращение к let/const до объявления бросает ReferenceError, а не возвращает undefined.

console.log(a); // undefined — var поднят
var a = 1;

console.log(b); // ReferenceError — b в TDZ
let b = 2;

	Область видимости	До объявления	Переприсваивание
var	функция	undefined	да
let	блок	TDZ → ошибка	да
const	блок	TDZ → ошибка	нет

⚠️ Частая ошибка: считать, что let/const «не поднимаются». Они поднимаются — но обращение к ним до инициализации падает из-за TDZ.

Короткий ответ: TypeScript добавляет статическую проверку типов поверх JS: ошибки ловятся в редакторе и на этапе сборки, а не в рантайме. Типизация в нём структурная — совместимость определяется формой объекта (набором полей), а не именем типа или явным implements.

Подробно:

1. Что даёт TS — автодополнение и навигация, безопасный рефакторинг, самодокументируемые контракты, отлов опечаток и undefined до запуска.
2. Структурная vs номинальная — в Java/C# типы совместимы по имени (номинальная типизация). В TS — если объект имеет нужные поля, он подходит, даже если создан без знания о целевом типе.
3. Стирание типов — типы существуют только при компиляции, в рантайме это обычный JS. Нельзя проверить тип через instanceof для интерфейса.

interface Point { x: number; y: number }

function len(p: Point): number {
  return Math.hypot(p.x, p.y);
}

// объект не объявлял implements Point, но подходит по форме
const v = { x: 3, y: 4, label: "v" };
len(v); // OK — структурная типизация: лишнее поле label не мешает

⚠️ Частая ошибка: считать, что TS защищает в рантайме. Данные из API нужно валидировать (zod и т.п.) — компилятор верит вашим аннотациям на слово.

Короткий ответ: JSX — это синтаксический сахар над вызовами функции создания элементов. Компилятор (Babel/SWC) превращает его в вызовы jsx-runtime (или React.createElement в старом transform), которые возвращают обычные JS-объекты — описания UI, а не реальные DOM-узлы.

Подробно:

1. Это выражение, а не HTML — JSX компилируется в JavaScript и встраивается везде, где допустимо выражение.
2. Новый JSX-transform (React 17+) — импортирует jsx/jsxs из react/jsx-runtime, поэтому import React ради JSX больше не нужен.
3. Возвращает объект-элемент — вида { type, key, props }; реальный DOM появляется только при рендере.
4. Регистр имеет значение — тег с заглавной буквы — компонент, со строчной — DOM-элемент.

const el = <button className="btn" onClick={fn}>Save</button>;
// новый transform компилирует это в:
import { jsx } from "react/jsx-runtime";
const el = jsx("button", { className: "btn", onClick: fn, children: "Save" });

⚠️ Частая ошибка: считать JSX строкой или HTML. На деле это JS: пишут className, а не class, а атрибуты — в camelCase (onClick, tabIndex).

Короткий ответ: Critical Rendering Path (критический путь рендеринга) — это последовательность шагов браузера от получения HTML до первого пикселя на экране: DOM + CSSOM → render tree → layout → paint → composite. Синхронный CSS и блокирующий JS задерживают этот путь.

Подробно:

1. DOM — браузер парсит HTML в дерево узлов.
2. CSSOM — параллельно строится объектная модель стилей; CSS блокирует рендеринг, так как без него нельзя посчитать стили.
3. Render tree — DOM и CSSOM объединяются, узлы с display: none отбрасываются.
4. Layout (reflow) — вычисляются геометрия и позиции элементов.
5. Paint — узлы растеризуются в слои пикселей.
6. Composite — слои собираются на экране (часто на GPU).

HTML ─► DOM ─┐
             ├─► Render Tree ─► Layout ─► Paint ─► Composite ─► экран
CSS  ─► CSSOM┘
  ▲ блокирует рендеринг      ▲ <script> без defer/async

⚠️ Частая ошибка: считать, что JS никогда не мешает рендерингу. Синхронный <script> в <head> останавливает парсинг HTML и построение DOM — используйте defer или вынесите скрипты вниз.

Короткий ответ: Доступность (a11y) — это проектирование продуктов так, чтобы ими могли пользоваться люди с нарушениями зрения, слуха, моторики и когнитивными особенностями. Она важна по трём причинам: этической (люди), деловой (шире аудитория) и юридической (WCAG, ADA, European Accessibility Act).

Подробно:

1. Люди — около 15% населения живёт с какой-либо инвалидностью; временные (сломанная рука) и ситуативные (яркое солнце, шумное метро) ограничения касаются всех.
2. Бизнес — больше пользователей, лучше SEO (семантика = понятная структура), меньше отказов.
3. Закон — WCAG 2.x де-факто стандарт; в США — ADA/Section 508, в ЕС — EAA; иски за недоступные сайты реальны.

Нарушение	Барьер	Решение
Зрение	не видит экран	скринридер, контраст, alt
Слух	не слышит звук	субтитры, транскрипты
Моторика	не пользуется мышью	доступность с клавиатуры
Когнитивные	сложный интерфейс	простой язык, ясная структура

⚠️ Частая ошибка: считать доступность «фичей для меньшинства» — на деле она улучшает UX для всех (эффект срезанного бордюра).