❓ Какие есть пример микрозадач ?
Спросят с вероятностью 7%

Микрозадачи — это задачи, которые планируются для выполнения после завершения текущего выполнения скрипта, но до того, как браузер продолжит другие задачи, такие как рендеринг или обработка событий. Они имеют более высокий приоритет по сравнению с макрозадачами и выполняются немедленно после текущего стека вызовов, но перед любыми другими событиями или рендерингом.

Примеры включают обработку промисов и выполнение функций, отложенных с помощью queueMicrotask.

С промисами

Используют механизм таких задач для своих колбэков then, catch, и finally. Когда промис переходит в состояние выполнено (fulfilled) или отклонено (rejected), соответствующие колбэки планируются как микрозадачи. Это означает, что они будут выполнены сразу после текущего стека вызовов, но до того, как движок возьмется за выполнение следующей макрозадачи, например, обработку событий или таймеров.

console.log('Начало');

Promise.resolve().then(() => {
    console.log('Обработан промис');
});

console.log('Конец');

Вывод будет следующим:

Начало
Конец
Обработан промис

Сначала выполняется синхронный код (Начало и Конец), и только после его завершения, но до того как браузер перейдет к другим задачам, выполняются микрозадачи, связанные с промисами (Обработан промис).

С queueMicrotask

Эта функция позволяет явно добавить микрозадачу в очередь микрозадач. Это может быть полезно для разделения вычислений на более мелкие асинхронные операции, не блокируя поток выполнения и интерфейс.

console.log('Перед queueMicrotask');

queueMicrotask(() => {
    console.log('Выполнено в микрозадаче');
});

console.log('После queueMicrotask');

Вывод будет аналогичным:

Перед queueMicrotask
После queueMicrotask
Выполнено в микрозадаче

Сначала выполняется основной поток кода, затем микрозадача, добавленная через queueMicrotask.

Микрозадачи обеспечивают способ эффективного управления асинхронными операциями, позволяя избежать блокирования потока выполнения и улучшить отзывчивость приложений.

➡ Примеры ответов
➡ Список всех вопросов на Frontend Developer

🧩 Идущий | 🔐 Собесы | 🔐 Тестовые

Что такое контекст в функции ?
Спросят с вероятностью 13%

Контекст в функции определяет, как ссылка this будет доступна внутри этой функции. Он относится к объекту, в контексте которого выполняется текущий код, и может изменяться в зависимости от того, как и где вызывается функция.

Как работает this в разных ситуациях:

1️⃣ В глобальном контексте: Вне любой функции он ссылается на глобальный объект. В браузере это будет window, а в Node.js — global.

2️⃣ Внутри функции:
- При обычном вызове функции он также ссылается на глобальный объект (в строгом режиме this будет undefined, что предотвращает случайное изменение глобального объекта).
- В методе объекта он ссылается на объект, для которого вызывается метод.

3️⃣ При использовании конструктора (с new): Будет ссылаться на вновь созданный объект.

4️⃣ При использовании call(), apply(), bind(): Эти методы позволяют явно задать контекст для этой в функции.

Примеры:

Глобальный контекст

console.log(this === window); // true в браузере

Функция внутри объекта

const person = {
  name: 'Иван',
  sayName: function() {
    console.log(this.name);
  }
};

person.sayName(); // Вывод: Иван

В этом примере this внутри sayName ссылается на объект person.

Изменение контекста с bind()

const person = {
  name: 'Иван',
};

function sayName() {
  console.log(this.name);
}

const sayNameForPerson = sayName.bind(person);
sayNameForPerson(); // Вывод: Иван

Здесь мы явно задаем контекст для this с помощью bind(), чтобы функция sayName могла ссылаться на person.

Понимание его важно для эффективной работы с функциями и методами объектов, особенно когда требуется управление контекстом this. Оно позволяет более гибко использовать функции и методы в разных объектах, а также контролировать поведение программы более предсказуемым образом.

Контекст функции определяет, к чему относится this внутри этой функции. Он может изменяться в зависимости от того, как и где вызывается функция, что позволяет более гибко управлять поведением программы. Для явного указания контекста используются методы call(), apply(), и bind().

➡️ Примеры ответов
➡️ Список всех вопросов на Frontend Developer

🧩 Идущий | 🔐 Собесы | 🔐 Тестовые

❓ Какие есть методы life cycle ?
Спросят с вероятностью 7%

Жизненный цикл компонента описывает серию событий, которые происходят с момента его создания до момента его удаления из DOM. Эти методы предоставляют хуки, которые позволяют выполнять код в определенные моменты жизни компонента. Важно отметить, что методы жизненного цикла доступны только в классовых компонентах. В функциональных компонентах для работы с ним используются хуки, например, useEffect.

Монтирование

Вызываются в следующем порядке при создании компонента и его добавлении в DOM:

1️⃣ constructor(props)
- Конструктор компонента, где можно инициализировать состояние и привязывать методы.

2️⃣ static getDerivedStateFromProps(props, state)
- Вызывается непосредственно перед рендерингом как при первом монтировании, так и при последующих обновлениях. Используется для обновления состояния в ответ на изменение пропсов.

3️⃣ render()
- Единственный обязательный метод в классовом компоненте. Описывает, что отображается на экране.

4️⃣ componentDidMount()
- Вызывается сразу после монтирования (вставки компонента в DOM). Идеальное место для инициализации запросов к удаленным данным.

Обновление

Вызываются при обновлении компонента из-за изменений в пропсах или состоянии:

1️⃣ static getDerivedStateFromProps(props, state)
- Так же, как и при монтировании.

2️⃣ shouldComponentUpdate(nextProps, nextState)
- Позволяет оптимизировать приложение, предотвращая ненужные обновления.

3️⃣ render()
- Вызывается для повторного рендеринга в ответ на изменения.

4️⃣ getSnapshotBeforeUpdate(prevProps, prevState)
- Вызывается перед тем, как измененный компонент будет отрисован в DOM. Используется для сохранения информации о DOM (например, позиции скролла).

5️⃣ componentDidUpdate(prevProps, prevState, snapshot)
- Вызывается сразу после обновления. Не вызывается при первом рендере. Используется для выполнения сетевых запросов в ответ на изменения состояния или пропсов.

