Junior JavaScript

Экспресс-шпаргалка 20/20

1. var имеет функциональную область видимости и hoisting с undefined. let и const имеют блочную область видимости и TDZ. const нельзя переназначить.
2. == сравнивает с приведением типов, === сравнивает без приведения. В прод-коде почти всегда используют ===.
3. undefined обычно означает "значение не задано", null — "значение задано как пустое намеренно".
4. Примитивы копируются по значению, объекты/массивы/функции копируются по ссылке.
5. Hoisting — поднятие объявлений вверх области видимости. TDZ — период до инициализации let/const, когда доступ к переменной запрещен.
6. this определяется местом вызова функции, а не местом ее объявления.
7. Замыкание — функция, которая сохраняет доступ к переменным внешней функции после ее завершения.
8. Если свойства нет у объекта, движок ищет его в прототипе, затем в прототипе прототипа и так далее до null.
9. Event Loop координирует выполнение call stack и очередей задач, чтобы однопоточный JS мог обрабатывать асинхронные операции.
10. async/await — синтаксис поверх Promise, который делает асинхронный код более читаемым.
11. Microtasks выполняются сразу после текущего синхронного кода и до следующей macrotask.
12. map преобразует каждый элемент, filter отбирает элементы по условию, reduce сводит массив к одному значению.
13. Debounce откладывает вызов до паузы в событиях, throttle ограничивает частоту вызова фиксированным интервалом.
14. Shallow copy копирует только первый уровень, deep copy — все вложенные уровни.
15. ... в выражении — spread (раскрывает), в параметрах/деструктуризации — rest (собирает остаток).
16. Деструктуризация позволяет извлекать значения из объектов и массивов в переменные.
17. Иммутабельность делает изменения состояния предсказуемыми, упрощает отладку и помогает оптимизациям рендера.
18. Cookie отправляются на сервер с запросом, localStorage живет между сессиями, sessionStorage очищается при закрытии вкладки.
19. CORS — механизм браузера, который регулирует междоменные запросы через специальные HTTP-заголовки.
20. Обычный script блокирует парсинг HTML. async загружается параллельно и выполняется сразу после загрузки. defer загружается параллельно и выполняется после парсинга DOM в порядке подключения.

1. В чем разница между var, let и const?

Теги: javascript, variables, scope, hoisting Сложность: Junior

Короткий ответ

var имеет функциональную область видимости и hoisting с undefined. let и const имеют блочную область видимости и TDZ. const нельзя переназначить.

Что сказать на интервью (30-60 секунд)

1. Где это применяется: В ежедневных задачах JavaScript: данные, функции, события и работа в браузере.
2. Главный риск: Путаются базовые механики JS, из-за чего в коде появляются повторяющиеся баги.
3. Как проверяете решение: Проверяю на двух контрпримерах (где работает/где ломается) и закрепляю мини-задачей в песочнице.

Мини-пример

var a = 1;
let b = 2;
const c = { value: 3 };
c.value = 4;

Углубление (2-3 минуты)

1. Свяжите тему "В чем разница между var, let и const?" с одним production-сценарием и объясните, почему она влияет на результат.
2. Назовите признак, по которому поймете, что решение сработало в реальном проекте.
3. Проверьте, что можете объяснить это простым примером за 60-90 секунд без подсказок.

Типичные ошибки

1. Путают терминологию и не фиксируют критерий проверки.
2. Не проговаривают ограничения и edge-cases.
3. Путают соседние концепции и не обозначают границы применимости выбранного подхода.

Follow-up вопросы

1. Какой минимальный тест докажет корректность подхода?
2. Как поведет себя решение на edge-case и почему?
3. Какой минимальный тест или проверка подтвердит, что решение действительно работает?

Что повторить

1. Связанный вопрос из Банка вопросов для закрепления.
2. Мини-код, который воспроизводит поведение и проверяется за 1-2 минуты.
3. Прогоните один мини-пример в Песочнице и объясните вывод своими словами.

Связанные модули и карта

1. Обучение: JavaScript
2. Обучение: Web и сеть
3. Карта подготовки: JavaScript

2. В чем разница между == и ===?

Теги: javascript, equality, type-coercion, operators Сложность: Junior

Короткий ответ

== сравнивает с приведением типов, === сравнивает без приведения. В прод-коде почти всегда используют ===.

Что сказать на интервью (30-60 секунд)

1. Где это применяется: В ежедневных задачах JavaScript: данные, функции, события и работа в браузере.
2. Главный риск: Путаются базовые механики JS, из-за чего в коде появляются повторяющиеся баги.
3. Как проверяете решение: Собираю короткий воспроизводимый пример, прогоняю edge-case и объясняю результат без подсказок.

Мини-пример

0 == false; // true
0 === false; // false

Углубление (2-3 минуты)

1. Свяжите тему "В чем разница между == и ===?" с одним production-сценарием и объясните, почему она влияет на результат.
2. Сравните минимум два подхода и объясните, почему выбираете один в заданных ограничениях.
3. Проверьте, что можете объяснить это простым примером за 60-90 секунд без подсказок.

