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

Короткий ответ: Каждый элемент — это вложенные слои: content → padding → border → margin. По умолчанию (content-box) width задаёт только контент, а padding и border прибавляются сверху. border-box включает padding и border внутрь заданной width.

Подробно:

1. content — область контента, на которую и ссылается width/height при content-box.
2. padding — внутренний отступ, окрашивается фоном элемента.
3. border — рамка между padding и margin.
4. margin — внешний отступ, прозрачный; у соседних блоков по вертикали схлопывается (margin collapse).

┌──────────── margin ────────────┐
│  ┌───────── border ─────────┐  │
│  │  ┌────── padding ─────┐  │  │
│  │  │     content        │  │  │
│  │  └────────────────────┘  │  │
│  └──────────────────────────┘  │
└────────────────────────────────┘

/* content-box: реальная ширина = 200 + 2*16 + 2*2 = 236px */
.a { box-sizing: content-box; width: 200px; padding: 16px; border: 2px solid; }

/* border-box: реальная ширина ровно 200px, padding/border внутри */
.b { box-sizing: border-box; width: 200px; padding: 16px; border: 2px solid; }

/* типичный сброс */
*, *::before, *::after { box-sizing: border-box; }

⚠️ Частая ошибка: задать width: 100% плюс padding на content-box — блок вылезает за контейнер; border-box это чинит.

Короткий ответ: Block-элементы занимают всю ширину строки и принимают любые размеры/отступы; inline идут в строку по содержимому и игнорируют width/вертикальные margin; inline-block — в строке, но с управляемыми размерами. Нормальный поток — порядок, в котором элементы раскладываются сверху вниз (block) и слева направо (inline) без позиционирования.

Подробно:

1. block (<div>, <p>, <section>) — новая строка, ширина по умолчанию 100%, уважает width/height, все margin/padding.
2. inline (<span>, <a>, <strong>) — в потоке текста; width/height и вертикальные margin игнорируются, горизонтальные — работают.
3. inline-block — в строке, как inline, но с полноценными размерами и отступами — классика для «кнопок» в ряд.
4. Нормальный поток — раскладка по умолчанию; position, float, flex/grid выводят из него.

display	Перенос строки	width/height	Верт. margin
block	да	да	да
inline	нет	нет	нет
inline-block	нет	да	да

.tag { display: inline-block; width: 80px; padding: 4px 8px; }

⚠️ Частая ошибка: задавать width/height на чистом inline-элементе и ждать эффекта — их там не существует; нужен inline-block или block.

Короткий ответ: Хойстинг — это подъём объявлений в начало их области видимости на этапе компиляции. 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.

Короткий ответ: === сравнивает без приведения типов (строгое равенство), == сначала приводит операнды к общему типу (нестрогое). Из-за непредсказуемости приведений в коде почти всегда используют ===. Восемь значений считаются falsy, остальные — truthy.

Подробно:

1. === — равны, только если совпадают и тип, и значение.
2. == — приводит типы по сложным правилам (число ↔ строка, к примитиву и т.д.).
3. Falsy — ровно восемь: false, 0, -0, 0n, '', null, undefined, NaN. Всё прочее truthy.

Выражение	Результат	Почему
0 == ''	true	оба → число 0
0 == '0'	true	'0' → 0
null == undefined	true	спецправило
null == 0	false	null равен только undefined
NaN === NaN	false	NaN не равен ничему
[] == ![]	true	![]→false→0, []→''→0

⚠️ Частая ошибка: проверять if (x == null) и удивляться. Это как раз корректный приём — ловит и null, и undefined. А вот == с числами и строками — источник багов; берите ===.

Короткий ответ: 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 и т.п.) — компилятор верит вашим аннотациям на слово.