Размонтирование

1️⃣ componentWillUnmount()
- Вызывается перед удалением компонента из DOM. Используется для выполнения любой необходимой очистки, такой как отмена таймеров, отмена запросов к сети или удаление подписок.

Ошибки

1️⃣ static getDerivedStateFromError(error)
- Используется для отлавливания ошибок во время рендеринга дочерних компонентов.

2️⃣ componentDidCatch(error, info)
- Используется для регистрации ошибок, произошедших во время рендеринга, в методах жизненного цикла или в конструкторах дочерних компонентов.

Эти методы позволяют контролировать поведение компонентов на различных этапах их жизни, оптимизировать производительность и обрабатывать ошибки.

➡ Примеры ответов
➡ Список всех вопросов на Frontend Developer

🧩 Идущий | 🔐 Собесы | 🔐 Тестовые

Какие есть компоненты ?
Спросят с вероятностью 7%

Компоненты являются основными строительными блоками для построения пользовательских интерфейсов. Они позволяют разбивать интерфейс на независимые, переиспользуемые части, которые можно разрабатывать, тестировать и поддерживать отдельно друг от друга. Компоненты в React могут быть как простыми и представлять собой один элемент интерфейса (например, кнопку или поле ввода), так и сложными и включать в себя другие компоненты, формируя иерархию.

Типы:

1️⃣ Функциональные компоненты:
- Самый простой способ определить компонент.
- Это JavaScript-функции, которые принимают пропсы (свойства) в качестве аргумента и возвращают элемент, описывающий, что должно отображаться на экране.
- С появлением хуков, функциональные компоненты получили возможность использовать состояние и другие возможности React, аналогичные классовым компонентам.

      function Welcome(props) {
     return <h1>Привет, {props.name}</h1>;
   }

2️⃣ Классовые компоненты:
- Перед введением хуков классовые компоненты были единственным способом использования состояния и жизненного цикла компонентов .
- Они определяются путем расширения React.Component и требуют метода render(), который возвращает элемент React.

      class Welcome extends React.Component {
     render() {
       return <h1>Привет, {this.props.name}</h1>;
     }
   }

Пропсы и состояние

- Пропсы (Props): Коротко для "свойств", пропсы передаются от родительских компонентов к дочерним. Они неизменяемы в пределах компонента, что означает, что дочерний компонент не может изменять пропсы, полученные от родителя.

- Состояние (State): Состояние позволяет компонентам реагировать на ввод пользователя, серверные запросы и любые другие действия, сохраняя и изменяя данные во времени. В отличие от пропсов, состояние управляется и изменяется внутри самого компонента.

Жизненный цикл компонента

Классовые компоненты имеют несколько "жизненных циклов" — методов, которые автоматически вызываются в разные моменты жизни компонента, такие как монтирование (компонент вставляется в DOM), обновление (компонент реагирует на изменения пропсов или состояния) и размонтирование (компонент удаляется из DOM). Хуки позволяют использовать аналогичные возможности в функциональных компонентах.

Компоненты обеспечивают эффективный способ организации пользовательского интерфейса, делая код более читабельным, легким для тестирования и поддержки. Они позволяют разработчикам строить сложные приложения из простых частей, облегчая разработку и обеспечивая лучший пользовательский опыт.

➡️ Примеры ответов
➡️ Список всех вопросов на Frontend Developer

🧩 Идущий | 🔐 Собесы | 🔐 Тестовые

Что такое семантика ?
Спросят с вероятностью 13%

Семантика в контексте веб-разработки относится к использованию HTML-тегов в соответствии с их предназначением и значением. Это означает выбор подходящих тегов для разметки различных частей контента на веб-странице таким образом, чтобы они отражали его смысл и структуру. Такая разметка помогает не только людям, но и поисковым системам и другим машинным агентам понимать структуру и содержание веб-страницы, что влияет на доступность сайта и его поисковую оптимизацию (SEO).

Примеры в HTML:

- <article>: Для независимого контента, который имеет смысл сам по себе (например, статья в блоге).
- <aside>: Для контента, слабо связанного с основным содержимым страницы (например, боковая панель).
- <details>: Для контента, который можно скрыть или показать по запросу пользователя.
- <figcaption>: Для подписи к изображению в элементе <figure>.
- <figure>: Для самостоятельных элементов, таких как изображения, диаграммы, коды, которые сопровождаются подписью.
- <footer>: Для нижнего колонтитула документа или раздела.
- <header>: Для верхнего колонтитула документа или раздела.
- <main>: Для основного содержимого документа.
- <mark>: Для выделения частей текста.
- <nav>: Для навигационных ссылок.
- <section>: Для разделов содержимого, которые связаны с определенной темой.
- <summary>: Для заголовка элемента <details>.

Значение семантики:

✅ Доступность: Делает веб-контент более доступным для людей с ограниченными возможностями, использующих вспомогательные технологии, такие как экранные читалки, поскольку эти технологии могут интерпретировать структуру и предоставлять контент в более понятной форме.
✅ SEO: Поисковые системы используют ее для лучшего понимания структуры и содержания веб-страницы, что может улучшить индексацию и ранжирование сайта.
✅ Улучшенная поддержка и разработка: Делает код более читаемым и легким для понимания, что облегчает сопровождение и дальнейшую разработку сайта.

Семантика в веб-разметке означает использование элементов HTML в соответствии с их смыслом и назначением. Это способствует созданию более доступного, SEO-оптимизированного и легкого для поддержки веб-контента. Включение семантических элементов в разметку веб-страницы является лучшей практикой.

➡️ Примеры ответов
➡️ Список всех вопросов на Frontend Developer

🧩 Идущий | 🔐 Собесы | 🔐 Тестовые

Что знаешь о примитивных типах данных ?
Спросят с вероятностью 7%

Примитивные типы данных — это данные, которые не являются объектами и не имеют методов. Всего существует семь типов:

1️⃣ String (Строка): Представляет собой последовательность символов, используется для работы с текстом. Пример: "Привет, мир!".