Типичные ошибки

1. Путают терминологию и не фиксируют критерий проверки.
2. Дают определение, но не объясняют, как это использовать в рабочем коде.
3. Путают соседние концепции и не обозначают границы применимости выбранного подхода.

Follow-up вопросы

1. Какой минимальный тест докажет корректность подхода?
2. Где граница применимости этого решения?
3. Какой минимальный тест или проверка подтвердит, что решение действительно работает?

Что повторить

1. Базовые определения темы и 2 контрпримера (где работает и где ломается).
2. Связанный вопрос из Банка вопросов для закрепления.
3. Прогоните один мини-пример в Песочнице и объясните вывод своими словами.

Связанные модули и карта

1. Обучение: JavaScript
2. Обучение: Web и сеть
3. Карта подготовки: JavaScript

3. Чем null отличается от undefined?

Теги: javascript, null, undefined, types Сложность: Junior

Короткий ответ

undefined обычно означает "значение не задано", null — "значение задано как пустое намеренно".

Что сказать на интервью (30-60 секунд)

1. Где это применяется: В типизации контрактов между UI, API и бизнес-логикой, чтобы ловить ошибки до рантайма.
2. Главный риск: Слабые контракты увеличивают runtime-ошибки и ломают интеграции между слоями.
3. Как проверяете решение: Делаю ручную проверку сценария + мини-тест, чтобы подтвердить поведение в реальном коде.

Мини-пример

let a;
const obj = { v: null };
console.log(a, obj.missing, obj.v);

Углубление (2-3 минуты)

1. Свяжите тему "Чем null отличается от undefined?" с одним production-сценарием и объясните, почему она влияет на результат.
2. Сравните compile-time и runtime валидацию в этом контексте.
3. Проверьте, что можете объяснить это простым примером за 60-90 секунд без подсказок.

Типичные ошибки

1. Не учитывают backward compatibility типов API.
2. Надеются только на TypeScript без runtime-валидации входных данных.
3. Путают соседние концепции и не обозначают границы применимости выбранного подхода.

Follow-up вопросы

1. Где здесь compile-time проверка достаточна, а где нужна runtime?
2. Как будете мигрировать типы без поломки потребителей API?
3. Какой минимальный тест или проверка подтвердит, что решение действительно работает?

Что повторить

1. Контракты DTO/API и runtime-валидацию.
2. Union/narrowing/generics в контексте задачи.
3. Прогоните один мини-пример в Песочнице и объясните вывод своими словами.

Связанные модули и карта

1. Обучение: JavaScript
2. Обучение: Web и сеть
3. Карта подготовки: JavaScript

4. Что такое примитивные и ссылочные типы?

Теги: javascript, primitives, references, mutation Сложность: Junior

Короткий ответ

Примитивы копируются по значению, объекты/массивы/функции копируются по ссылке.

Что сказать на интервью (30-60 секунд)

1. Где это применяется: В ежедневных задачах JavaScript: данные, функции, события и работа в браузере.
2. Главный риск: Путаются базовые механики JS, из-за чего в коде появляются повторяющиеся баги.
3. Как проверяете решение: Собираю короткий воспроизводимый пример, прогоняю edge-case и объясняю результат без подсказок.

Мини-пример

const a = { x: 1 };
const b = a;
b.x = 2;
console.log(a.x); // 2

Углубление (2-3 минуты)

1. Свяжите тему "Что такое примитивные и ссылочные типы?" с одним production-сценарием и объясните, почему она влияет на результат.
2. Разложите ответ на «механика -> применение -> ограничение», чтобы показать не только теорию, но и практику.
3. Проверьте, что можете объяснить это простым примером за 60-90 секунд без подсказок.

Типичные ошибки

1. Не проговаривают ограничения и edge-cases.
2. Дают определение, но не объясняют, как это использовать в рабочем коде.
3. Путают соседние концепции и не обозначают границы применимости выбранного подхода.

Follow-up вопросы

1. Как поведет себя решение на edge-case и почему?
2. Какой минимальный тест докажет корректность подхода?
3. Какой минимальный тест или проверка подтвердит, что решение действительно работает?

Что повторить

1. Мини-код, который воспроизводит поведение и проверяется за 1-2 минуты.
2. Базовые определения темы и 2 контрпримера (где работает и где ломается).
3. Прогоните один мини-пример в Песочнице и объясните вывод своими словами.

Связанные модули и карта

1. Обучение: JavaScript
2. Обучение: Web и сеть
3. Карта подготовки: JavaScript

5. Что такое hoisting и TDZ?

Теги: javascript, hoisting, tdz, execution-context Сложность: Junior

Короткий ответ

Hoisting — поднятие объявлений вверх области видимости. TDZ — период до инициализации let/const, когда доступ к переменной запрещен.

Что сказать на интервью (30-60 секунд)

