📌 Какие минусы у React?

💬 Спрашивают в 3% собеседований

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

1️⃣ Крутая кривая обучения

➕ Проблема: Для новых разработчиков React может показаться сложным из-за концепций, таких как JSX, компоненты, хуки и управление состоянием.

➕ Последствия: Требуется время и усилия для освоения всех особенностей и возможностей библиотеки.

2️⃣ Быстрая эволюция

➕ Проблема: React и его экосистема развиваются очень быстро, часто выходят новые версии и дополнительные библиотеки.

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

3️⃣ Неисчерпывающая документация для продвинутых тем

➕ Проблема: Хотя базовая документация у React хорошая, для более сложных или специфичных задач может не хватать примеров и объяснений.

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

4️⃣ Ограниченные возможности для SEO

➕ Проблема: Приложения на React рендерятся на стороне клиента, что может ухудшить индексацию страниц поисковыми системами.

➕ Последствия: Требуется дополнительная настройка, например, использование серверного рендеринга (Next.js), для улучшения SEO.

5️⃣ Сложность в конфигурировании и настройке

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

➕ Последствия: Это увеличивает время на первоначальную настройку и требует знаний в области различных инструментов и библиотек.

6️⃣ Производительность при большом количестве компонентов

➕Проблема: При большом количестве компонентов и частых обновлениях состояния могут возникнуть проблемы с производительностью.

➕ Последствия: Требуется оптимизация кода и использование таких инструментов, как мемоизация (React.iss.onemo, хуки useMemo и useCallback), чтобы избежать ненужных перерисовок.

🤔 Пример проблемы с производительностью:

import React, { useState, useMemo } from 'react';

function ExpensiveComponent({ num }) {
  const computedValue = useMemo(() => {
    let sum = 0;
    for (let i = 0; i < num * 1000; i++) {
      sum += i;
    }
    return sum;
  }, [num]);

  return <div>Computed Value: {computedValue}</div>;
}

function App() {
  const [num, setNum] = useState(1);

  return (
    <div>
      <button onClick={() => setNum(num + 1)}>Increase</button>
      <ExpensiveComponent num={num} />
    </div>
  );
}

export default App;

В этом примере показана оптимизация вычислений с использованием useMemo.

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

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

🔥 ТОП ВОПРОСОВ С СОБЕСОВ

🔒 База собесов | 🔒 База тестовых

📌 Как часто происходит рендер?

💬 Спрашивают в 3% собеседований

В React рендеринг компонента происходит в нескольких ситуациях. Давайте рассмотрим основные из них:

1️⃣ Первоначальный рендеринг:

➕ Когда компонент впервые монтируется в DOM.

2️⃣ Обновление состояния (state):

➕ Если состояние компонента изменяется с помощью this.setState в классовых компонентах или useState в функциональных компонентах.

3️⃣ Обновление пропсов (props):

➕ Когда компонент получает новые пропсы от родительского компонента.

4️⃣ Обновление контекста (context):

➕ Когда значение контекста, используемого компонентом, изменяется.

5️⃣ Обновление при изменении ключа (key):

➕ Если ключ компонента изменяется (например, в списках), React будет рассматривать это как удаление старого компонента и добавление нового.

Теперь разберём каждый случай подробнее:

1️⃣ Первоначальный рендеринг

Когда компонент впервые добавляется в DOM, происходит его рендеринг. Это единственный раз, когда компонент рендерится в процессе монтирования.

Пример:

function App() {
  return <MyComponent />;
}

2️⃣. Обновление состояния

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

Пример:

function MyComponent() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

3️⃣ Обновление пропсов

Если родительский компонент передаёт новые пропсы, дочерний компонент будет ререндериться с новыми данными.

Пример:

function ParentComponent() {
  const [value, setValue] = useState(0);

  return (
    <div>
      <button onClick={() => setValue(value + 1)}>Change Value</button>
      <ChildComponent value={value} />
    </div>
  );
}

function ChildComponent({ value }) {
  return <p>{value}</p>;
}

4️⃣ Обновление контекста

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

Пример:

const MyContext = React.createContext();

function App() {
  const [value, setValue] = useState('initial');

  return (
    <MyContext.Provider value={value}>
      <button onClick={() => setValue('updated')}>Update Context</button>
      <MyComponent />
    </MyContext.Provider>
  );
}

function MyComponent() {
  const contextValue = useContext(MyContext);
  return <p>{contextValue}</p>;
}

5️⃣ Обновление при изменении ключа