2️⃣ Number (Число): Представляет собой числовое значение. Числа могут быть как целыми, так и с плавающей точкой. Примеры: 42, 3.14. Включает в себя специальные числовые значения, такие как Infinity, -Infinity и NaN (Not-a-Number — результат некорректной математической операции).

3️⃣ BigInt: Представляет целые числа произвольной длины. Был введен для работы с числами, размер которых превышает пределы Number. Пример: 9007199254740991n.

4️⃣ Boolean (Логический тип): Имеет два значения: true (истина) и false (ложь), используется для логических операций.

5️⃣ undefined: Обозначает отсутствие значения. Переменная, которой не было присвоено значение, автоматически получает значение undefined.

6️⃣ null: Также обозначает отсутствие значения. В отличие от undefined, null обычно присваивается переменной явно в качестве индикатора того, что значение отсутствует.

7️⃣ Symbol: Представляет уникальный и неизменяемый идентификатор, часто используется для создания уникальных ключей объектов. Каждый созданный Symbol гарантированно уникален.

Особенности примитивных типов

✅ Неизменяемость: Значения не могут быть изменены. Операции над примитивными значениями возвращают новые значения, но не изменяют исходные.
✅ Сравнение по значению: Сравниваются по значению. Два значения считаются равными, если они имеют одинаковый тип и значение.
✅ Преобразование типов: Автоматически преобразует примитивные типы данных при необходимости (например, при арифметических операциях или конкатенации строк).

Работа с примитивными типами

Хотя они и не имеют методов, позволяет временно оборачивать их в объекты-обертки (например, new String(), new Number(), new Boolean()), чтобы предоставить доступ к различным методам и свойствам, таким как .length для строк или .toFixed() для чисел. Однако это редко используется на практике, поскольку примитивные значения и так автоматически преобразуются в объекты при доступе к их свойствам или методам.

Примитивные типы данных являются основой для создания более сложных структур данных и логики.

➡️ Примеры ответов
➡️ Список всех вопросов на Frontend Developer

🧩 Идущий | 🔐 Собесы | 🔐 Тестовые

Какая бывает работа с тестами ?
Спросят с вероятностью 10%

Работа с тестами — это процесс проверки того, что ваш код работает корректно и делает именно то, что от него ожидается. Оно помогает обнаружить ошибки и недочеты в программе до того, как она будет запущена в производство или передана пользователям. Существует несколько типов тестирования, каждый из которых ориентирован на проверку различных аспектов приложения.

Типы:

1️⃣ Модульное тестирование (Unit Testing): Проверка отдельных модулей или компонентов программы на корректность выполнения их функций. Каждый тест оценивает работу отдельной части кода в изоляции от остальной программы.

2️⃣ Интеграционное тестирование (Integration Testing): Проверка взаимодействия между различными модулями или внешними системами и сервисами. Цель — убедиться, что компоненты системы корректно работают вместе.

3️⃣ Функциональное тестирование (Functional Testing): Проверка того, что функциональные требования, предъявляемые к программе, выполняются. Эти тесты фокусируются на пользовательских сценариях и возможностях программы.

4️⃣ Тестирование производительности (Performance Testing): Оценка скорости, стабильности и масштабируемости приложения под нагрузкой.

5️⃣ Тестирование безопасности (Security Testing): Проверка на наличие уязвимостей, которые могут быть использованы для несанкционированного доступа или повреждения данных.

Инструменты

Для автоматизации процесса тестирования существует множество инструментов и библиотек. Выбор инструмента зависит от языка программирования, среды разработки и конкретных требований проекта. Например:

✅ Mocha, Jest, и Cypress для JavaScript.

Процесс

1️⃣ Планирование: Определение целей тестирования, выбор инструментов и методик.
2️⃣ Написание тестов: Создание тестовых сценариев, которые проверяют различные аспекты работы кода.
3️⃣ Выполнение тестов: Запуск тестов и сбор результатов.
4️⃣ Анализ результатов: Интерпретация результатов тестирования, выявление и исправление ошибок.
5️⃣ Рефакторинг: Улучшение структуры и качества кода без изменения его функциональности на основе результатов тестирования.
6️⃣ Регрессионное тестирование: Повторное тестирование после изменений, чтобы убедиться, что исправления не привели к новым ошибкам.

Преимущества

✅ Улучшение качества кода: Помогают обнаружить и исправить ошибки на ранних этапах разработки.
✅ Документация: Могут служить формой документации, показывая, как предполагается использовать код.
✅ Уверенность в коде: Позволяют разработчикам вносить изменения в код, не боясь случайно нарушить его работу.
✅ Упрощение рефакторинга: Наличие их облегчает рефакторинг кода, поскольку они могут быстро показать, сломалось ли что-то после внесения изменений.

Тестирование — это неотъемлемая часть процесса разработки ПО, позволяющая повысить его качество, надежность и безопасность.

➡️ Примеры ответов
➡️ Список всех вопросов на Frontend Developer

🧩 Идущий | 🔐 Собесы | 🔐 Тестовые

Чем var отличается от const ?
Спросят с вероятностью 23%

Ключевые слова var и const используются для объявления переменных, но они имеют ряд существенных различий, которые важно понимать для правильного использования в коде.

Область видимости (Scope)
- var: Объявления переменных с ее использованием имеют функциональную область видимости (function scope), что означает, что переменная доступна везде в функции, где была объявлена.
- const: Как и let, она имеет блочную область видимости (block scope), ограничивая доступность переменной блоком (например, циклом или условным оператором), в котором была объявлена.

Переназначение и изменение
- var: Переменные, объявленные с помощью нее, могут быть переназначены и изменены. Это означает, что после объявления переменной её можно не только изменить, но и полностью переназначить на другое значение.
- const: Переменные, объявленные с помощью нее, не могут быть переназначены. Однако, если переменная представляет собой объект или массив, её содержимое может быть изменено (например, можно добавить новое свойство в объект или новый элемент в массив). Важно понимать, что const предотвращает переназначение самой переменной, но не защищает содержимое объекта от изменений.