1. Где это применяется: В ежедневных задачах JavaScript: данные, функции, события и работа в браузере.
2. Главный риск: Путаются базовые механики JS, из-за чего в коде появляются повторяющиеся баги.
3. Как проверяете решение: Проверяю на двух контрпримерах (где работает/где ломается) и закрепляю мини-задачей в песочнице.

Мини-пример

console.log(x); // undefined
var x = 1;
// console.log(y); // ReferenceError
let y = 2;

Углубление (2-3 минуты)

1. Свяжите тему "Что такое hoisting и TDZ?" с одним production-сценарием и объясните, почему она влияет на результат.
2. Разложите ответ на «механика -> применение -> ограничение», чтобы показать не только теорию, но и практику.
3. Проверьте, что можете объяснить это простым примером за 60-90 секунд без подсказок.

Типичные ошибки

1. Не проговаривают ограничения и edge-cases.
2. Путают терминологию и не фиксируют критерий проверки.
3. Путают соседние концепции и не обозначают границы применимости выбранного подхода.

Follow-up вопросы

1. Как поведет себя решение на edge-case и почему?
2. Где граница применимости этого решения?
3. Какой минимальный тест или проверка подтвердит, что решение действительно работает?

Что повторить

1. Мини-код, который воспроизводит поведение и проверяется за 1-2 минуты.
2. Базовые определения темы и 2 контрпримера (где работает и где ломается).
3. Прогоните один мини-пример в Песочнице и объясните вывод своими словами.

Связанные модули и карта

1. Обучение: JavaScript
2. Обучение: Web и сеть
3. Карта подготовки: JavaScript

6. Как работает this в JavaScript?

Теги: javascript, this, bind, call-apply Сложность: Junior

Короткий ответ

this определяется местом вызова функции, а не местом ее объявления.

Что сказать на интервью (30-60 секунд)

1. Где это применяется: В ежедневных задачах JavaScript: данные, функции, события и работа в браузере.
2. Главный риск: Путаются базовые механики JS, из-за чего в коде появляются повторяющиеся баги.
3. Как проверяете решение: Собираю короткий воспроизводимый пример, прогоняю edge-case и объясняю результат без подсказок.

Мини-пример

const user = { name: 'Ann', hi() { return this.name; } };
const fn = user.hi;
fn(); // undefined (strict mode)

Углубление (2-3 минуты)

1. Свяжите тему "Как работает this в JavaScript?" с одним production-сценарием и объясните, почему она влияет на результат.
2. Разложите ответ на «механика -> применение -> ограничение», чтобы показать не только теорию, но и практику.
3. Проверьте, что можете объяснить это простым примером за 60-90 секунд без подсказок.

Типичные ошибки

1. Дают определение, но не объясняют, как это использовать в рабочем коде.
2. Путают терминологию и не фиксируют критерий проверки.
3. Путают соседние концепции и не обозначают границы применимости выбранного подхода.

Follow-up вопросы

1. Где граница применимости этого решения?
2. Как поведет себя решение на edge-case и почему?
3. Какой минимальный тест или проверка подтвердит, что решение действительно работает?

Что повторить

1. Мини-код, который воспроизводит поведение и проверяется за 1-2 минуты.
2. Связанный вопрос из Банка вопросов для закрепления.
3. Прогоните один мини-пример в Песочнице и объясните вывод своими словами.

Связанные модули и карта

1. Обучение: JavaScript
2. Обучение: Web и сеть
3. Карта подготовки: JavaScript

7. Что такое замыкание?

Теги: javascript, closures, lexical-scope, memory Сложность: Junior

Короткий ответ

Замыкание — функция, которая сохраняет доступ к переменным внешней функции после ее завершения.

Что сказать на интервью (30-60 секунд)

1. Где это применяется: В ежедневных задачах JavaScript: данные, функции, события и работа в браузере.
2. Главный риск: Путаются базовые механики JS, из-за чего в коде появляются повторяющиеся баги.
3. Как проверяете решение: Делаю ручную проверку сценария + мини-тест, чтобы подтвердить поведение в реальном коде.

Мини-пример

function counter() {
  let n = 0;
  return () => ++n;
}

Углубление (2-3 минуты)

1. Свяжите тему "Что такое замыкание?" с одним production-сценарием и объясните, почему она влияет на результат.
2. Разложите ответ на «механика -> применение -> ограничение», чтобы показать не только теорию, но и практику.
3. Проверьте, что можете объяснить это простым примером за 60-90 секунд без подсказок.

Типичные ошибки

1. Дают определение, но не объясняют, как это использовать в рабочем коде.
2. Путают терминологию и не фиксируют критерий проверки.
3. Путают соседние концепции и не обозначают границы применимости выбранного подхода.

Follow-up вопросы

1. Где граница применимости этого решения?
2. Какой минимальный тест докажет корректность подхода?
3. Какой минимальный тест или проверка подтвердит, что решение действительно работает?

Что повторить

1. Базовые определения темы и 2 контрпримера (где работает и где ломается).
2. Связанный вопрос из Банка вопросов для закрепления.
3. Прогоните один мини-пример в Песочнице и объясните вывод своими словами.