Если ключ компонента изменяется, React удаляет старый компонент и добавляет новый, вызывая рендеринг нового компонента.

Пример:

function App() {
  const [items, setItems] = useState([1, 2, 3]);

  return (
    <ul>
      {items.map(item => (
        <li key={item}>{item}</li>
      ))}
      <button onClick={() => setItems([4, 5, 6])}>Change Items</button>
    </ul>
  );
}

🤔 Оптимизация рендеринга

Чтобы уменьшить количество ненужных рендеров, можно использовать:

➕ PureComponent и React.iss.onemo для функциональных компонентов.
➕ shouldComponentUpdate для классовых компонентов.
➕ useMemo и useCallback для мемоизации значений и функций в функциональных компонентах.

🤔 Резюме:
Компоненты React рендерятся при первоначальном монтировании, изменении состояния, изменении пропсов, изменении контекста и изменении ключа. Оптимизация рендеринга может быть достигнута с помощью PureComponent, React.iss.onemo, shouldComponentUpdate, useMemo и useCallback.

🔥 ТОП ВОПРОСОВ С СОБЕСОВ

🔒 База собесов | 🔒 База тестовых

📌 Как браузер обрабатывает ссылки?

💬 Спрашивают в 3% собеседований

Браузер обрабатывает ссылки (теги <a>) следующим образом:

🤔 Основные этапы обработки ссылки браузером:

1️⃣ Рендеринг HTML:

➕ Когда браузер загружает HTML-документ, он разбирает его и создает DOM (Document Object Model). В этом процессе браузер встречает тег <a> и определяет, что это ссылка.

2️⃣ Наведение и щелчок по ссылке:

➕ Когда пользователь наводит курсор на ссылку, браузер может показать URL в строке состояния или всплывающем окне.

➕ При щелчке по ссылке браузер проверяет атрибуты ссылки (href, target, и др.), чтобы определить, как обработать этот клик.

3️⃣ Проверка атрибута `href`:

➕ Если href отсутствует или равно #, браузер не будет переходить на другую страницу.

➕ Если href содержит URL, браузер начинает процесс навигации.

4️⃣ Обработка атрибута `target`:

➕ Если target установлен в _self или не указан, браузер загружает новую страницу в текущем окне.

➕ Если target установлен в _blank, браузер открывает новую страницу в новой вкладке или окне.

➕ Если указано имя фрейма, браузер попытается загрузить новую страницу в указанный фрейм.

5️⃣ Выполнение возможных JavaScript обработчиков событий:

➕ Браузер проверяет наличие событий, таких как onclick, onmousedown, onmouseup и т.д.

➕ Если обработчик события вызвал event.preventDefault(), переход на новую страницу не произойдет.

6️⃣ Отправка HTTP-запроса:

➕ Браузер отправляет HTTP-запрос к серверу, если ссылка ведет на другой ресурс.

➕ Сервер обрабатывает запрос и отправляет ответ.

7️⃣ Обработка ответа от сервера:

➕ Если ответ сервера содержит HTML, браузер начнет разбор нового HTML-документа.

➕ Если ответ сервера является перенаправлением (статусы 3xx), браузер отправит новый запрос по указанному адресу.

➕ Если ответ сервера является ошибкой (статусы 4xx или 5xx), браузер отобразит страницу ошибки.

8️⃣ Загрузка ресурсов:

➕ После получения нового HTML-документа браузер загружает все связанные ресурсы (CSS, JS, изображения и т.д.).

9️⃣ Отображение новой страницы:

➕ Браузер обновляет DOM и перерисовывает страницу, отображая новый контент пользователю.

🤔 Пример работы с ссылкой

HTML:

<a href="https://example.com" target="_blank" id="myLink">Перейти на example.com</a>

JavaScript:

document.getElementById('myLink').addEventListener('click', function(event) {
  event.preventDefault();
  console.log('Ссылка была нажата, но переход не произошел');
  // Можно выполнить дополнительную логику здесь
});

🤔 Атрибуты ссылки и их значение

➕ `href`: определяет URL, на который ведет ссылка.

➕ `target`: определяет, где открыть связанный документ.

➕ _self: в текущем окне/вкладке.

➕ _blank: в новом окне/вкладке.

➕ _parent: в родительском фрейме.

➕ _top: во всем текущем окне.

➕ `rel`: определяет отношения между текущим документом и связанным документом. Полезно для SEO и безопасности (например, rel="noopener noreferrer" для ссылок с target="_blank").

🤔 Резюме

