❓ Какие типы данных существуют ?
Спросят с вероятностью 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

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

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

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