Связанные модули и карта

1. Обучение: JavaScript
2. Обучение: Web и сеть
3. Карта подготовки: JavaScript

8. Что такое prototype chain?

Теги: javascript, prototypes, inheritance, objects Сложность: Junior

Короткий ответ

Если свойства нет у объекта, движок ищет его в прототипе, затем в прототипе прототипа и так далее до null.

Что сказать на интервью (30-60 секунд)

1. Где это применяется: В ежедневных задачах JavaScript: данные, функции, события и работа в браузере.
2. Главный риск: Путаются базовые механики JS, из-за чего в коде появляются повторяющиеся баги.
3. Как проверяете решение: Проверяю на двух контрпримерах (где работает/где ломается) и закрепляю мини-задачей в песочнице.

Мини-пример

const animal = { sound: '...' };
const dog = Object.create(animal);
console.log(dog.sound); // ...

Углубление (2-3 минуты)

1. Свяжите тему "Что такое prototype chain?" с одним production-сценарием и объясните, почему она влияет на результат.
2. Добавьте edge-case, где типы предотвращают регрессию.
3. Проверьте, что можете объяснить это простым примером за 60-90 секунд без подсказок.

Типичные ошибки

1. Надеются только на TypeScript без runtime-валидации входных данных.
2. Не учитывают backward compatibility типов API.
3. Путают соседние концепции и не обозначают границы применимости выбранного подхода.

Follow-up вопросы

1. Как будете мигрировать типы без поломки потребителей API?
2. Какой контрпример сломает слабый типовой контракт?
3. Какой минимальный тест или проверка подтвердит, что решение действительно работает?

Что повторить

1. Union/narrowing/generics в контексте задачи.
2. План миграции типов без breaking changes.
3. Прогоните один мини-пример в Песочнице и объясните вывод своими словами.

Связанные модули и карта

1. Обучение: JavaScript
2. Обучение: Web и сеть
3. Карта подготовки: JavaScript

9. Что такое Event Loop?

Теги: javascript, event-loop, async, tasks Сложность: Junior

Короткий ответ

Event Loop координирует выполнение call stack и очередей задач, чтобы однопоточный JS мог обрабатывать асинхронные операции.

Что сказать на интервью (30-60 секунд)

1. Где это применяется: В асинхронных потоках: запросы, очереди задач и обработка действий без блокировок.
2. Главный риск: Типовые последствия: race conditions, зависшие запросы, утечки состояния и нестабильные сценарии.
3. Как проверяете решение: Проверяю на двух контрпримерах (где работает/где ломается) и закрепляю мини-задачей в песочнице.

Мини-пример

console.log(1);
setTimeout(() => console.log(2));
Promise.resolve().then(() => console.log(3));
console.log(4); // 1,4,3,2

Углубление (2-3 минуты)

1. Свяжите тему "Что такое Event Loop?" с одним production-сценарием и объясните, почему она влияет на результат.
2. Покажите, как тема влияет на race conditions, отмену операций и устойчивость состояния.
3. Проверьте, что можете объяснить это простым примером за 60-90 секунд без подсказок.

Типичные ошибки

1. Смешивают microtask/macrotask и делают неверные выводы о порядке выполнения.
2. Не учитывают поведение при ошибках внешних сервисов.
3. Путают соседние концепции и не обозначают границы применимости выбранного подхода.

Follow-up вопросы

1. Что изменится в поведении при таймауте внешнего сервиса?
2. Где поставите retry, а где запретите его и почему?
3. Какой минимальный тест или проверка подтвердит, что решение действительно работает?

Что повторить

1. Стратегии timeout, retry, cancellation и их ограничения.
2. Порядок очередей/фаз выполнения и обработку ошибок.
3. Прогоните один мини-пример в Песочнице и объясните вывод своими словами.

Связанные модули и карта

1. Обучение: JavaScript
2. Обучение: Web и сеть
3. Карта подготовки: JavaScript

10. Разница между Promise и async/await?

Теги: javascript, promises, async-await, error-handling Сложность: Junior

Короткий ответ

async/await — синтаксис поверх Promise, который делает асинхронный код более читаемым.

Что сказать на интервью (30-60 секунд)

1. Где это применяется: В ежедневных задачах JavaScript: данные, функции, события и работа в браузере.
2. Главный риск: Путаются базовые механики JS, из-за чего в коде появляются повторяющиеся баги.
3. Как проверяете решение: Делаю ручную проверку сценария + мини-тест, чтобы подтвердить поведение в реальном коде.

Мини-пример

async function load() {
  try { return await fetch('/api'); }
  catch (e) { console.error(e); }
}

Углубление (2-3 минуты)

1. Свяжите тему "Разница между Promise и async/await?" с одним production-сценарием и объясните, почему она влияет на результат.
2. Разберите порядок выполнения шагов при нормальном сценарии и при ошибке/таймауте.
3. Проверьте, что можете объяснить это простым примером за 60-90 секунд без подсказок.

Типичные ошибки