Когда вы нажимаете на ссылку, браузер проверяет её атрибуты (href, target и другие), может выполнить JavaScript-обработчики событий, отправляет HTTP-запрос, обрабатывает ответ от сервера и отображает новую страницу.


🔥 ТОП ВОПРОСОВ С СОБЕСОВ

🔒 База собесов | 🔒 База тестовых

📌 Что такое доступность интерфейсов?

💬 Спрашивают в 3% собеседований

Доступность интерфейсов (или веб-доступность, англ. web accessibility) — это практика создания веб-сайтов и приложений, которые могут быть использованы всеми людьми, включая людей с ограниченными возможностями. Цель доступности — сделать так, чтобы любой пользователь, независимо от его физических или когнитивных особенностей, мог получить доступ к контенту и функциональности веб-ресурса.

🤔 Зачем нужна доступность

1️⃣ Социальная значимость:

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

➕ Это способствует социальному включению и поддерживает права всех людей на доступ к информации и услугам.

2️⃣ Юридические требования:

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

➕ Несоблюдение этих требований может привести к юридическим последствиям и штрафам.

3️⃣ Расширение аудитории:

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

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

🤔 Основные принципы доступности

1️⃣ Воспринимаемость (Perceivable):

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

➕ Пример: использование альтернативного текста (alt) для изображений, чтобы они могли быть восприняты пользователями экранных читалок.

2️⃣ Управляемость (Operable):

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

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

3️⃣ Понимаемость (Understandable):

➕ Информация и управление интерфейсом должны быть понятными.

➕ Пример: использование простого и понятного языка, предсказуемое поведение интерфейсов.

4️⃣ Надежность (Robust):

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

➕ Пример: использование семантически правильного HTML-кода.

🤔 Примеры улучшений доступности

1️⃣ Альтернативный текст для изображений:

   <img src="example.jpg" alt="Описание изображения">
   

2️⃣ Подписи и описания для форм:

   <label for="username">Имя пользователя:</label>
   <input type="text" id="username" name="username">
   

3️⃣ Доступная навигация:
- Обеспечение возможности перемещения по странице с помощью клавиши Tab и указание фокуса для элементов.

   :focus {
     outline: 2px solid blue;
   }
   

4️⃣ Использование ARIA (Accessible Rich Internet Applications):
- ARIA атрибуты помогают сделать сложные веб-приложения доступными.

   <button aria-label="Закрыть меню">X</button>
   

🤔 Инструменты и ресурсы для проверки доступности

1️⃣ Screen readers (экранные читалки):

➕ JAWS, NVDA, VoiceOver — программы, которые озвучивают содержимое экрана и помогают пользователям с нарушением зрения.

2️⃣ Линтеры и валидаторы:

➕ WAVE (Web Accessibility Evaluation Tool), Axe, Lighthouse — инструменты для автоматической проверки доступности веб-страниц.

3️⃣ Руководства и стандарты:

➕ WCAG (Web Content Accessibility Guidelines) — международные рекомендации по обеспечению доступности веб-контента.

🤔 Резюме

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

🔥 ТОП ВОПРОСОВ С СОБЕСОВ

🔒 База собесов | 🔒 База тестовых

📌 Как происходит отрисовка сайта для пользователя?

💬 Спрашивают в 3% собеседований

Отрисовка сайта для пользователя включает несколько этапов. Давайте разберём их подробнее.

1️⃣ Запрос к серверу:

Когда пользователь вводит URL-адрес в браузере и нажимает Enter, браузер отправляет HTTP-запрос к серверу, где находится сайт.

2️⃣ Ответ сервера:

Сервер получает запрос и отправляет обратно нужные файлы. Обычно это HTML-документ, стили (CSS) и скрипты (JavaScript).

3️⃣ Парсинг HTML:

Браузер начинает читать (парсить) HTML-документ. Он строит дерево DOM (Document Object Model), которое представляет структуру HTML. Каждый элемент HTML становится узлом в этом дереве.

4️⃣ Загрузка и применение CSS:

После парсинга HTML браузер загружает и применяет стили из CSS-файлов. Это позволяет создать дерево CSSOM (CSS Object Model), которое описывает, как каждый элемент должен выглядеть. Затем DOM и CSSOM объединяются, чтобы создать render tree (дерево рендеринга).

5️⃣ Загрузка и выполнение JavaScript:

Когда браузер находит теги <script>, он загружает и выполняет JavaScript. Скрипты могут изменять DOM, что потребует обновления render tree. JavaScript может также изменять CSSOM и запрашивать новые данные с сервера (например, с помощью AJAX).