Поднятие (Hoisting)
- var: Переменные, объявленные через нее, поднимаются в начало своей функциональной области видимости перед выполнением кода. Однако до их объявления в коде они будут иметь значение undefined.
- const: Подобно let, ее объявления тоже поднимаются, но доступ к переменной до её объявления в коде приведёт к ошибке ReferenceError. Это явление известно как "временная мертвая зона".

Инициализация
- var: Эти переменные можно объявить без инициализации, и их начальное значение будет undefined.
- const: Эти переменные требуют обязательной инициализации при объявлении. Если попытаться объявить его без инициализации, это приведет к синтаксической ошибке.

Примеры:

var varVariable = 1;
varVariable = 2; // Переназначение возможно

const constVariable = { a: 1 };
constVariable.a = 2; // Изменение содержимого объекта возможно
// constVariable = { b: 3 }; // Переназначение вызовет ошибку

if (true) {
  var varScope = "доступна везде в функции";
  const constScope = "доступна только в этом блоке";
}
console.log(varScope); // Выведет строку
console.log(constScope); // Ошибка: constScope не определена

Использование var, let и const зависит от нужд разработки. var предоставляет функциональную область видимости и большую гибкость за счёт возможности переназначения, но это может привести к ошибкам из-за непреднамеренных изменений или переназначений. const используется для объявления переменных, значение которых не должно изменяться, что помогает предотвратить случайное переназначение и делает код более предсказуемым. Сейчас let и const являются предпочтительными для блочной области видимости и контроля за изменяемостью данных.

➡️ Примеры ответов
➡️ Список всех вопросов на Frontend Developer

🧩 Идущий | 🔐 Собесы | 🔐 Тестовые

Как работает settimeout ?
Спросят с вероятностью 10%

Функция setTimeout используется для выполнения кода или функции спустя заданный интервал времени, однократно. Она является частью Web API в браузерах и глобального объекта global в Node.js, что делает её доступной для использования в любом окружении.

Синтаксис

let timeoutID = setTimeout(function[, delay, arg1, arg2, ...]);
let timeoutID = setTimeout(functionCode[, delay]);

- function: Будет вызвана после задержки.
- functionCode: Строка кода для выполнения (использование этой формы не рекомендуется по соображениям безопасности).
- delay: Задержка в миллисекундах, после которой будет выполнена функция. Если не указать, по умолчанию будет использовано значение 0.
- arg1, arg2, ...: Аргументы, которые будут переданы в функцию при её вызове.

Пример:

function sayHello() {
  console.log('Привет!');
}

// Вызывает функцию sayHello после задержки в 2000 миллисекунд (2 секунды)
setTimeout(sayHello, 2000);

Отмена выполнения setTimeout

Вызов ее возвращает идентификатор таймера, который можно использовать для отмены выполнения с помощью функции clearTimeout.

let timerId = setTimeout(sayHello, 2000);

// Отменяет выполнение
clearTimeout(timerId);

Особенности поведения

- Минимальная задержка: В HTML5 спецификация предусматривает минимальную задержку в 4ms для вложенных таймеров и в некоторых других случаях, что может повлиять на ожидаемое время выполнения.
- Задержка в неактивных вкладках: Браузеры могут изменять поведение таймеров для неактивных вкладок для оптимизации производительности и энергопотребления. Это может привести к значительно большей задержке, чем указано.
- Асинхронность: setTimeout не блокирует выполнение кода, который следует за ним. Он лишь запланирует выполнение функции на будущее, позволяя остальному коду продолжать выполняться без ожидания.

setTimeout широко используется для создания задержек, анимаций, отложенного выполнения кода (например, для дебаунсинга ввода пользователя) и решения других задач, где необходимо управление временем выполнения.

➡️ Примеры ответов
➡️ Список всех вопросов на Frontend Developer

🧩 Идущий | 🔐 Собесы | 🔐 Тестовые

Зачем появились promise ?
Спросят с вероятностью 7%

Промисы (Promises) были введены как решение проблемы "callback hell" (также известного как "pyramid of doom"), когда асинхронный код становится сложным для понимания, поддержки и расширения из-за глубокой вложенности обратных вызовов (callbacks). Они предоставляют более удобный и гибкий способ организации асинхронного кода, делая его более читаемым и легким в управлении.

Основные причины появления промисов:

1️⃣ Улучшение читаемости асинхронного кода: Позволяют писать асинхронный код, который выглядит более последовательным и легко читается, по сравнению с вложенными обратными вызовами.

2️⃣ Упрощение обработки ошибок: Вместо того, чтобы обрабатывать ошибки в каждом обратном вызове, они позволяют использовать единую конструкцию catch для перехвата ошибок в любом месте цепочки промисов.

3️⃣ Синхронизация асинхронных операций: Упрощают выполнение нескольких асинхронных операций параллельно и обработку их результатов с помощью методов Promise.all, Promise.race, Promise.allSettled и Promise.any.

4️⃣ Стандартизация асинхронного кода: Стандартизируют способ работы с асинхронностью, предоставляя универсальный интерфейс для различных асинхронных операций, таких как работа с сетевыми запросами, таймерами и т.д.

Как работают промисы

Может находиться в одном из трех состояний:
- Ожидание (pending): начальное состояние, не выполнено и не отклонено.
- Выполнено (fulfilled): операция завершена успешно.
- Отклонено (rejected): операция завершена с ошибкой.

Когда он переходит из состояния ожидания в состояние выполнено или отклонено, он вызывает соответствующие обработчики, добавленные с помощью методов then, catch и finally. Эти методы возвращают новый промис, позволяя строить цепочки промисов.

Пример:

let promise = new Promise((resolve, reject) => {
  setTimeout(() => resolve("данные получены"), 1000);
});

promise
  .then(result => {
    console.log(result); // "данные получены"
    return result + " обработаны";
  })
  .then(result => {
    console.log(result); // "данные получены обработаны"
  })
  .catch(error => {
    console.error(error);
  })
  .finally(() => {
    console.log("Промис завершил выполнение");
  });

Промисы существенно улучшили способ работы с асинхронностью, предоставив более мощный и гибкий инструмент для организации асинхронного кода по сравнению с традиционными обратными вызовами. Они сделали код более читабельным, упростили обработку ошибок и синхронизацию асинхронных операций.

