❓ Что такое event loop ?
Спросят с вероятностью 67%

Event Loop (цикл событий) — это один из ключевых аспектов асинхронного программирования, обеспечивающий возможность выполнения JavaScript-кода в однопоточном режиме, не блокируя выполнение других операций. Это достигается за счёт использования цикла, который постоянно проверяет, есть ли задачи для выполнения, и если они есть, то выполняет их одну за другой.

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

Работает Event Loop следующим образом:
1️⃣ Call Stack (Стек вызовов): Содержит текущий стек выполнения функций. Когда функция вызывается, она добавляется в стек вызовов, а когда выполнение функции заканчивается, она удаляется из стека.
2️⃣ Callback Queue (Очередь обратных вызовов): Когда асинхронная операция завершается, её callback (функция обратного вызова) помещается в очередь обратных вызовов.
3️⃣ Event Loop: Цикл событий непрерывно проверяет стек вызовов на наличие функций для выполнения. Если стек вызовов пуст, Event Loop извлекает первую функцию из очереди обратных вызовов и помещает её в стек вызовов для выполнения.

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

Пример кода:

console.log('Первое сообщение');
setTimeout(() => {
    console.log('Сообщение из setTimeout');
}, 0);
console.log('Второе сообщение');

В этом примере, несмотря на то что setTimeout имеет задержку в 0 миллисекунд, вывод в консоль будет следующим:

Первое сообщение
Второе сообщение
Сообщение из setTimeout

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

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

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

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

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

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

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

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

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

Пример:

function создатьСчетчик() {
    let количество = 0; // переменная количество "замкнута" внутри функции увеличить

    function увеличить() {
        количество += 1;
        return количество;
    }

    return увеличить;
}

const счетчик = создатьСчетчик();
console.log(счетчик()); // 1
console.log(счетчик()); // 2

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

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

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

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

❓ Что такое promise и какие состояния у него есть ?
Спросят с вероятностью 47%

Promise (обещание) — это объект, представляющий завершение (или неудачу) асинхронной операции и её результат. Он позволяет ассоциировать обработчики с асинхронным действием, тем самым избавляя от необходимости использовать обратные вызовы (callback-функции). Они упрощают работу с асинхронными операциями, такими как AJAX-запросы или чтение файлов, позволяя написать код, который проще понять и поддерживать.

Состояния:

1️⃣ Pending (Ожидание): Начальное состояние; асинхронная операция не завершена.
2️⃣ Fulfilled (Исполнено): Операция завершена успешно, и promise возвращает результат.
3️⃣ Rejected (Отклонено): Операция завершена с ошибкой, и promise возвращает причину отказа.

Пример:

let обещание = new Promise(function(resolve, reject) {
    // Эмуляция асинхронной операции, например, запроса к серверу
    setTimeout(() => {
        // Условие успешного выполнения операции
        if (/* условие успеха */) {
            resolve("данные получены");
        } else {
            reject("ошибка при получении данных");
        }
    }, 1000);
});

обещание.then(
    function(результат) { console.log(результат); }, // обработчик успеха
    function(ошибка) { console.log(ошибка); } // обработчик ошибки
);

Promise поддерживает цепочки вызовов (then), что позволяет организовывать асинхронный код последовательно и читабельно. Кроме того, существуют вспомогательные методы, такие как Promise.all, Promise.race, Promise.resolve, и Promise.reject, которые облегчают работу с группами асинхронных операций.

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

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

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

❓ Какие типы данных существуют ?
Спросят с вероятностью 27%

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

Примитивные типы:

- Number: представляет как целые числа, так и числа с плавающей точкой. Например, 42 или 3.14.
- String: представляет текстовые данные. Строки неизменяемы. Пример: "Привет, мир!".
- Boolean: имеет два значения, true и false, и используется для работы с логическими операциями.
- Undefined: переменная имеет тип undefined, если она была объявлена, но ей не было присвоено никакого значения.
- Null: специальное значение, которое представляет собой "ничего" или "пустое значение". Важно отметить, что null является объектом из-за ошибки в ранних версиях JavaScript.
- Symbol: уникальное и неизменяемое значение, используемое как ключ для свойств объекта. Создают уникальные идентификаторы в объектах.
- BigInt: тип данных, позволяющий работать с целыми числами произвольной точности. Введен для представления чисел, которые больше, чем максимальное значение, которое может представить тип Number.

