diff --git a/tasks/interview-basic-coreJS-changelog.md b/tasks/interview-basic-coreJS-changelog.md new file mode 100644 index 000000000..b08d9b9ed --- /dev/null +++ b/tasks/interview-basic-coreJS-changelog.md @@ -0,0 +1,338 @@ +# CoreJS Interview #1: Список изменений и обоснование + +Этот документ объясняет каждое изменение в списке вопросов CoreJS Interview #1 с обоснованием на основе программы Stage 1 и согласованности с [Interview #2](./interview-corejs.md). + +> Предыдущая версия: [interview-basic-coreJS-legacy.md](./interview-basic-coreJS-legacy.md) +> Текущая версия: [interview-basic-coreJS.md](./interview-basic-coreJS.md) + +--- + +## Проблема + +Предыдущая версия содержала **17 теоретических секций** и **14 coding-задач**. Как и в Interview #2, объём значительно превышал целевые 45-90 минут. Дополнительно: + +1. **Фрагментированные секции.** Три отдельные секции про функции (Functions, Functional Scope, Functions Parameters), две про массивы (Arrays Built-in Methods, Arrays Iterating/Sorting/Filtering), две про события (Events Basics, Events Propagation). Каждая — по 2-3 пункта, но ментор тратит время на переключение между ними. +2. **Баг в markdown.** Секция "Advanced Functions" (строка 60) случайно вложена в bullet-list секции "Closures Advanced" из-за `- ####` вместо `####`. +3. **Отсутствие OOP/Classes/Prototypes.** 12 часов программы (Stage 1, Week 11) не были представлены ни в одном интервью. При ревизии Interview #2 эти темы были убраны как "материал Stage 1", но в Interview #1 их тоже не было — образовалась дыра. +4. **14 coding tasks.** Включая тривиальные (Rest Parameters Sum — одна строка) и антипаттерны (Custom setTimeout через while loop — busy-waiting). +5. **Дубликаты с Interview #2.** Array.flat, Array.reduce, String Repeater, Currying — присутствовали в обоих интервью. + +--- + +## Бюджет времени: до и после + +### До (legacy-версия) + +| Блок | Секций | Мин. время | +| --------------------- | ------------- | ------------ | +| JS Topics (11 секций) | 11 | ~60 мин | +| Browser (6 секций) | 6 | ~30 мин | +| Design Patterns | 1 | ~5 мин | +| Coding tasks (14!) | 2-3 выбранные | ~40 мин | +| **Итого** | | **~135 мин** | + +### После (новая версия) + +Ментор выбирает 5-7 теоретических секций из 10 и 1-2 coding-задачи. + +| Фаза | Что происходит | Время | +| ------------------------- | --------------------------- | -------------- | +| Разогрев | Разговор о проекте студента | ~3 мин | +| Теория (5-7 секций из 10) | По выбору ментора | ~45-55 мин | +| Coding (1-2 задачи) | По выбору ментора | ~15-20 мин | +| Обратная связь | Итоги, советы | ~5 мин | +| **Итого** | | **~68-83 мин** | + +Тайминг по секциям (если покрывать все 10): + +| Блок | Пунктов | Ожид. время | +| ------------------------------ | ------- | ----------- | +| Variables, Types & Expressions | 5 | ~8 мин | +| Functions & Scope | 4 | ~8 мин | +| Closures | 3 | ~5 мин | +| `this` & Function Context | 4 | ~8 мин | +| OOP, Classes & Prototypes | 6 | ~10 мин | +| Objects & Arrays | 4 | ~5 мин | +| DOM & Events | 6 | ~8 мин | +| Web Storage | 3 | ~5 мин | +| HTTP Basics | 3 | ~5 мин | +| Clean Code | 3 | ~5 мин | +| **Все 10 секций** | | **~67 мин** | + +На практике ментор берёт 5-7, поэтому теоретическая часть занимает 35-50 минут. Вместе с разогревом, coding-задачей и обратной связью — **68-83 минуты**. Укладывается в целевые **45-90 минут**. + +--- + +## Объединённые секции + +### Functions + Functional Scope + Functions Parameters → "Functions & Scope" + +**Было:** Три секции (3 + 3 + 3 = 9 пунктов): + +- "Functions" (1 пункт) +- "Functional Scope" (3 пункта) +- "Functions Parameters / Arguments" (3 пункта) + +**Стало:** Одна секция "Functions & Scope" (4 пункта). + +**Почему:** Три отдельные секции по одной теме создавали ложное впечатление объёма. Ментор тратил время на переход между ними. Arrow vs expression vs declaration, scope и параметры — это одна тема "Функции". + +--- + +### Advanced Expressions + ECMAScript Intermediate → "Variables, Types & Expressions" + +**Было:** Две секции (5 + 6 = 11 пунктов): + +- "Advanced Expressions" (let/var/const, TDZ, hoisting, polyfills, Object.is) +- "ECMAScript Intermediate" (default params, spread, rest, destructuring, for..of) + +**Стало:** Одна секция "Variables, Types & Expressions" (5 пунктов). + +**Почему:** Обе секции — про переменные и ES6+ выражения. `Object.is` и "роль полифилов" удалены как слишком узкие; default parameters и rest parameters перенесены в "Functions & Scope", где они логичнее. + +--- + +### Events Basics + Events Propagation → "DOM & Events" + +**Было:** Три секции: + +- "Global Object Window" (1 пункт — DOM) +- "Events Basics" (6 пунктов) +- "Events Propagation / Preventing" (4 пункта) + +**Стало:** Одна секция "DOM & Events" (6 пунктов). + +**Почему:** DOM и события — неразделимые темы на практике. Три секции с пересекающимся содержимым. "Event Phases" из Basics и "Event propagation cycle" из Propagation — один и тот же вопрос. Объединение убирает дубли. + +--- + +### Objects Built-in Methods + ECMAScript Data Types + Arrays Built-in Methods + Arrays Iterating → "Objects & Arrays" + +**Было:** Четыре секции (4 + 2 + 2 + 2 = 10 пунктов): + +- "Objects Built-in Methods" +- "ECMAScript Data Types & Expressions" +- "Arrays Built-in Methods" +- "Arrays Iterating, Sorting, Filtering" + +**Стало:** Одна секция "Objects & Arrays" (4 пункта). + +**Почему:** Четыре секции по 2-3 пункта каждая — это фрагментация. "Object computed properties" и "Iterating through Object keys" (ECMAScript Data Types) — частный случай Object.keys/Object.entries. Объединение убирает мелкие дублирующие секции. + +--- + +## Добавленная тема + +### OOP, Classes & Prototypes — ДОБАВЛЕНО + +**Не было** в предыдущей версии Interview #1. + +**Почему добавлено:** + +- **12 часов программы Stage 1** (Week 11): OOP Basics (6ч) + Classes & Prototypes (6ч). +- **При ревизии Interview #2 эти темы были убраны** как "материал Stage 1". Но в Interview #1 их тоже не было — образовалась дыра в 12 часов, не проверяемая ни одним интервью. +- **Прототипы — фундаментальная концепция JS.** Без неё студент не понимает, как работает наследование, `instanceof`, и почему `Object.create` важен. +- **Классы используются во всех проектах Stage 2.** Если студент не понимает class/super/extends, у него будут проблемы с TypeScript в Stage 2. + +--- + +## Удалённые темы + +### Closures Advanced + Advanced Functions → разделены на "Closures" и "`this` & Function Context" + +**Было:** Две секции, одна из которых вложена с markdown-багом. + +**Что изменилось:** Контент не удалён, а перегруппирован: + +- Замыкания → отдельная секция "Closures" (3 пункта) +- `this`/call/apply/bind → отдельная секция "`this` & Function Context" (4 пункта) +- Баг markdown исправлен + +**Почему:** Старые секции "Closures Advanced" и "Advanced Functions" были склеены из-за markdown-бага. При этом `this` и замыкания — разные концепции, заслуживающие отдельных секций. Пункты "Understand how this works" и "Manage this" и "Be able to replace this value" — три формулировки одного вопроса. Сокращены до ясных пунктов. + +--- + +### Timers — УДАЛЕНО + +**Было:** `setTimeout` / `setInterval`, `clearTimeout` / `clearInterval`. + +**Почему удалено:** + +- **Тривиальная тема.** setTimeout/setInterval — API из двух функций. Нечего обсуждать 5 минут. +- **Проверяется через coding tasks.** Memoization и Private Counter косвенно проверяют понимание асинхронности. +- **В Interview #2 есть отдельная секция** про setTimeout vs requestAnimationFrame, которая глубже. + +--- + +### Date & Time — УДАЛЕНО + +**Было:** Working with the Date object, Timezones, Intl `(optional)`. + +**Почему удалено:** + +- **Уже был `(optional)`.** Даже авторы считали тему необязательной. +- **Не проверяет понимание JS.** Работа с Date — это знание API, не концепция. + +--- + +## Улучшения формата + +### Рекомендованный порядок интервью — ДОБАВЛЕНО + +**Не было** в предыдущей версии. + +**Что добавлено:** Таблица с четырьмя фазами: разогрев (~3 мин), теория (~45-55 мин), coding (~15-20 мин), обратная связь (~5 мин). + +**Почему:** + +- **Менторы воспринимали документ как чеклист.** Один ментор потратил 4+ часа, пытаясь покрыть все пункты. Явная структура «выберите 5-7 секций» снимает это давление. +- **Разогрев снижает стресс.** Студент приходит на интервью нервным. Если первый вопрос — сразу TDZ и hoisting, студент может «заморозиться». Вопрос о проекте даёт 2-3 минуты на адаптацию и даёт ментору контекст для follow-up вопросов. +- **Обратная связь — обучающий момент.** Интервью — не экзамен, а часть обучения. 5 минут на итоги и советы помогают студенту больше, чем ещё один вопрос по теории. + +--- + +### Маркеры приоритета: core / (advanced) / (optional) — ДОБАВЛЕНО + +**Не было** в предыдущей версии. Все пункты выглядели равнозначными. + +**Что добавлено:** Пункты без маркера — обязательные (core). Пункты с **(advanced)** — для сильных студентов. Пункты с **(optional)** — можно пропустить. + +Примеры: + +- `Object.create` и явная настройка прототипа **(advanced)** — потому что это глубокая тема, и слабый студент может не дойти до неё за 45 минут. +- `for..of` loop **(optional)** — потому что это синтаксический сахар, а не концепция. +- Binding a function twice **(advanced)** — потому что это edge case, который в реальном коде почти не встречается. + +**Почему:** Ментор видит 6 пунктов в секции OOP и не знает, что важнее — `new` keyword или `Object.create`. С маркерами ментор может адаптировать глубину к уровню студента. Слабому — только core. Сильному — core + advanced. + +--- + +### Расширение Web Storage — было 1 пункт, стало 3 + +**Было:** Одна строчка «Differences between LocalStorage, SessionStorage, and Cookies.» + +**Стало:** Три пункта: + +1. Различия между LocalStorage, SessionStorage и Cookies. +2. Лимиты хранилища и формат данных (строковая сериализация). +3. Когда использовать какое: сессионные данные vs постоянные vs серверные. + +**Почему:** Один пункт превращал секцию в 2-минутную формальность — «перечислите три отличия». Три пункта позволяют ментору копнуть глубже: почему нельзя хранить объект в localStorage без JSON.stringify? Почему cookies отправляются на сервер, а localStorage — нет? Это практические вопросы, с которыми студенты сталкиваются в проектах. + +--- + +### HTTP Basics — ДОБАВЛЕНО + +**Не было** ни в одном интервью. + +**Что добавлено:** Секция из 3 пунктов: + +1. HTTP methods (GET, POST, PUT, DELETE) — когда какой использовать. +2. HTTP status codes (2xx, 3xx, 4xx, 5xx) — что означают. +3. Что такое CORS и зачем он нужен **(advanced)**. + +**Почему:** + +- **7 часов программы Stage 1** (Week 10: Client-Server Communication) не проверялись ни в одном интервью. В Interview #2 есть Fetch API, но это про JavaScript API, а не про HTTP как протокол. +- **Каждый frontend-разработчик работает с HTTP ежедневно.** Понимание разницы между GET и POST, знание что означает 404 vs 500 — это базовая грамотность. +- **CORS помечен как (advanced)**, потому что это сложная тема для новичков. Но для сильного студента вопрос «почему браузер блокирует запрос к другому домену?» — хорошая проверка понимания. +- **Секция минимальна (3 пункта, ~5 мин).** Это не глубокое погружение в HTTP/2 или WebSockets — только базовые концепции, которые студент использует каждый день. + +--- + +### Расширение Clean Code — было 1 пункт, стало 3 + +**Было:** Одна строчка «KISS, DRY, YAGNI — understanding and application.» + +**Стало:** Три пункта: + +1. KISS, DRY, YAGNI — понимание и примеры из собственного кода. +2. Осмысленные имена: переменные, функции, классы. +3. Почему важны маленькие функции с одной ответственностью. + +**Почему:** Одна строчка превращала секцию в «перечислите аббревиатуры». Студент говорит «KISS — keep it simple, DRY — don't repeat yourself» и всё. За 2 минуты невозможно оценить, понимает ли студент принципы на практике. Три пункта позволяют ментору спросить: «Покажите пример DRY из вашего проекта» или «Почему функция на 50 строк — это проблема?» Это проверяет применение, а не запоминание. + +**10 часов программы** (Week 6) заслуживают более чем одну строчку в интервью. + +--- + +## Coding-задачи: изменения + +### Удалённые задачи + +| Задача | Почему удалена | +| ------------------------------------ | ---------------------------------------------------------------------------------------- | +| String Repeater | **Тривиальна.** Одна строка с `.repeat()` или простой цикл. | +| `String.prototype.padStart` Polyfill | **Тривиальна.** Простой while-цикл с конкатенацией строки. | +| Custom `setTimeout` (Date + while) | **Антипаттерн.** Busy-waiting с блокировкой event loop. Учит плохой практике. | +| Currying Logger | **Дубликат с Interview #2** (curried addition). Достаточно одной задачи на каррирование. | +| Arguments Reverser | **Нишевая.** Разворот аргументов — трюк, а не практический навык. | +| Rest Parameters Sum | **Тривиальна.** `(...args) => args.reduce((a,b) => a+b, 0)` — одна строка. | +| Array Chunker | **Тривиальна.** Простой цикл с slice, не проверяет Stage 1 концепции. | + +### Сохранённые задачи с градацией сложности — НОВОЕ + +**Не было** в предыдущей версии: все 14 задач были перечислены без какой-либо градации. + +**Что добавлено:** Каждая задача получила метку сложности (Easy / Medium / Hard) и оценку времени (~5 / ~10 / ~15 мин). + +**Почему:** Ментор не знал, какую задачу дать слабому студенту, а какую — сильному. Custom Array.filter — это 5 минут и простой цикл. Memoization — это 15 минут и замыкания + хеширование + edge cases. Без меток ментор мог дать Memoization слабому студенту и потратить 20 минут впустую, или дать Array.filter сильному и не узнать его реальный уровень. + +| Задача | Сложность | Время | Почему оставлена | +| --------------------- | --------- | ------- | -------------------------------------------------------------------- | +| Custom Array.filter | Easy | ~5 мин | Проверяет callbacks + массивы. Хороший warm-up. | +| Array.reduce polyfill | Medium | ~10 мин | Проверяет аккумулятор, callbacks, edge cases. | +| Array.flat polyfill | Hard | ~15 мин | Проверяет рекурсию + работу с массивами. | +| Private Counter | Easy | ~5 мин | Проверяет замыкания — ключевую тему Stage 1. | +| Memoization | Hard | ~15 мин | Проверяет замыкания + объекты + хеширование. | +| Object.freeze Deep | Medium | ~10 мин | Проверяет рекурсию + ссылочные типы. | +| DOM Element Selector | Easy | ~5 мин | Проверяет DOM API + callbacks. Единственная задача на браузерный JS. | + +**Рекомендация ментору:** Easy + Medium = ~15 мин. Easy + Hard = ~20 мин. Не давайте две Hard задачи — это 30 минут только на coding. + +--- + +## Согласованность с Interview #2 + +После ревизии обоих интервью: + +| Тема | Interview #1 | Interview #2 | +| ---------------------------------- | -------------- | -------------------- | +| Variables, scope, hoisting | ✅ | — | +| Closures | ✅ | — | +| `this`, call/apply/bind | ✅ | — | +| OOP, Classes, Prototypes | ✅ (добавлено) | — | +| DOM & Events | ✅ | — | +| Web Storage | ✅ (расширено) | — | +| Objects & Arrays (ES6) | ✅ | — | +| HTTP Basics | ✅ (добавлено) | Fetch API (практика) | +| Clean Code (KISS/DRY/YAGNI) | ✅ (расширено) | — | +| TypeScript | — | ✅ | +| Async / Event Loop / Promises | — | ✅ | +| Functional Programming | — | ✅ | +| Design Patterns + SOLID | — | ✅ | +| Browser Internals (reflow/repaint) | — | ✅ | +| Error Handling (async) | — | ✅ | + +**Нет пересечений. Нет дыр.** HTTP Basics в Interview #1 покрывает теорию (методы, коды, CORS), а Fetch API в Interview #2 покрывает практику — это дополнение, не дублирование. + +--- + +## Итоговая сводка изменений + +| Категория | Было | Стало | Изменение | +| -------------------------- | ------------- | ------------------------------ | ----------------------------------------- | +| Теоретические секции | 17 | 10 | -7 (объединение + удаление + HTTP Basics) | +| Coding-задачи | 14 | 7 | -7 задач | +| Markdown-баги | 1 | 0 | Исправлен | +| OOP/Classes/Prototypes | Отсутствовало | Добавлено | Закрыта дыра между интервью | +| HTTP Basics | Отсутствовало | Добавлено | Закрыта дыра (7ч программы) | +| Дубликаты с Interview #2 | 3+ | 0 | Все устранены | +| Маркеры приоритета | Нет | core / (advanced) / (optional) | Ментор адаптирует к уровню студента | +| Рекомендованный flow | Нет | 4 фазы с таймингом | Разогрев → Теория → Coding → Feedback | +| Градация задач | Нет | Easy / Medium / Hard | Ментор выбирает задачу под уровень | +| Инструкции для интервьюера | Нет | Добавлены | "Выберите 5-7 секций, 1-2 задачи" | +| Контекст программы | Нет | Добавлен | Часы по каждой теме | +| Web Storage | 1 пункт | 3 пункта | Из формальности в содержательную секцию | +| Clean Code | 1 пункт | 3 пункта | Проверяет применение, не запоминание | +| Оценочное время | ~135 мин | ~68-83 мин | -40-50% | diff --git a/tasks/interview-basic-coreJS-legacy.md b/tasks/interview-basic-coreJS-legacy.md new file mode 100644 index 000000000..045ebb688 --- /dev/null +++ b/tasks/interview-basic-coreJS-legacy.md @@ -0,0 +1,167 @@ +# CoreJS Interview #1 (Legacy Version) + +> **This is the previous version of the interview, preserved for reference.** +> For the current version, see [interview-basic-coreJS.md](./interview-basic-coreJS.md). +> For rationale behind the changes, see [interview-basic-coreJS-changelog.md](./interview-basic-coreJS-changelog.md). + +The CoreJS Interview #1 is a crucial step in the Rolling Scopes School curriculum, designed to evaluate students' understanding of JavaScript and related technologies. Successfully passing this interview is a prerequisite for obtaining the RS School certificate. + +## Key Information + +- **Mandatory Requirement**: Passing this interview is essential for certification. +- **Mentor Restrictions**: Students cannot be interviewed by their current mentors. +- **Open to All Students**: Even those without a mentor can register for the interview. +- **Student's Responsibility**: Students must initiate contact with the interviewer, using details available on the RS APP. + - **Important Note**: Interviewers might have other commitments (vacations, business trips, heavy workloads). It's advised to contact them early. +- **Interview Format**: Can be conducted online or face-to-face, depending on the mentor's preference. +- **Duration**: Ideally between 45 to 90 minutes. + +## Interview Process + +During the interview, the mentor will: + +- Ask various questions. +- Listen to the student's answers. +- Provide corrections, explanations, or the correct answers when necessary. + +Post-interview, the mentor is required to fill in a feedback form available under RS APP > Interviews. + +## Sample Questions + +### JavaScript Topics + +#### Advanced Expressions + +- Understanding `Object.is` (optional). +- Differences between `let`, `var`, and `const`. +- Exploring the Temporal Dead Zone. +- Concepts of Hoisting. +- The role of polyfills. + +#### Functions + +- Differences and uses of arrow functions, function expressions, and function declarations. + +#### Functional Scope + +- Global scope vs. functional scope. +- Variable visibility areas. +- Working with nested scopes. + +#### Functions Parameters / Arguments + +- Defining function parameters. +- Differences in parameters passing by value and by reference. +- Handling a dynamic amount of function parameters. + +#### Closures Advanced + +- Understanding context and lexical environments. +- Differences between scope and context. +- The mechanism of lexical environment traversal. +- Connection between function and its lexical environment. + +- #### Advanced Functions + - `this` in functions + - Reference Type & losing `this` + - Understand difference between function and method + - Understand how `this` works, realize `this` possible issues + - Manage `this` + - Be able to replace `this` value + - Be able to use `call` and `apply` Function built-in methods + - Know how to bind `this` scope to function + - Binding, binding one function twice + +#### ECMAScript Intermediate + +- Function default parameters. +- Using spread operator for function arguments. +- Comparing `arguments` and `rest parameters`. +- Array concatenation with spread operator. +- Destructuring assignments for variables and function arguments. +- `for..of` loop (optional). + +#### Objects Built-in Methods + +- Utilizing `Object.keys` and `Object.values`. +- Working with static Object methods. +- Property flags and descriptors. +- Creating iterable objects and using `Symbol.iterator` (optional). + +#### ECMAScript Data Types & Expressions + +- Working with Object computed properties. +- Iterating through Object keys. + +#### Arrays Built-in Methods + +- Copying and modifying arrays. +- Flattening nested arrays. + +#### Arrays Iterating, Sorting, Filtering + +- Sorting and custom sorting arrays. +- Filtering array elements. + +### JavaScript in Browser + +#### Global Object Window + +- Understanding the Document Object Model (DOM). + +#### Events Basics + +- Types of DOM Events. +- Working with Mouse and Keyboard Events. +- Handling Form and Input Events. +- Event Listeners. +- Event Phases and their differences. +- Custom events (optional). + +#### Events Propagation / Preventing + +- Event propagation cycle. +- Stopping event propagation. +- Preventing default browser behavior. +- Event delegation and its pros/cons. + +#### Timers + +- Usage of `setTimeout` / `setInterval`. +- Clearing timers with `clearTimeout` / `clearInterval`. + +#### Web Storage API & Cookies + +- Differences between LocalStorage, SessionStorage, and Cookies. + +#### Date & Time (optional) + +- Working with the Date object. +- Timezones and Internationalization in JavaScript (Intl). + +### Design Patterns + +#### Intermediate Knowledge + +- Understanding and applying KISS, DRY, and YAGNI principles. + +### Coding tasks + +### Coding Tasks Examples + +- **`Array.flat` Polyfill**: Implement a polyfill for the `Array.flat` method. This method should flatten an array up to the specified depth, handling cases where the depth is not provided (default to 1) or when it's an infinite depth. +- **`Array.reduce` Polyfill**: Write a polyfill for the `Array.reduce` method. Ensure your implementation handles all the functionalities of the native `reduce` method, including the accumulator and current value parameters, as well as the optional initial value. +- **String Repeater**: Create a method that extends the String prototype to repeat a given string a specified number of times. For example, calling `'hello world'.repeating(3)` should return `'hello world hello world hello world'`. The method should handle edge cases like non-integer repeat times and negative numbers. +- **`String.prototype.padStart` Polyfill**: Write a polyfill for the `String.prototype.padStart` method. It should pad the current string from the start with another string (multiple times if necessary) until the resulting string reaches the given length. +- **Custom `setTimeout` Implementation**: Implement a custom version of `setTimeout` using only `Date` and a `while` loop, without using the native `setTimeout` function. +- **Memoization Function**: Create a function that implements memoization to cache and return the results of expensive function calls. +- **Currying Logger**: Develop a `curryLogger` function that takes a logging function and returns a curried version of this function. +- **Arguments Reverser**: Implement a function that reverses the order of arguments it receives, returning a new function with reversed arguments. +- **Private Counter Closure**: Craft a function that uses closures to create a private counter, which can only be modified through specific methods. +- **Rest Parameters Sum**: Write a function that uses rest parameters to calculate and return the sum of an indefinite number of arguments. +- **Object Freeze Deep**: Create a function that deeply freezes an object, ensuring all nested objects are also frozen. +- **Array Chunker**: Develop a function that divides an array into chunks of a specified size and returns them. +- **Custom Array Filter**: Implement your own version of the array filter function without using the built-in `Array.prototype.filter` method. +- **DOM Element Selector**: Write a function for selecting DOM elements with a specific data attribute and applying a given callback function to them. + +The CoreJS Interview #1 offers a comprehensive platform for students to showcase their JavaScript skills, ensuring they are well-prepared for real-world challenges in software development. diff --git a/tasks/interview-basic-coreJS.md b/tasks/interview-basic-coreJS.md index 255166276..c6d253571 100644 --- a/tasks/interview-basic-coreJS.md +++ b/tasks/interview-basic-coreJS.md @@ -1,163 +1,154 @@ -# CoreJS Interview #1 Overview +# CoreJS Interview #1 -The CoreJS Interview #1 is a crucial step in the Rolling Scopes School curriculum, designed to evaluate students' understanding of JavaScript and related technologies. Successfully passing this interview is a prerequisite for obtaining the RS School certificate. +> **Important**: Passing the CoreJS Interview #1 is a prerequisite for receiving the RS School certificate. +> For rationale behind topic selection, see [interview-basic-coreJS-changelog.md](./interview-basic-coreJS-changelog.md). +> For the previous version, see [interview-basic-coreJS-legacy.md](./interview-basic-coreJS-legacy.md). -## Key Information - -- **Mandatory Requirement**: Passing this interview is essential for certification. - **Mentor Restrictions**: Students cannot be interviewed by their current mentors. - **Open to All Students**: Even those without a mentor can register for the interview. -- **Student's Responsibility**: Students must initiate contact with the interviewer, using details available on the RS APP. - - **Important Note**: Interviewers might have other commitments (vacations, business trips, heavy workloads). It's advised to contact them early. +- **Student's Responsibility**: Students must initiate contact with the interviewer through the RS APP. _**Note:** Interviewers might be unavailable due to vacations, business trips, or other commitments, so early contact is recommended._ - **Interview Format**: Can be conducted online or face-to-face, depending on the mentor's preference. - **Duration**: Ideally between 45 to 90 minutes. -## Interview Process - During the interview, the mentor will: - Ask various questions. - Listen to the student's answers. - Provide corrections, explanations, or the correct answers when necessary. -Post-interview, the mentor is required to fill in a feedback form available under RS APP > Interviews. +**Post-Interview**: Mentors are required to complete a feedback form via the RS APP > Interviews section. + +> **Note for interviewers:** This document lists all possible topics. You are **not** expected to cover every topic — select the areas most relevant to the student's level. Items marked **(advanced)** can be skipped for weaker students or used to challenge stronger ones. -## Sample Questions +### Recommended Interview Flow -### JavaScript Topics +| Phase | Time | What to do | +| ------- | ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | +| Warm-up | ~3 min | Ask the student about their recent project — what they built, what was challenging. This reduces nervousness and gives you context for follow-up questions. | +| Theory | ~45-55 min | Pick 5-7 sections based on the student's level. Start with simpler topics (Variables, Functions) and progress to harder ones (OOP, `this`). | +| Coding | ~15-20 min | Pick 1-2 tasks. Give an easy task to a struggling student; give a hard one to a strong student. | +| Wrap-up | ~5 min | Share feedback, highlight strengths, suggest areas for improvement. | -#### Advanced Expressions +## Interview Topics and Question Examples + +### Variables, Types & Expressions + +> _Stage 1 Week 2: JS Basics (4 hours) + ES6+ (3 hours)._ -- Understanding `Object.is` (optional). - Differences between `let`, `var`, and `const`. -- Exploring the Temporal Dead Zone. -- Concepts of Hoisting. -- The role of polyfills. +- Temporal Dead Zone. +- Hoisting: variables and functions. +- Spread operator and destructuring (arrays, objects, function parameters). +- `for..of` loop **(optional)**. -#### Functions +### Functions & Scope -- Differences and uses of arrow functions, function expressions, and function declarations. +> _Stage 1 Week 2: Functions module (4 hours)._ -#### Functional Scope +- Arrow functions vs function expressions vs function declarations. +- Global scope vs functional scope vs block scope. +- Nested scopes and variable visibility. +- Parameters: passing by value vs by reference, rest parameters. -- Global scope vs. functional scope. -- Variable visibility areas. -- Working with nested scopes. +### Closures -#### Functions Parameters / Arguments +> _Stage 1 Week 2: Functions module (closures section)._ -- Defining function parameters. -- Differences in parameters passing by value and by reference. -- Handling a dynamic amount of function parameters. +- Lexical environment and its connection to functions. +- Scope vs context. +- Practical use cases for closures. -#### Closures Advanced +### `this` & Function Context -- Understanding context and lexical environments. -- Differences between scope and context. -- The mechanism of lexical environment traversal. -- Connection between function and its lexical environment. +> _Stage 1 Week 2: Functions module (this, call/apply/bind section)._ -- #### Advanced Functions - - `this` in functions - - Reference Type & losing `this` - - Understand difference between function and method - - Understand how `this` works, realize `this` possible issues - - Manage `this` - - Be able to replace `this` value - - Be able to use `call` and `apply` Function built-in methods - - Know how to bind `this` scope to function - - Binding, binding one function twice +- How `this` works in different contexts (function, method, arrow function). +- Losing `this` — common pitfalls. +- `call`, `apply`, `bind` — differences and usage. +- Binding a function twice **(advanced)**. -#### ECMAScript Intermediate +### OOP, Classes & Prototypes -- Function default parameters. -- Using spread operator for function arguments. -- Comparing `arguments` and `rest parameters`. -- Array concatenation with spread operator. -- Destructuring assignments for variables and function arguments. -- `for..of` loop (optional). +> _Stage 1 Week 11: OOP Basics (6 hours) + Classes & Prototypes (6 hours)._ -#### Objects Built-in Methods +- `new` keyword: what happens when a constructor is called. +- Class syntax: declaration, `constructor`, `super()`, `extends`. +- Differences between `class` and constructor functions. +- Public, private, and static members. +- Prototypal inheritance: `__proto__`, `prototype`, prototype chain. +- `Object.create` and explicit prototype setup **(advanced)**. -- Utilizing `Object.keys` and `Object.values`. -- Working with static Object methods. -- Property flags and descriptors. -- Creating iterable objects and using `Symbol.iterator` (optional). +### Objects & Arrays -#### ECMAScript Data Types & Expressions +> _Stage 1 Week 2: JS Basics + ES6+._ -- Working with Object computed properties. -- Iterating through Object keys. +- `Object.keys`, `Object.values`, `Object.entries`. +- Property flags and descriptors **(optional)**. +- Array methods: copying, flattening, sorting, filtering. +- `Map` vs plain Object: when to use which. `Set` for unique values **(advanced)**. -#### Arrays Built-in Methods +### DOM & Events -- Copying and modifying arrays. -- Flattening nested arrays. +> _Stage 1 Week 4: DOM API (2 hours) + Events (2 hours)._ -#### Arrays Iterating, Sorting, Filtering +- DOM tree navigation and element selection. +- Creating, modifying, and removing elements. +- Event listeners: adding, removing. +- Event propagation: bubbling, capturing. +- Event delegation and its pros/cons. +- Preventing default browser behavior. -- Sorting and custom sorting arrays. -- Filtering array elements. +### Web Storage -### JavaScript in Browser +> _Stage 1 Week 4+: used in projects._ -#### Global Object Window +- Differences between LocalStorage, SessionStorage, and Cookies. +- Storage limits and data format (string serialization). +- When to use which: session data vs persistent data vs server-sent data. -- Understanding the Document Object Model (DOM). +### HTTP Basics -#### Events Basics +> _Stage 1 Week 10: Client-Server Communication (7 hours)._ -- Types of DOM Events. -- Working with Mouse and Keyboard Events. -- Handling Form and Input Events. -- Event Listeners. -- Event Phases and their differences. -- Custom events (optional). +- HTTP methods: GET, POST, PUT, DELETE — when to use which. +- HTTP status codes: 2xx, 3xx, 4xx, 5xx — what they mean. +- What is CORS and why it exists **(advanced)**. -#### Events Propagation / Preventing +### Clean Code Principles -- Event propagation cycle. -- Stopping event propagation. -- Preventing default browser behavior. -- Event delegation and its pros/cons. +> _Stage 1 Week 6: Clean Code (10 hours)._ -#### Timers +- KISS, DRY, YAGNI — understanding and examples from own code. +- Meaningful naming: variables, functions, classes. +- Why small, single-purpose functions matter. -- Usage of `setTimeout` / `setInterval`. -- Clearing timers with `clearTimeout` / `clearInterval`. +### Coding Task Examples -#### Web Storage API & Cookies +> **For interviewers:** Pick **1-2 tasks** from this pool. Difficulty and estimated time are indicated for each task. Use easy tasks as a warm-up or for struggling students; use hard tasks to challenge strong students. -- Differences between LocalStorage, SessionStorage, and Cookies. +#### **Polyfills** -#### Date & Time (optional) +1. **Custom Array.filter** — Easy (~5 min) + - Implement your own version of `Array.prototype.filter`. -- Working with the Date object. -- Timezones and Internationalization in JavaScript (Intl). +2. **Array.reduce Polyfill** — Medium (~10 min) + - Implement a polyfill for `Array.reduce`, including the optional initial value. -### Design Patterns +3. **Array.flat Polyfill** — Hard (~15 min) + - Implement a polyfill for `Array.flat`. Handle default depth of 1 and infinite depth. -#### Intermediate Knowledge +#### **Closures & Scope** -- Understanding and applying KISS, DRY, and YAGNI principles. +4. **Private Counter** — Easy (~5 min) + - Create a function using closures that returns an object with `increment()`, `decrement()`, and `getValue()` methods. -### Coding tasks +5. **Memoization Function** — Hard (~15 min) + - Implement a function that caches results of expensive function calls. -### Coding Tasks Examples +#### **Objects & Recursion** -- **`Array.flat` Polyfill**: Implement a polyfill for the `Array.flat` method. This method should flatten an array up to the specified depth, handling cases where the depth is not provided (default to 1) or when it's an infinite depth. -- **`Array.reduce` Polyfill**: Write a polyfill for the `Array.reduce` method. Ensure your implementation handles all the functionalities of the native `reduce` method, including the accumulator and current value parameters, as well as the optional initial value. -- **String Repeater**: Create a method that extends the String prototype to repeat a given string a specified number of times. For example, calling `'hello world'.repeating(3)` should return `'hello world hello world hello world'`. The method should handle edge cases like non-integer repeat times and negative numbers. -- **`String.prototype.padStart` Polyfill**: Write a polyfill for the `String.prototype.padStart` method. It should pad the current string from the start with another string (multiple times if necessary) until the resulting string reaches the given length. -- **Custom `setTimeout` Implementation**: Implement a custom version of `setTimeout` using only `Date` and a `while` loop, without using the native `setTimeout` function. -- **Memoization Function**: Create a function that implements memoization to cache and return the results of expensive function calls. -- **Currying Logger**: Develop a `curryLogger` function that takes a logging function and returns a curried version of this function. -- **Arguments Reverser**: Implement a function that reverses the order of arguments it receives, returning a new function with reversed arguments. -- **Private Counter Closure**: Craft a function that uses closures to create a private counter, which can only be modified through specific methods. -- **Rest Parameters Sum**: Write a function that uses rest parameters to calculate and return the sum of an indefinite number of arguments. -- **Object Freeze Deep**: Create a function that deeply freezes an object, ensuring all nested objects are also frozen. -- **Array Chunker**: Develop a function that divides an array into chunks of a specified size and returns them. -- **Custom Array Filter**: Implement your own version of the array filter function without using the built-in `Array.prototype.filter` method. -- **DOM Element Selector**: Write a function for selecting DOM elements with a specific data attribute and applying a given callback function to them. +6. **Object.freeze Deep** — Medium (~10 min) + - Create a function that deeply freezes an object, including all nested objects. -The CoreJS Interview #1 offers a comprehensive platform for students to showcase their JavaScript skills, ensuring they are well-prepared for real-world challenges in software development. +7. **DOM Element Selector** — Easy (~5 min) + - Write a function that selects DOM elements by a data attribute and applies a callback to each.