➡️ Примеры ответов
➡️ Список всех вопросов на Frontend Developer

🧩 Идущий | 🔐 Собесы | 🔐 Тестовые

Какие есть компоненты ?
Спросят с вероятностью 7%

Компоненты являются основными строительными блоками для построения пользовательских интерфейсов. Они позволяют разбивать интерфейс на независимые, переиспользуемые части, которые можно разрабатывать, тестировать и поддерживать отдельно друг от друга. Компоненты в React могут быть как простыми и представлять собой один элемент интерфейса (например, кнопку или поле ввода), так и сложными и включать в себя другие компоненты, формируя иерархию.

Типы:

1️⃣ Функциональные компоненты:
- Самый простой способ определить компонент.
- Это JavaScript-функции, которые принимают пропсы (свойства) в качестве аргумента и возвращают элемент, описывающий, что должно отображаться на экране.
- С появлением хуков, функциональные компоненты получили возможность использовать состояние и другие возможности React, аналогичные классовым компонентам.

      function Welcome(props) {
     return <h1>Привет, {props.name}</h1>;
   }

2️⃣ Классовые компоненты:
- Перед введением хуков классовые компоненты были единственным способом использования состояния и жизненного цикла компонентов .
- Они определяются путем расширения React.Component и требуют метода render(), который возвращает элемент React.

      class Welcome extends React.Component {
     render() {
       return <h1>Привет, {this.props.name}</h1>;
     }
   }

Пропсы и состояние

- Пропсы (Props): Коротко для "свойств", пропсы передаются от родительских компонентов к дочерним. Они неизменяемы в пределах компонента, что означает, что дочерний компонент не может изменять пропсы, полученные от родителя.

- Состояние (State): Состояние позволяет компонентам реагировать на ввод пользователя, серверные запросы и любые другие действия, сохраняя и изменяя данные во времени. В отличие от пропсов, состояние управляется и изменяется внутри самого компонента.

Жизненный цикл компонента

Классовые компоненты имеют несколько "жизненных циклов" — методов, которые автоматически вызываются в разные моменты жизни компонента, такие как монтирование (компонент вставляется в DOM), обновление (компонент реагирует на изменения пропсов или состояния) и размонтирование (компонент удаляется из DOM). Хуки позволяют использовать аналогичные возможности в функциональных компонентах.

Компоненты обеспечивают эффективный способ организации пользовательского интерфейса, делая код более читабельным, легким для тестирования и поддержки. Они позволяют разработчикам строить сложные приложения из простых частей, облегчая разработку и обеспечивая лучший пользовательский опыт.

➡️ Примеры ответов
➡️ Список всех вопросов на Frontend Developer

🧩 Идущий | 🔐 Собесы | 🔐 Тестовые

В чем разница == и === ?
Спросят с вероятностью 20%

Операторы == (равно) и === (строго равно) используются для сравнения значений, но работают по-разному, что важно понимать для написания надёжного и предсказуемого кода.

Оператор == (равно)
Сравнивает значения двух переменных, но перед сравнением производит приведение типов, если переменные относятся к разным типам. Это означает, что если вы сравниваете число с строкой, JavaScript попытается преобразовать строку в число, а затем сравнить эти два значения. Этот процесс может привести к неинтуитивным результатам.

Примеры:

'2' == 2 // true, так как строка '2' преобразуется в число 2 перед сравнением
0 == false // true, так как 0 и false считаются эквивалентными
null == undefined // true, специальное правило языка

Оператор ===(строго равно)
В отличие от ==, он сравнивает и значения, и типы без приведения типов. Если типы различаются, оператор немедленно возвращает false, не пытаясь преобразовать один тип в другой. Это делает сравнение более строгим и предсказуемым.

Примеры:

'2' === 2 // false, так как типы различаются
0 === false // false, разные типы: число и булево значение
null === undefined // false, разные типы

Почему важно знать разницу

Понимание разницы между == и === критически важно, чтобы избежать ошибок, связанных с неожиданным приведением типов. Использование === помогает гарантировать, что сравниваемые значения совпадают по типу и значению, что является более безопасным подходом в большинстве случаев. В целом, рекомендуется использовать === для сравнения значений, чтобы код был более читабельным и предсказуемым.

== сравнивает значения, приводя их к общему типу, что может привести к неожиданным результатам из-за неявного приведения типов. === сравнивает как значения, так и типы без приведения типов, обеспечивая более строгое и предсказуемое сравнение. Использование === рекомендуется для большей надёжности и читабельности кода.

➡️ Примеры ответов
➡️ Список всех вопросов на Frontend Developer

🧩 Идущий | 🔐 Собесы | 🔐 Тестовые

Что делает box-sizing: border-box ?
Спросят с вероятностью 7%

Свойство box-sizing определяет, как будут рассчитываться размеры элемента: включая ли в эти размеры внутренние отступы (padding) и границы (border) или нет. Данное значение изменяет традиционное поведение расчета ширины и высоты элемента.

Как работает

Когда вы устанавливаете для элемента box-sizing: border-box;, ширина и высота элемента начинают включать в себя внутренние отступы и толщину границ. Это означает, что фактический размер элемента (как он отображается на странице) будет соответствовать заданным ширине (width) и высоте (height), независимо от толщины границ и размеров внутренних отступов.

Без border-box

По умолчанию, если не указано значение, используется значение content-box. Это означает, что указанные ширина и высота применяются только к контентной области элемента. Внутренние отступы и границы добавляются к этим размерам, увеличивая общий размер элемента. Например:

.box {
  width: 300px;
  height: 200px;
  padding: 20px;
  border: 5px solid black;
  /* box-sizing: content-box; по умолчанию */
}

Здесь фактический размер элемента будет 350px по ширине (300px контент + 40px отступы + 10px границы) и 250px по высоте.

C border-box

Если вы установите такое значение, размеры элемента будут включать в себя и внутренние отступы, и границы:

.box {
  box-sizing: border-box;
  width: 300px;
  height: 200px;
  padding: 20px;
  border: 5px solid black;
}