1. Смешивают microtask/macrotask и делают неверные выводы о порядке выполнения.
2. Игнорируют отмену, таймауты и повторные запросы, из-за чего появляются race conditions.
3. Путают соседние концепции и не обозначают границы применимости выбранного подхода.

Follow-up вопросы

1. Как исключите race condition при параллельных запросах?
2. Что изменится в поведении при таймауте внешнего сервиса?
3. Какой минимальный тест или проверка подтвердит, что решение действительно работает?

Что повторить

1. Метрики latency/error-rate на целевом сценарии.
2. Стратегии timeout, retry, cancellation и их ограничения.
3. Прогоните один мини-пример в Песочнице и объясните вывод своими словами.

Связанные модули и карта

1. Обучение: JavaScript
2. Обучение: Web и сеть
3. Карта подготовки: JavaScript

11. Разница microtask и macrotask?

Теги: javascript, microtask, macrotask, event-loop Сложность: Junior

Короткий ответ

Microtasks выполняются сразу после текущего синхронного кода и до следующей macrotask.

Что сказать на интервью (30-60 секунд)

1. Где это применяется: В асинхронных потоках: запросы, очереди задач и обработка действий без блокировок.
2. Главный риск: Типовые последствия: race conditions, зависшие запросы, утечки состояния и нестабильные сценарии.
3. Как проверяете решение: Делаю ручную проверку сценария + мини-тест, чтобы подтвердить поведение в реальном коде.

Мини-пример

setTimeout(() => console.log('macro'));
Promise.resolve().then(() => console.log('micro'));

Углубление (2-3 минуты)

1. Свяжите тему "Разница microtask и macrotask?" с одним production-сценарием и объясните, почему она влияет на результат.
2. Обозначьте стратегию timeout/retry/cancel для production-потока.
3. Проверьте, что можете объяснить это простым примером за 60-90 секунд без подсказок.

Типичные ошибки

1. Смешивают microtask/macrotask и делают неверные выводы о порядке выполнения.
2. Игнорируют отмену, таймауты и повторные запросы, из-за чего появляются race conditions.
3. Путают соседние концепции и не обозначают границы применимости выбранного подхода.

Follow-up вопросы

1. Как исключите race condition при параллельных запросах?
2. Что изменится в поведении при таймауте внешнего сервиса?
3. Какой минимальный тест или проверка подтвердит, что решение действительно работает?

Что повторить

1. Метрики latency/error-rate на целевом сценарии.
2. Порядок очередей/фаз выполнения и обработку ошибок.
3. Прогоните один мини-пример в Песочнице и объясните вывод своими словами.

Связанные модули и карта

1. Обучение: JavaScript
2. Обучение: Web и сеть
3. Карта подготовки: JavaScript

12. Для чего map, filter, reduce?

Теги: javascript, arrays, map-filter-reduce, functional-style Сложность: Junior

Короткий ответ

map преобразует каждый элемент, filter отбирает элементы по условию, reduce сводит массив к одному значению.

Что сказать на интервью (30-60 секунд)

1. Где это применяется: В ежедневных задачах JavaScript: данные, функции, события и работа в браузере.
2. Главный риск: Путаются базовые механики JS, из-за чего в коде появляются повторяющиеся баги.
3. Как проверяете решение: Делаю ручную проверку сценария + мини-тест, чтобы подтвердить поведение в реальном коде.

Мини-пример

const arr = [1, 2, 3];
arr.map(x => x * 2); // [2,4,6]
arr.filter(x => x > 1); // [2,3]
arr.reduce((s, x) => s + x, 0); // 6

Углубление (2-3 минуты)

1. Свяжите тему "Для чего map, filter, reduce?" с одним production-сценарием и объясните, почему она влияет на результат.
2. Назовите признак, по которому поймете, что решение сработало в реальном проекте.
3. Проверьте, что можете объяснить это простым примером за 60-90 секунд без подсказок.

Типичные ошибки

1. Не проговаривают ограничения и edge-cases.
2. Дают определение, но не объясняют, как это использовать в рабочем коде.
3. Путают соседние концепции и не обозначают границы применимости выбранного подхода.

Follow-up вопросы

1. Какой минимальный тест докажет корректность подхода?
2. Где граница применимости этого решения?
3. Какой минимальный тест или проверка подтвердит, что решение действительно работает?

Что повторить

1. Базовые определения темы и 2 контрпримера (где работает и где ломается).
2. Мини-код, который воспроизводит поведение и проверяется за 1-2 минуты.
3. Прогоните один мини-пример в Песочнице и объясните вывод своими словами.

Связанные модули и карта

1. Обучение: JavaScript
2. Обучение: Web и сеть
3. Карта подготовки: JavaScript

13. Что такое debounce и throttle?

Теги: javascript, debounce, throttle, performance Сложность: Junior

Короткий ответ

Debounce откладывает вызов до паузы в событиях, throttle ограничивает частоту вызова фиксированным интервалом.

Что сказать на интервью (30-60 секунд)