Объекты:

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

Специальные типы:

- Массивы: используются для хранения упорядоченных коллекций данных.
- Функции: объекты первого класса, поддерживающие вызов.
- Дата: для работы с датами и временем.
- Регулярные выражения: для работы с регулярными выражениями.

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

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

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

❓ Что такое virtual dom ?
Спросят с вероятностью 27%

Virtual DOM (виртуальный Document Object Model) - это концепция, широко используемая в разработке интерфейсов, особенно в библиотеке React от Facebook, а также в других современных фронтенд-фреймворках. DOM - это структура данных, используемая браузерами для представления веб-страниц. Она позволяет программам изменять структуру, стиль и содержание веб-страницы, взаимодействуя с HTML и CSS. Проблема обычного DOM заключается в том, что он может быть довольно медленным при частых обновлениях, поскольку изменения в нем приводят к перерисовке элементов страницы, что может быть ресурсоёмким процессом.

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

Пример без Virtual DOM:

const element = document.getElementById('myElement');
element.textContent = 'Новый текст';

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

Пример с использованием Virtual DOM (пример на React):

class MyComponent extends React.Component {
  render() {
    return <div>Новый текст</div>;
  }
}
```

В этом случае, при изменении состояния компонента, React сначала применяет изменения к виртуальному DOM, а затем, используя согласование, оптимально обновляет реальный.

Виртуальный Document Object Model позволяет писать код, как если бы можно было менять любую часть веб-страницы в любой момент, не беспокоясь о производительности. Это делает разработку интерфейсов более интуитивно понятной и эффективной.

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

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

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

❓ В чём разница между let и const ?
Спросят с вероятностью 13%

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

Основные различия:

1️⃣ Область видимости: И let, и const имеют блочную область видимости, что означает, что переменная, объявленная внутри блока {}, будет доступна только внутри этого блока. Это отличает их от var, который имеет функциональную область видимости.

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

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

let a = 10;
console.log(a); // Вывод: 10
a = 20;
console.log(a); // Вывод: 20

В этом примере переменная a, объявленная с помощью let, сначала инициализируется значением 10, а затем ей присваивается новое значение 20.

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

const b = 10;
console.log(b); // Вывод: 10
// b = 20; // Это вызовет ошибку, потому что b объявлена с помощью const и не может быть переназначена.

В этом примере переменная b, объявленная с помощью const, инициализируется значением 10, и попытка изменить это значение приведет к ошибке.

Почему это важно?

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

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

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

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

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

❓ Что происходит во фронтенде ?
Спросят с вероятностью 3%

Во фронтенде происходит взаимодействие пользователя с веб-сайтом или веб-приложением через веб-браузер. Фронтенд-разработка включает в себя создание пользовательского интерфейса и пользовательского опыта (UI/UX), а также реализацию логики взаимодействия на клиентской стороне. Вот основные аспекты того, что происходит во фронтенде:

1️⃣ Рендеринг страницы

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

- Построение DOM-дерева: Браузер строит DOM (Document Object Model) дерево из HTML-кода.
- Построение CSSOM-дерева: Аналогично, браузер строит CSSOM (CSS Object Model) дерево из CSS-кода.
- Рендеринг: С использованием DOM и CSSOM деревьев браузер рендерит страницу.

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

Используется для добавления интерактивности на веб-страницу. Это может включать в себя:

- Обработку событий, таких как клики мыши и нажатия клавиш.
- Изменение DOM в ответ на действия пользователя.
- Асинхронные запросы к серверу с помощью AJAX или Fetch API для динамического обновления контента без перезагрузки страницы.

3️⃣ Адаптивный дизайн

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

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

Является важной частью фронтенд-разработки. Это включает в себя:

- Минификацию и объединение файлов CSS и JavaScript.
- Оптимизацию изображений.
- Ленивую загрузку медиа-контента.
- Использование кэширования и сервис-воркеров.

5️⃣ Обеспечение безопасности

Также участвуют в обеспечении безопасности веб-приложений, реализуя меры защиты от XSS (межсайтового скриптинга), CSRF (межсайтовой подделки запроса) атак и других угроз.

6️⃣ Использование фреймворков и библиотек

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

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

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

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

❓ Какие есть пример микрозадач ?
Спросят с вероятностью 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

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