В этом случае фактический размер элемента останется 300px по ширине и 200px по высоте, несмотря на наличие внутренних отступов и границ. Это делает расчет размеров более предсказуемым и упрощает верстку, особенно при работе с гибкими и адаптивными макетами.

Зачем использовать

Использование border-box упрощает работу с макетами, так как разработчику не нужно постоянно пересчитывать размеры элементов при изменении внутренних отступов или толщины границ. Это делает код более чистым и понятным, а процесс разработки — более быстрым и эффективным.

➡️ Примеры ответов
➡️ Список всех вопросов на Frontend Developer

🧩 Идущий | 🔐 Собесы | 🔐 Тестовые

Что такое замыкание ?
Спросят с вероятностью 7%

Замыкание — это мощная концепция, которая позволяет функции доступ к переменным из области видимости, в которой она была создана, даже после того, как эта область видимости становится недоступной. Это один из ключевых механизмов языка, и понимание замыканий необходимо для эффективной работы, особенно при работе с асинхронным кодом, обработчиками событий и функциями высшего порядка.

Как они работают

Когда функция объявляется, она замыкает в себе переменные из своей лексической области видимости. Это означает, что функция сохраняет доступ к переменным из области, в которой она была создана, даже если эта область выполнения уже завершила свою работу.

function создатьФункциюПриветствия(имя) {
  var приветствие = 'Привет';
  return function() {
    console.log(приветствие + ', ' + имя);
  };
}

var приветАлиса = создатьФункциюПриветствия('Алиса');
приветАлиса(); // Выводит: "Привет, Алиса"

В этом примере приветАлиса является функцией, замыкающей в себе переменные приветствие и имя из области видимости функции создатьФункциюПриветствия, даже после того, как выполнение функции создатьФункциюПриветствия завершено.

Зачем нужны замыкания

1️⃣ Инкапсуляция данных: Позволяют скрывать переменные внутри функции, делая их недоступными извне, что способствует созданию приватных переменных и методов.

2️⃣ Создание функций с привязанными параметрами: Могут использоваться для создания новых функций на основе существующих, но с заранее заданными или "зафиксированными" аргументами.

3️⃣ Работа с асинхронным кодом: Часто используются в обработчиках событий и колбэках для доступа к переменным из внешней области видимости.

4️⃣ Модульность и управление состоянием: Позволяют создавать модули и фабрики функций, которые могут иметь собственное внутреннее состояние, недоступное напрямую извне.

Важные моменты:

✅ Замыкания могут привести к утечкам памяти, если они неправильно используются, особенно в старых браузерах. Современные движки обладают сборщиками мусора, которые минимизируют эту проблему.
✅ Понимание замыканий необходимо для глубокого освоения, поскольку они используются во многих шаблонах и библиотеках.

Замыкания являются одной из фундаментальных концепций, обеспечивающей гибкость и мощь при работе с функциями и асинхронным кодом.

➡️ Примеры ответов
➡️ Список всех вопросов на Frontend Developer

🧩 Идущий | 🔐 Собесы | 🔐 Тестовые

Какие проблемы решает react ?
Спросят с вероятностью 10%

React — это популярная библиотека для разработки пользовательских интерфейсов. Она предлагает разработчикам эффективный и гибкий способ создавать интерактивные веб-приложения. React решает множество задач и проблем, с которыми разработчики сталкиваются при построении современных веб-приложений:

1️⃣ Создание динамических интерфейсов

Позволяет легко создавать динамические веб-интерфейсы с использованием компонентов. Благодаря декларативному подходу и использованию JSX (синтаксис, похожий на HTML внутри JavaScript), разработка становится более интуитивно понятной и менее подверженной ошибкам.

2️⃣ Управление состоянием компонентов

Предоставляет механизмы для управления состоянием (state) внутри компонентов, что позволяет разработчикам легко отслеживать и управлять изменениями данных в приложении. Это упрощает создание интерактивных интерфейсов, таких как формы, фильтры, навигация и т.д.

3️⃣ Оптимизация производительности

Использует виртуальный DOM (Virtual DOM), что позволяет оптимизировать обновления в реальном DOM. Это снижает затраты производительности при обновлении пользовательского интерфейса, особенно при работе с большими объемами данных и сложными интерфейсами.

4️⃣ Компонентный подход

Поощряет использование компонентного подхода к разработке, что позволяет разбивать интерфейс на мелкие, повторно используемые части. Это улучшает организацию кода, облегчает его поддержку и тестирование.

5️⃣ Универсальность и изоморфизм

Код может выполняться как на клиенте, так и на сервере, что позволяет создавать изоморфные (универсальные) приложения. Это улучшает SEO, скорость загрузки и обеспечивает лучший пользовательский опыт.

6️⃣ Мощный экосистема и сообщество

Обладает большим и активным сообществом разработчиков, а также мощной экосистемой инструментов и библиотек, таких как Redux для управления состоянием приложения, React Router для навигации, Next.js для серверного рендеринга и многих других.

7️⃣ Гибкость и интеграция

Может быть интегрирован в существующие приложения постепенно, что делает его удобным выбором для поэтапной модернизации проектов. Также он хорошо сочетается с другими библиотеками и фреймворками.

React предлагает разработчикам удобные инструменты для создания эффективных, масштабируемых и поддерживаемых веб-приложений, решая множество проблем современной веб-разработки, начиная от управления состоянием и заканчивая производительностью интерфейсов.

➡️ Примеры ответов
➡️ Список всех вопросов на Frontend Developer

🧩 Идущий | 🔐 Собесы | 🔐 Тестовые

Какие существуют уязвимости ?
Спросят с вероятностью 7%

Существует множество различных уязвимостей, которые могут быть использованы злоумышленниками для нанесения вреда пользователям или системам.

1️⃣ SQL-инъекции (SQL Injection): Происходят, когда злоумышленник может внедрить или "инъецировать" вредоносный SQL-код в запрос, который изменяет стандартное выполнение запроса к базе данных. Это может привести к несанкционированному доступу к данным, их изменению или удалению.

2️⃣ Cross-Site Scripting (XSS): Позволяет злоумышленникам внедрять клиентский скрипт в веб-страницы, просматриваемые другими пользователями. Это может привести к краже cookie-файлов, сессий, персональных данных и других атак на клиентскую сторону.