1. Где это применяется: В производительности интерфейса: рендер, загрузка ассетов, отзывчивость и стабильность UX.
2. Главный риск: Неправильная реализация дает лишние ререндеры, рост LCP/TTI и деградацию пользовательского пути.
3. Как проверяете решение: Собираю короткий воспроизводимый пример, прогоняю edge-case и объясняю результат без подсказок.

Мини-пример

const onInput = debounce(search, 300);
const onScroll = throttle(trackScroll, 100);

Углубление (2-3 минуты)

1. Свяжите тему "Что такое debounce и throttle?" с одним production-сценарием и объясните, почему она влияет на результат.
2. Покажите, как изменение влияет на рендер и стоимость JavaScript.
3. Проверьте, что можете объяснить это простым примером за 60-90 секунд без подсказок.

Типичные ошибки

1. Не проверяют сценарий на медленных устройствах и сетях.
2. Переусложняют мемоизацию там, где нет измеримой проблемы.
3. Путают соседние концепции и не обозначают границы применимости выбранного подхода.

Follow-up вопросы

1. Как эта тема влияет на LCP/INP/CLS в реальном интерфейсе?
2. Что выберете: простоту кода или оптимизацию, и по какому критерию?
3. Какой минимальный тест или проверка подтвердит, что решение действительно работает?

Что повторить

1. Границы SSR/CSR/SSG/ISR (если применимо).
2. Критический путь рендера и метрики LCP/INP/CLS.
3. Прогоните один мини-пример в Песочнице и объясните вывод своими словами.

Связанные модули и карта

1. Обучение: JavaScript
2. Обучение: Web и сеть
3. Карта подготовки: JavaScript

14. Разница shallow copy и deep copy?

Теги: javascript, shallow-copy, deep-copy, structuredclone Сложность: Junior

Короткий ответ

Shallow copy копирует только первый уровень, deep copy — все вложенные уровни.

Что сказать на интервью (30-60 секунд)

1. Где это применяется: В ежедневных задачах JavaScript: данные, функции, события и работа в браузере.
2. Главный риск: Путаются базовые механики JS, из-за чего в коде появляются повторяющиеся баги.
3. Как проверяете решение: Проверяю на двух контрпримерах (где работает/где ломается) и закрепляю мини-задачей в песочнице.

Мини-пример

const a = { nested: { x: 1 } };
const b = { ...a };
b.nested.x = 2; // a.nested.x тоже станет 2

Углубление (2-3 минуты)

1. Свяжите тему "Разница shallow copy и deep copy?" с одним production-сценарием и объясните, почему она влияет на результат.
2. Сравните минимум два подхода и объясните, почему выбираете один в заданных ограничениях.
3. Проверьте, что можете объяснить это простым примером за 60-90 секунд без подсказок.

Типичные ошибки

1. Путают терминологию и не фиксируют критерий проверки.
2. Дают определение, но не объясняют, как это использовать в рабочем коде.
3. Путают соседние концепции и не обозначают границы применимости выбранного подхода.

Follow-up вопросы

1. Где граница применимости этого решения?
2. Какой минимальный тест докажет корректность подхода?
3. Какой минимальный тест или проверка подтвердит, что решение действительно работает?

Что повторить

1. Базовые определения темы и 2 контрпримера (где работает и где ломается).
2. Связанный вопрос из Банка вопросов для закрепления.
3. Прогоните один мини-пример в Песочнице и объясните вывод своими словами.

Связанные модули и карта

1. Обучение: JavaScript
2. Обучение: Web и сеть
3. Карта подготовки: JavaScript

15. Что делают spread и rest операторы?

Теги: javascript, spread-rest, destructuring, functions Сложность: Junior

Короткий ответ

... в выражении — spread (раскрывает), в параметрах/деструктуризации — rest (собирает остаток).

Что сказать на интервью (30-60 секунд)

1. Где это применяется: В ежедневных задачах JavaScript: данные, функции, события и работа в браузере.
2. Главный риск: Путаются базовые механики JS, из-за чего в коде появляются повторяющиеся баги.
3. Как проверяете решение: Делаю ручную проверку сценария + мини-тест, чтобы подтвердить поведение в реальном коде.

Мини-пример

const arr = [1, 2];
const copy = [...arr];
function sum(...nums) { return nums.reduce((a, b) => a + b, 0); }

Углубление (2-3 минуты)

1. Свяжите тему "Что делают spread и rest операторы?" с одним production-сценарием и объясните, почему она влияет на результат.
2. Сравните минимум два подхода и объясните, почему выбираете один в заданных ограничениях.
3. Проверьте, что можете объяснить это простым примером за 60-90 секунд без подсказок.

Типичные ошибки

1. Путают терминологию и не фиксируют критерий проверки.
2. Дают определение, но не объясняют, как это использовать в рабочем коде.
3. Путают соседние концепции и не обозначают границы применимости выбранного подхода.

Follow-up вопросы

1. Где граница применимости этого решения?
2. Как поведет себя решение на edge-case и почему?
3. Какой минимальный тест или проверка подтвердит, что решение действительно работает?

