Подготовка к собеседованию — 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).

Короткий ответ: Cookie — маленькие (около 4 КБ каждая), браузер сам отправляет их с подходящими HTTP-запросами; сервер может сделать cookie HttpOnly (невидимой для JS), Secure, SameSite и задать срок жизни — поэтому они для сессий. localStorage — около 5 МБ на origin, живёт до очистки, общий для всех вкладок origin, синхронный API только для строк. sessionStorage — то же, но на одну вкладку: переживает перезагрузку и исчезает при закрытии вкладки. IndexedDB — асинхронная база для больших структурированных данных (объекты, Blob), доступна и в воркерах.

Подробно:

	Cookie	localStorage	sessionStorage	IndexedDB
Срок жизни	Expires/Max-Age или сессия	до очистки	до закрытия вкладки	до очистки
Объём	~4 КБ на cookie	~5 МБ	~5 МБ	по квоте, много
Уходит на сервер	да, автоматически	нет	нет	нет
Область	домен + путь	origin, все вкладки	origin, одна вкладка	origin
API	заголовки / document.cookie	синхронный, строки	синхронный, строки	асинхронный, объекты

1. Токены — localStorage читается любым XSS-скриптом; сессию надёжнее держать в cookie HttpOnly; Secure; SameSite.
2. Синхронизация вкладок — событие storage приходит в другие вкладки того же origin.
3. Не гарантия — браузер может вытеснить данные при нехватке места, а Safari удаляет записанное скриптами хранилище сайта после 7 дней без взаимодействия пользователя.

localStorage.setItem("prefs", JSON.stringify({ theme: "dark" })); // только строки
const prefs = JSON.parse(localStorage.getItem("prefs") ?? "{}");

sessionStorage.setItem("wizardStep", "2");  // эта вкладка, переживёт reload

window.addEventListener("storage", (e) => { // срабатывает в ДРУГИХ вкладках
  if (e.key === "prefs") applyPrefs(e.newValue);
});
// Сессионную cookie ставит сервер, JS её не видит:
// Set-Cookie: sid=…; HttpOnly; Secure; SameSite=Lax; Path=/; Max-Age=3600

⚠️ Частая ошибка: класть объект напрямую: localStorage.setItem("u", { a: 1 }) сохранит строку "[object Object]". Сериализуйте через JSON.stringify.

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

Подробно:

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

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

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