3️⃣ Cross-Site Request Forgery (CSRF): Заставляет пользователя выполнить нежелательные действия на веб-сайте, на котором он в настоящее время аутентифицирован, например, отправить запрос на смену пароля или выполнить платеж от имени пользователя.

4️⃣ Разглашение информации: Происходит, когда веб-приложение раскрывает чувствительную информацию, такую как технические детали своей работы, структуры баз данных или креденциалы, что может быть использовано злоумышленниками.

5️⃣ Небезопасная десериализация: Это уязвимость, при которой недостаточно проверенные или небезопасные данные могут быть десериализованы и выполнены как код, что может привести к удаленному выполнению кода, внедрению вредоносных скриптов или атакам отказа в обслуживании.

6️⃣ Использование компонентов с известными уязвимостями: Включает использование сторонних библиотек и зависимостей, которые содержат известные уязвимости. Это может подвергнуть приложение риску атак.

7️⃣ Недостатки в управлении сессиями: Уязвимости, связанные с управлением сессиями и аутентификацией, могут позволить злоумышленникам перехватывать или подделывать сессии пользователей, получать несанкционированный доступ к учетным записям.

8️⃣ Security Misconfiguration (Неправильная настройка безопасности): Это самый широкий класс уязвимостей, который включает в себя неправильно настроенные разрешения, стандартные учетные записи с известными паролями, открытые облачные хранилища и другие ошибки в конфигурации.

9️⃣ Недостатки в контроле доступа: Происходят, когда пользователи могут получить доступ к функциям или данным, к которым у них не должно быть доступа. Это может включать доступ к данным других пользователей, выполнение функций администратора и т.д.

🔟 Внедрение вредоносного кода (Malware Upload): Уязвимости, позволяющие злоумышленникам загружать и выполнять вредоносный код на сервере или у клиентов.

Для защиты от этих и других уязвимостей нужно следовать лучшим практикам безопасности, регулярно обновлять используемое программное обеспечение, проводить аудиты безопасности и использовать инструменты для сканирования уязвимостей.

➡️ Примеры ответов
➡️ Список всех вопросов на Frontend Developer

🧩 Идущий | 🔐 Собесы | 🔐 Тестовые

Какие способы изоляции стилей существуют ?
Спросят с вероятностью 20%

Изоляция стилей в веб-разработке важна для предотвращения конфликтов CSS и обеспечения того, чтобы стили одного компонента или раздела страницы не влияли на другие. Существует несколько таких подходов:

1️⃣ Использование уникальных имен классов
Это самый простой способ избежать конфликтов. Может быть достигнуто с помощью методологий именования, таких как BEM (Блок, Элемент, Модификатор), которая предлагает чёткую структуру для именования классов.

2️⃣ CSS-модули
Они представляют собой подход, при котором классы и идентификаторы, определенные в CSS-файле, автоматически преобразуются в уникальные имена. Это позволяет избежать конфликтов имен классов между различными компонентами. Они поддерживаются в сборщиках, таких как Webpack, и во фреймворках, например, в Create React App.

3️⃣ CSS-in-JS
Библиотеки CSS-in-JS, такие как Styled-components и Emotion, позволяют писать CSS прямо в JavaScript-файлах. Это обеспечивает полную изоляцию стилей, поскольку стили применяются непосредственно к компонентам, и конфликты имен классов исключаются.

4️⃣ Shadow DOM
Технология, позволяющая инкапсулировать DOM-дерево и стили компонента так, что они не влияют на основной документ. Это ключевая часть Web Components и позволяет создавать полностью изолированные компоненты.

5️⃣ Scoped CSS
Некоторые современные фреймворки и инструменты, такие как Vue.js, предлагают возможность использования scoped стилей, где CSS применяется исключительно к компоненту, в котором он объявлен, без воздействия на остальную часть приложения.

6️⃣ Использование IFRAME
Размещение контента внутри <iframe> позволяет полностью изолировать его стили от остальной части страницы. Это крайний способ, который может быть полезен для встраивания стороннего контента, но он приносит дополнительную сложность и ограничения.

7️⃣ CSS-переменные для темизации
Сами по себе не обеспечивают изоляцию, их можно использовать для создания гибкой системы тем, которая позволяет контролировать влияние глобальных стилей на компоненты и облегчает поддержание стилевой согласованности.

Изоляция стилей — важный аспект разработки надёжных и масштабируемых веб-приложений. Выбор метода зависит от конкретных требований проекта, технологического стека и предпочтений разработчика. Использование современных инструментов и подходов, таких как CSS-модули, CSS-in-JS и Web Components, может значительно упростить управление стилями и повысить качество конечного продукта.

➡️ Примеры ответов
➡️ Список всех вопросов на Frontend Developer

🧩 Идущий | 🔐 Собесы | 🔐 Тестовые

Почему react лучше, чем jquerry ?
Спросят с вероятностью 7%

Сравнивать React и jQuery не совсем корректно, поскольку они решают разные задачи в разработке веб-приложений. jQuery — это библиотека, которая упрощает манипуляции с DOM, обработку событий, анимации и Ajax-запросы, делая код более кратким и понятным. React — это библиотека для создания пользовательских интерфейсов, которая позволяет строить интерактивные UI с использованием компонентного подхода.

Тем не менее, можно выделить несколько причин, по которым можно предпочесть React jQuery для современных веб-приложений:

1️⃣ Компонентный подход: Основан на компонентах, что позволяет создавать переиспользуемые, независимые части интерфейса. Это делает код более организованным и упрощает его поддержку.

2️⃣ Виртуальный DOM: Использует виртуальный DOM, что позволяет оптимизировать обновление интерфейса и повысить производительность приложения, минимизируя количество манипуляций с реальным DOM.

3️⃣ Однонаправленный поток данных: Реализует паттерн однонаправленного потока данных, который облегчает понимание того, как данные передаются через приложение и как состояние компонента влияет на его отображение.

4️⃣ Широкие возможности для разработки сложных приложений: Лучше подходит для разработки больших и сложных веб-приложений, где требуется высокая степень интерактивности и динамичности интерфейса.