Что повторить

1. Мини-код, который воспроизводит поведение и проверяется за 1-2 минуты.
2. Связанный вопрос из Банка вопросов для закрепления.
3. Прогоните один мини-пример в Песочнице и объясните вывод своими словами.

Связанные модули и карта

1. Обучение: JavaScript
2. Обучение: Web и сеть
3. Карта подготовки: JavaScript

16. Что такое деструктуризация?

Теги: javascript, destructuring, defaults, optional-chaining Сложность: Junior

Короткий ответ

Деструктуризация позволяет извлекать значения из объектов и массивов в переменные.

Что сказать на интервью (30-60 секунд)

1. Где это применяется: В ежедневных задачах JavaScript: данные, функции, события и работа в браузере.
2. Главный риск: Путаются базовые механики JS, из-за чего в коде появляются повторяющиеся баги.
3. Как проверяете решение: Проверяю на двух контрпримерах (где работает/где ломается) и закрепляю мини-задачей в песочнице.

Мини-пример

const user = { name: 'Sam', meta: { city: 'SPB' } };
const { name, meta: { city } } = user;

Углубление (2-3 минуты)

1. Свяжите тему "Что такое деструктуризация?" с одним production-сценарием и объясните, почему она влияет на результат.
2. Разложите ответ на «механика -> применение -> ограничение», чтобы показать не только теорию, но и практику.
3. Проверьте, что можете объяснить это простым примером за 60-90 секунд без подсказок.

Типичные ошибки

1. Не проговаривают ограничения и edge-cases.
2. Дают определение, но не объясняют, как это использовать в рабочем коде.
3. Путают соседние концепции и не обозначают границы применимости выбранного подхода.

Follow-up вопросы

1. Как поведет себя решение на edge-case и почему?
2. Какой минимальный тест докажет корректность подхода?
3. Какой минимальный тест или проверка подтвердит, что решение действительно работает?

Что повторить

1. Связанный вопрос из Банка вопросов для закрепления.
2. Базовые определения темы и 2 контрпримера (где работает и где ломается).
3. Прогоните один мини-пример в Песочнице и объясните вывод своими словами.

Связанные модули и карта

1. Обучение: JavaScript
2. Обучение: Web и сеть
3. Карта подготовки: JavaScript

17. Зачем нужна иммутабельность в фронтенде?

Теги: javascript, immutability, state, frontend Сложность: Junior

Короткий ответ

Иммутабельность делает изменения состояния предсказуемыми, упрощает отладку и помогает оптимизациям рендера.

Что сказать на интервью (30-60 секунд)

1. Где это применяется: В проектировании модулей, границ ответственности и поддерживаемой архитектуры продукта.
2. Главный риск: Размытые границы повышают связанность, замедляют изменения и увеличивают цену регрессий.
3. Как проверяете решение: Проверяю на двух контрпримерах (где работает/где ломается) и закрепляю мини-задачей в песочнице.

Мини-пример

setState(prev => ({ ...prev, count: prev.count + 1 }));

Углубление (2-3 минуты)

1. Свяжите тему "Зачем нужна иммутабельность в фронтенде?" с одним production-сценарием и объясните, почему она влияет на результат.
2. Разложите ответ на «механика -> применение -> ограничение», чтобы показать не только теорию, но и практику.
3. Проверьте, что можете объяснить это простым примером за 60-90 секунд без подсказок.

Типичные ошибки

1. Не проговаривают ограничения и edge-cases.
2. Путают терминологию и не фиксируют критерий проверки.
3. Путают соседние концепции и не обозначают границы применимости выбранного подхода.

Follow-up вопросы

1. Где граница применимости этого решения?
2. Как поведет себя решение на edge-case и почему?
3. Какой минимальный тест или проверка подтвердит, что решение действительно работает?

Что повторить

1. Мини-код, который воспроизводит поведение и проверяется за 1-2 минуты.
2. Связанный вопрос из Банка вопросов для закрепления.
3. Прогоните один мини-пример в Песочнице и объясните вывод своими словами.

Связанные модули и карта

1. Обучение: JavaScript
2. Обучение: Web и сеть
3. Карта подготовки: JavaScript

18. Разница между cookie, localStorage и sessionStorage?

Теги: web, cookies, storage, security Сложность: Junior

Короткий ответ

Cookie отправляются на сервер с запросом, localStorage живет между сессиями, sessionStorage очищается при закрытии вкладки.

Что сказать на интервью (30-60 секунд)

1. Где это применяется: В авторизации, хранении данных и безопасной работе клиента с API.
2. Главный риск: Ошибки здесь приводят к уязвимостям, утечкам данных и инцидентам безопасности.
3. Как проверяете решение: Собираю короткий воспроизводимый пример, прогоняю edge-case и объясняю результат без подсказок.

Мини-пример

localStorage.setItem('theme', 'dark');
sessionStorage.setItem('tabState', 'opened');
document.cookie = 'lang=ru; path=/';

Углубление (2-3 минуты)