6️⃣ Отрисовка (рендеринг):
На основе render tree браузер рассчитывает расположение каждого элемента (layout) и отрисовывает (paint) их на экране. Этот процесс называется layout и painting.

7️⃣ Оптимизации и обновления:

Браузеры используют различные оптимизации, такие как кэширование ресурсов, асинхронную загрузку скриптов и отложенную загрузку изображений. JavaScript и CSS могут вызывать изменения в DOM, которые требуют перерисовки (repaint) или перерасчета расположения элементов (reflow).

🤔 Пример:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Мой Сайт</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Привет, мир!</h1>
  <p>Это пример простого HTML-документа.</p>
  <script src="script.js"></script>
</body>
</html>

В этом примере браузер сначала загрузит HTML, создаст DOM, затем загрузит CSS и создаст CSSOM, а потом загрузит и выполнит JavaScript.

🤔 **Вкратце**: Браузер загружает HTML, CSS и JavaScript с сервера, создаёт внутренние структуры данных (DOM и CSSOM), рассчитывает расположение элементов и отрисовывает их на экране пользователя.

🔥 ТОП ВОПРОСОВ С СОБЕСОВ

🔒 База собесов | 🔒 База тестовых

📌 Как строки кода преобразуются в сайт?

💬 Спрашивают в 3% собеседований

Преобразование строк кода в сайт включает несколько ключевых этапов. Рассмотрим этот процесс подробно.

1️⃣ Получение исходного кода:

Когда вы создаете сайт, вы пишете исходный код на языках HTML, CSS и JavaScript. Этот код хранится на сервере, готовый для отправки пользователю по запросу.

2️⃣ Запрос к серверу и ответ:

Когда пользователь вводит URL в браузере, браузер отправляет HTTP-запрос к серверу. Сервер отвечает, отправляя обратно файлы с кодом.

3️⃣ Парсинг HTML:

Браузер начинает анализировать HTML-документ. Он считывает строки HTML-кода и строит дерево DOM (Document Object Model). DOM представляет собой иерархическую структуру всех элементов на странице.

4️⃣ Загрузка и парсинг CSS:

При обнаружении ссылок на CSS-файлы в HTML (тег <link>), браузер загружает эти файлы и анализирует их, создавая CSSOM (CSS Object Model). CSSOM описывает стили и правила для каждого элемента на странице.

5️⃣ Создание дерева рендеринга:

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

6️⃣ Загрузка и выполнение JavaScript:

Когда браузер встречает теги <script> в HTML, он загружает и выполняет JavaScript-код. Скрипты могут изменять DOM и CSSOM, добавляя интерактивность и динамические элементы на страницу.

7️⃣ Вывод на экран (рендеринг):

Браузер рассчитывает положение и размеры каждого элемента (layout) на основе дерева рендеринга. Затем он отрисовывает (paint) элементы на экране, используя графические ресурсы.

8️⃣ Рефлоу и репейнт:

Если JavaScript изменяет структуру DOM или стили CSS, браузер может повторно вычислить расположение элементов (reflow) и обновить их отрисовку (repaint). Эти процессы могут быть ресурсоемкими, поэтому важно оптимизировать код для их минимизации.

🤔 Пример:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Пример страницы</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Заголовок</h1>
  <p>Параграф текста.</p>
  <script src="script.js"></script>
</body>
</html>

🤔 В этом примере:

➕ HTML создаёт базовую структуру страницы.

➕ CSS-файл задаёт стили для элементов.

➕ JavaScript добавляет интерактивность.

🤔 Вкратце: Браузер получает исходный код, анализирует HTML и CSS для создания внутренней структуры данных (DOM и CSSOM), затем выполняет JavaScript, рассчитывает расположение элементов и отображает их на экране.

🔥 ТОП ВОПРОСОВ С СОБЕСОВ

🔒 База собесов | 🔒 База тестовых

📌 Как задать последовательность выполнения скриптов?

💬 Спрашивают в 3% собеседований

Последовательность выполнения скриптов можно контролировать несколькими способами:

1️⃣ Порядок размещения в HTML:

Скрипты выполняются в порядке их появления в документе.

   <script src="script1.js"></script>
   <script src="script2.js"></script>
   

2️⃣ Атрибут `defer`:

Скрипты с атрибутом defer выполняются в порядке их появления после загрузки и парсинга HTML.

   <script src="script1.js" defer></script>
   <script src="script2.js" defer></script>
   

3️⃣ Атрибут `async`:

Скрипты с атрибутом async выполняются по мере их загрузки, независимо от порядка в HTML.

   <script src="script1.js" async></script>
   <script src="script2.js" async></script>
   