5️⃣ Экосистема и сообщество: Имеет огромное сообщество разработчиков и богатую экосистему, включая множество готовых решений, библиотек и инструментов, что облегчает разработку и внедрение новых функций.

6️⃣ Интеграция с современными архитектурами и инструментами разработки: Легко интегрируется с современными архитектурами веб-разработки, такими как Redux для управления состоянием приложения, и с инструментами разработки, такими как Webpack, Babel и другие.

7️⃣ Поддержка из коробки: Создание интерактивных пользовательских интерфейсов с ним часто требует меньше кода и меньше усилий для поддержания его в актуальном состоянии по сравнению с использованием jQuery для тех же целей.

Хотя React предлагает множество преимуществ для разработки современных веб-приложений, выбор между React и jQuery зависит от конкретных требований проекта. Для простых веб-сайтов или задач, где необходимо быстро добавить интерактивность без переписывания существующего кода, jQuery может быть более подходящим выбором. Для создания сложных пользовательских интерфейсов с высокой степенью взаимодействия React предлагает более современный и мощный инструментарий.

➡️ Примеры ответов
➡️ Список всех вопросов на Frontend Developer

🧩 Идущий | 🔐 Собесы | 🔐 Тестовые

Зачем используют vuex ?
Спросят с вероятностью 10%

Vuex — это библиотека управления состоянием для приложений, предназначенная для централизованного хранения всех данных, используемых в приложении. В больших и сложных приложениях, где множество компонентов нуждаются в доступе к общим данным и должны реагировать на их изменения в реальном времени, простого пропс-дренажа (props drilling) и событийного взаимодействия недостаточно для эффективного управления состоянием. Вот основные причины использования Vuex в таких случаях:

1️⃣ Централизованное управление состоянием

Предоставляет единое глобальное хранилище для всех компонентов приложения, что облегчает отслеживание и управление состоянием приложения, делая данные доступными для всех компонентов независимо от их места в иерархии.

2️⃣ Реактивность

Состояние, хранящееся в нем, реактивно. Это означает, что он автоматически отслеживает его изменения и обновляет представление, когда состояние изменяется. Это делает разработку интерактивных интерфейсов более интуитивно понятной и менее подверженной ошибкам.

3️⃣ Удобство отладки и разработки

Поддерживает инструменты, позволяя отслеживать, как и когда изменяется состояние приложения. Это значительно упрощает отладку и позволяет лучше понять поток данных в приложении.

4️⃣ Поддержка масштабируемости

Приложения, разработанные с его использованием, легче масштабировать благодаря структурированной и предсказуемой организации кода. Разделение логики управления состоянием на действия, мутации и геттеры делает код более организованным и понятным.

5️⃣ Упрощение управления сложными взаимодействиями

Упрощает управление сложными взаимодействиями и потоками данных между компонентами, например, при выполнении асинхронных операций, таких как запросы к серверу, и последующем обновлении состояния в зависимости от ответа.

Пример:

// Создание хранилища Vuex
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  }
});

// Использование хранилища в компоненте Vue
new Vue({
  el: '#app',
  computed: {
    count() {
      return store.state.count;
    }
  },
  methods: {
    increment() {
      store.commit('increment');
    }
  }
});

Этот простой пример демонстрирует, как Vuex может быть использован для централизованного управления состоянием и его изменениями.

Использование Vuex целесообразно в сложных приложениях, где требуется эффективное управление и обмен данными между компонентами. Оно обеспечивает реактивность, удобство отладки, масштабируемость и структурированность, делая управление состоянием приложения более организованным и удобным.

➡️ Примеры ответов
➡️ Список всех вопросов на Frontend Developer

🧩 Идущий | 🔐 Собесы | 🔐 Тестовые

Что такое async и await ?
Спросят с вероятностью 10%

async/await — это синтаксический сахар для работы с асинхронными операциями, делающий код, работающий с асинхронными действиями, такими как запросы к серверу или чтение файлов, более читаемым и легким для понимания. Этот синтаксис был введен в ES2017 (ES8) и строится на промисах (Promises).

- Ключевое слово async

Используется перед объявлением функции. Это позволяет функции автоматически возвращать промис. Если эта функция возвращает не промис, то возвращаемое значение будет автоматически обернуто в промис.

async function fetchData() {
  return 'данные';
}

fetchData().then(data => console.log(data)); // выводит "данные"

- Ключевое слово await

Используется для ожидания результата промиса внутри асинхронной функции async. Оно приостанавливает выполнение асинхронной функции до тех пор, пока промис не выполнится (т.е. не будет разрешен или отклонен). ЕЕ можно использовать только внутри асинхронных функций.

async function fetchData() {
  let data = await fetch('https://api.example.com/data');
  let json = await data.json();
  return json;
}

В этом примере функция fetchData сначала ожидает завершения HTTP-запроса к серверу, а затем ожидает завершения преобразования ответа в формат JSON. Весь этот процесс асинхронный, но благодаря await код выглядит как синхронный.

Преимущества использования:

✅ Улучшение читаемости кода: Асинхронный код, написанный с использованием async/await, выглядит более структурированным и похожим на синхронный код, что упрощает его понимание.
✅ Упрощение обработки ошибок: В асинхронных функциях с await можно использовать стандартный синтаксис try/catch для обработки ошибок, что делает код единообразнее.
✅ Избегание "callback hell": Использование async/await позволяет избежать сложностей с вложенными коллбэками, которые могут возникнуть при использовании промисов или старого стиля асинхронного кода с коллбэками.

Важно помнить:

- await приостанавливает выполнение только текущей асинхронной функции, не блокируя выполнение другого кода.
- await может использоваться только внутри функций, объявленных с async.
- Внутри асинхронных функций async можно использовать множество операторов await для последовательного выполнения зависимых друг от друга асинхронных операций.

async/await сделал написание асинхронного кода более интуитивно понятным и удобным, существенно улучшив разработку асинхронных приложений.

➡️ Примеры ответов
➡️ Список всех вопросов на Frontend Developer

🧩 Идущий | 🔐 Собесы | 🔐 Тестовые