1. Свяжите тему "Разница между cookie, localStorage и sessionStorage?" с одним production-сценарием и объясните, почему она влияет на результат.
2. Проверьте сценарии abuse-cases, а не только happy path.
3. Проверьте, что можете объяснить это простым примером за 60-90 секунд без подсказок.

Типичные ошибки

1. Ориентируются только на client-side защиту без серверной проверки.
2. Путают CORS, аутентификацию и авторизацию как один механизм.
3. Путают соседние концепции и не обозначают границы применимости выбранного подхода.

Follow-up вопросы

1. Какой abuse-case вы проверите первым?
2. Какие данные/операции требуют серверной валидации независимо от клиента?
3. Какой минимальный тест или проверка подтвердит, что решение действительно работает?

Что повторить

1. Негативные тесты на abuse-сценарии.
2. Разницу между AuthN/AuthZ, CORS, CSRF и XSS.
3. Прогоните один мини-пример в Песочнице и объясните вывод своими словами.

Связанные модули и карта

1. Обучение: JavaScript
2. Обучение: Web и сеть
3. Карта подготовки: JavaScript

19. Что такое CORS?

Теги: web, cors, http, browser-security Сложность: Junior

Короткий ответ

CORS — механизм браузера, который регулирует междоменные запросы через специальные HTTP-заголовки.

Что сказать на интервью (30-60 секунд)

1. Где это применяется: В авторизации, хранении данных и безопасной работе клиента с API.
2. Главный риск: Ошибки здесь приводят к уязвимостям, утечкам данных и инцидентам безопасности.
3. Как проверяете решение: Собираю короткий воспроизводимый пример, прогоняю edge-case и объясняю результат без подсказок.

Мини-пример

Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Methods: GET, POST

Углубление (2-3 минуты)

1. Свяжите тему "Что такое CORS?" с одним production-сценарием и объясните, почему она влияет на результат.
2. Проверьте сценарии abuse-cases, а не только happy path.
3. Проверьте, что можете объяснить это простым примером за 60-90 секунд без подсказок.

Типичные ошибки

1. Ориентируются только на client-side защиту без серверной проверки.
2. Не рассматривают негативные сценарии и источники утечки данных.
3. Путают соседние концепции и не обозначают границы применимости выбранного подхода.

Follow-up вопросы

1. Какой abuse-case вы проверите первым?
2. Как обнаружите нарушение политики безопасности в логах?
3. Какой минимальный тест или проверка подтвердит, что решение действительно работает?

Что повторить

1. Разницу между AuthN/AuthZ, CORS, CSRF и XSS.
2. Серверные проверки прав и политику хранения чувствительных данных.
3. Прогоните один мини-пример в Песочнице и объясните вывод своими словами.

Связанные модули и карта

1. Обучение: JavaScript
2. Обучение: Web и сеть
3. Карта подготовки: JavaScript

20. В чем разница между script, async и defer?

Теги: web, script-loading, async-defer, performance Сложность: Junior

Короткий ответ

Обычный script блокирует парсинг HTML. async загружается параллельно и выполняется сразу после загрузки. defer загружается параллельно и выполняется после парсинга DOM в порядке подключения.

Что сказать на интервью (30-60 секунд)

1. Где это применяется: В производительности интерфейса: рендер, загрузка ассетов, отзывчивость и стабильность UX.
2. Главный риск: Неправильная реализация дает лишние ререндеры, рост LCP/TTI и деградацию пользовательского пути.
3. Как проверяете решение: Делаю ручную проверку сценария + мини-тест, чтобы подтвердить поведение в реальном коде.

Мини-пример

<script src="/app.js" defer></script>
<script src="/analytics.js" async></script>

Куда дальше

1. Вернитесь в модуль: JavaScript.
2. Сверьтесь с картой темы: JavaScript.
3. Продолжайте по маршруту: Junior трек.
4. Закрепите один ответ на практике в Песочнице.

Углубление (2-3 минуты)

1. Свяжите тему "В чем разница между script, async и defer?" с одним production-сценарием и объясните, почему она влияет на результат.
2. Сравните поведение на быстром и медленном устройстве/сети.
3. Проверьте, что можете объяснить это простым примером за 60-90 секунд без подсказок.

Типичные ошибки

1. Не проверяют сценарий на медленных устройствах и сетях.
2. Переусложняют мемоизацию там, где нет измеримой проблемы.
3. Путают соседние концепции и не обозначают границы применимости выбранного подхода.

Follow-up вопросы

1. Как будете валидировать эффект на медленных устройствах?
2. Как эта тема влияет на LCP/INP/CLS в реальном интерфейсе?
3. Какой минимальный тест или проверка подтвердит, что решение действительно работает?

Что повторить

1. Профилирование рендера до/после изменения.
2. Границы SSR/CSR/SSG/ISR (если применимо).
3. Прогоните один мини-пример в Песочнице и объясните вывод своими словами.

Связанные модули и карта

1. Обучение: JavaScript
2. Обучение: Web и сеть
3. Карта подготовки: JavaScript