🤔 Вкратце: Скрипты выполняются в порядке их размещения в HTML. Атрибуты defer и async позволяют управлять этим процессом: defer сохраняет порядок, async выполняет скрипты по мере загрузки.

🔥 ТОП ВОПРОСОВ С СОБЕСОВ

🔒 База собесов | 🔒 База тестовых

📌 Что такое 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 выполнять асинхронные операции, обрабатывая их по мере завершения, не блокируя при этом главный поток выполнения. Это делает возможным создание отзывчивых и асинхронных веб-приложений.

🔥 ТОП ВОПРОСОВ С СОБЕСОВ

🔒 База собесов | 🔒 База тестовых

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

💬 Спрашивают в 47% собеседований

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

1️⃣ Инкапсуляция данных:

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

2️⃣ Сохранение состояния:

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

3️⃣ Кадрирование и функциональное программирование:

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

➕ Пример:

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

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

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

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

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

🤔 Итог:

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

🔥 ТОП ВОПРОСОВ С СОБЕСОВ

🔒 База собесов | 🔒 База тестовых

📌 Что такое 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-функции. У каждого обещания есть три состояния: ожидание, исполнено и отклонено, которые помогают управлять результатом асинхронных операций.

🔥 ТОП ВОПРОСОВ С СОБЕСОВ

🔒 База собесов | 🔒 База тестовых

📌 Какие типы данных существуют?

💬 Спрашивают в 27% собеседований

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

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

➕ Number: представляет как целые числа, так и числа с плавающей точкой. Например, 42 или 3.14.

➕ String: представляет текстовые данные. Строки неизменяемы. Пример: "Привет, мир!".

➕ Boolean: имеет два значения, true и false, и используется для работы с логическими операциями.

➕ Undefined: переменная имеет тип undefined, если она была объявлена, но ей не было присвоено никакого значения.

➕ Null: специальное значение, которое представляет собой "ничего" или "пустое значение". Важно отметить, что null является объектом из-за ошибки в ранних версиях JavaScript.

➕ Symbol: уникальное и неизменяемое значение, используемое как ключ для свойств объекта. Создают уникальные идентификаторы в объектах.

➕ BigInt: тип данных, позволяющий работать с целыми числами произвольной точности. Введен для представления чисел, которые больше, чем максимальное значение, которое может представить тип Number.

🤔 Объекты:

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

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

➕ Массивы: используются для хранения упорядоченных коллекций данных.

➕ Функции: объекты первого класса, поддерживающие вызов.

➕ Дата: для работы с датами и временем.

➕ Регулярные выражения: для работы с регулярными выражениями.

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

🔥 ТОП ВОПРОСОВ С СОБЕСОВ

🔒 База собесов | 🔒 База тестовых

📌 Что такое 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.

🔥 ТОП ВОПРОСОВ С СОБЕСОВ

🔒 База собесов | 🔒 База тестовых

📌 Чем let отличается от var ?

💬 Спрашивают в 27% собеседований

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

🤔 Область видимости (Scope)

➕ Var:

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

➕ Let:

В отличие от var, let имеет блочную область видимости. Это означает, что переменная, объявленная с помощью нее в блоке (например, в цикле или условном операторе), будет доступна только в пределах этого блока.

🤔 Поднятие (Hoisting)

➕ Var:

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

➕ Let:

Переменные, объявленные с ее помощью, также поднимаются, но не инициализируются. Попытка доступа к такой переменной до её объявления приведет к ошибке ReferenceError. Это поведение известно как "временная мертвая зона" (temporal dead zone, TDZ).

🤔 Создание в глобальном контексте

➕ Var:

Переменные, объявленные с ее помощью в глобальном контексте, становятся свойствами глобального объекта (window в браузерах).

➕ Let:

Переменные, объявленные с ее помощью в глобальном контексте, не становятся свойствами глобального объекта.

🤔 Примеры:

if (true) {
  var varVariable = "Я доступен везде в функции";
  let letVariable = "Я доступен только в этом блоке";
}

console.log(varVariable); // Работает, потому что var имеет функциональную область видимости
console.log(letVariable); // Ошибка, потому что let имеет блочную область видимости

console.log(a); // undefined из-за поднятия
var a = 3;

console.log(b); // ReferenceError из-за временной мертвой зоны
let b = 4;

🤔 Итог:

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

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

🔥 ТОП ВОПРОСОВ С СОБЕСОВ

🔒 База собесов | 🔒 База тестовых