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

IIFE (Immediately Invoked Function Expression) — это шаблон проектирования, который представляет собой функцию, немедленно вызываемую после её определения. Это позволяет создавать новую область видимости и изолировать переменные внутри функции от глобального объекта, тем самым предотвращая загрязнение глобального пространства имен.

Структура:

(function() {
  // Тело функции
})();

Или с использованием стрелочной функции:

(() => {
  // Тело функции
})();

Пример:

(function() {
  var localVar = 'Я локальная переменная';
  console.log(localVar); // Вывод: Я локальная переменная
})();

console.log(typeof localVar); // Вывод: undefined

В этом примере переменная localVar определена внутри него и не доступна за её пределами, что демонстрирует изоляцию переменных от глобального пространства имен.

Почему это полезно:

1️⃣ Изоляция: Переменные, объявленные внутри этого шаблона, не засоряют глобальное пространство имен и не конфликтуют с другими переменными с тем же именем.
2️⃣ Приватность: Создаёт приватную область видимости для переменных и функций, что позволяет скрыть реализацию деталей и сохранить данные и функции недоступными извне.
3️⃣ Немедленное выполнение: Код внутри него выполняется немедленно, что удобно для инициализации функциональности или создания модулей.
4️⃣ Управление глобальным объектом: Может использоваться для передачи глобального объекта (например, window в браузерах) в качестве параметра, что обеспечивает удобный доступ к глобальным переменным и функциям без прямого обращения к глобальному объекту.

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

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти к Списку всех вопросов на Frontend Developer. Ставь 👍 если нравится контент

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

Что приоритетнее использовать ts или js ?
Спросят с вероятностью 10%

Выбор между TypeScript (TS) и JavaScript (JS) зависит от конкретных требований, предпочтений и специфики задачи. Оба языка имеют свои преимущества и недостатки, и решение о том, какой из них использовать, следует принимать, исходя из нескольких ключевых факторов.

TypeScript

Преимущества:
✅ Статическая типизация: Предоставляет строгую типизацию, что помогает обнаруживать ошибки на этапе компиляции, ещё до выполнения кода. Это может значительно уменьшить количество ошибок в продакшене.
✅ Поддержка последних возможностей JavaScript: Компилируется в чистый JS, что позволяет использовать последние возможности языка, не беспокоясь о совместимости с браузерами.
✅ Инструменты разработки: Улучшенная поддержка в IDE для автодополнения кода, рефакторинга и навигации по проекту.
✅ Масштабируемость: Лучше подходит для больших проектов благодаря возможности определения интерфейсов, типов и обобщений.

Недостатки:
❌ Кривая обучения: Необходимо время на изучение синтаксиса и особенностейt.
❌ Время на настройку: Настройка проекта на нем может потребовать дополнительного времени и усилий, особенно в существующих больших проектах.
❌ Скорость сборки: Проекты на нем могут компилироваться дольше, чем чистый JS, из-за процесса типизации.

JavaScript

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

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

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

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

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти к Списку всех вопросов на Frontend Developer. Ставь 👍 если нравится контент.

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

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

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

Как это работает

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

Применение:

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

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

function memoize(fn) {
  const cache = {};
  return function(...args) {
    const key = args.toString();
    if (cache[key]) {
      return cache[key];
    } else {
      const result = fn.apply(this, args);
      cache[key] = result;
      return result;
    }
  };
}

// Пример использования меморизации для функции вычисления факториала
const factorial = memoize(function(n) {
  if (n === 0) {
    return 1;
  } else {
    return n * factorial(n - 1);
  }
});

console.log(factorial(5));  // Вычисляется и сохраняется в кэше
console.log(factorial(5));  // Возвращается результат из кэша, вычислений не происходит

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

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти к Списку всех вопросов на Frontend Developer. Ставь 👍 если нравится контент.

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

Как использовать useeffect ?
Спросят с вероятностью 13%

useEffect — это хук, введённый в React 16.8, который позволяет выполнять побочные эффекты в функциональных компонентах. Побочные эффекты включают в себя операции, которые выходят за рамки возвращаемого результатом рендеринга, такие как работа с сетью (запросы к API), подписки, изменение документа и так далее. Он заменяет собой жизненные циклы классовых компонентов, такие как componentDidMount, componentDidUpdate и componentWillUnmount.

Синтаксис:

useEffect(() => {
  // Ваш код для побочного эффекта
  return () => {
    // Очистка (необязательно)
  };
}, [зависимости]);

✅ Функция побочного эффекта: Это его основное тело, где вы помещаете код, который должен выполняться после каждого рендеринга (по умолчанию) или когда изменяются определённые зависимости.
✅ Очистка: Функция очистки выполняется перед тем, как компонент будет удалён, а также перед следующим выполнением эффекта. Это идеальное место для отмены подписок, таймеров и других ресурсов, чтобы избежать утечек памяти.
✅ Массив зависимостей: Определяет, при изменении каких значений должен повторно выполняться эффект. Если массив пуст ([]), эффект выполнится один раз после первого рендеринга. Если массив не указан, эффект будет выполняться после каждого рендеринга.

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

1️⃣ Запуск эффекта один раз

Чтобы выполнить эффект один раз после первого рендеринга (аналог componentDidMount в классовых компонентах), используйте пустой массив зависимостей:

useEffect(() => {
  // Код здесь будет выполнен один раз после инициализации компонента
}, []);

2️⃣ Выполнение при изменении зависимостей

Чтобы выполнить эффект при изменении определённых значений:

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

useEffect(() => {
  // Код здесь будет выполнен каждый раз, когда изменяется значение count
  document.title = Вы нажали ${count} раз;
}, [count]); // Зависимости

3️⃣ Очистка эффекта

Пример использования функции очистки:

useEffect(() => {
  const timerID = setInterval(() => {
    // Ваша логика здесь
  }, 1000);

  return () => {
    clearInterval(timerID); // Очистка при размонтировании компонента
  };
}, []); // Эффект выполнится один раз

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

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти к Списку всех вопросов на Frontend Developer. Ставь 👍 если нравится контент.

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

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

DOM (Document Object Model) дерево — это интерфейс, который представляет содержимое веб-страницы в виде иерархической структуры объектов. Каждый элемент страницы, включая текст, теги и атрибуты, становится узлом в этом дереве. Он позволяет языкам программирования, взаимодействовать с содержимым веб-страницы, изменяя его структуру, стиль и содержание.

Структура DOM дерева

- Узлы (Nodes): Базовые части. Узлы могут представлять элементы (Element), текст (Text), комментарии (Comment) и т.д.
- Корневой узел (Root Node): Обычно узел document, который служит входной точкой к содержимому веб-страницы.
- Родительские узлы (Parent Nodes): Узлы, содержащие другие узлы (дочерние узлы).
- Дочерние узлы (Child Nodes): Узлы, находящиеся внутри другого узла.
- Соседние узлы (Sibling Nodes): Узлы, расположенные на одном и том же уровне иерархии.

Как работает DOM

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

Можно выполнять различные операции с ним, такие как:

✅ Поиск элементов: С помощью методов вроде getElementById, getElementsByClassName, querySelector и querySelectorAll.
✅ Создание и добавление элементов: Используя методы createElement и appendChild.
✅ Удаление элементов: С помощью removeChild.
✅ Изменение атрибутов и стилей: Через обращение к свойствам элементов, таким как className, style и другим.

Важность DOM

Играет ключевую роль в интерактивности и динамическом поведении веб-страниц. Благодаря ему, веб-страницы могут отвечать на действия пользователя, обновляясь без необходимости перезагрузки страницы. Это лежит в основе таких технологий, как AJAX и SPA (Single Page Application), которые позволяют создавать быстрые и плавные веб-приложения.

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

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти к Списку всех вопросов на Frontend Developer. Ставь 👍 если нравится контент.

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

В чём отличие хранения данных в local storage от куки ?
Спросят с вероятностью 17%

Хранение данных в Local Storage и использование куки (cookies) — это два различных способа сохранения информации на стороне клиента в веб-разработке. Каждый из них имеет свои особенности, преимущества и недостатки:

Local Storage

1️⃣ Объем данных: Предоставляет значительно больше пространства для хранения данных по сравнению с куки — до 5-10 МБ в зависимости от браузера.
2️⃣ Доступность: Данные, сохраненные нем, доступны только на том же домене и не отправляются на сервер при каждом запросе, в отличие от куки.
3️⃣ Срок хранения: Данные нем сохраняются бессрочно или до тех пор, пока не будут явно удалены кодом или пользователем через настройки браузера.
4️⃣ Безопасность: Так как данные из него не отправляются на сервер с каждым запросом, риск перехвата этих данных ниже, чем у куки. Однако, поскольку данные доступны через JavaScript, Local Storage уязвим к XSS-атакам (межсайтовому скриптингу).

Куки (Cookies)

1️⃣ Объем данных: Ограничены размером, обычно максимум 4 КБ на одно куки.
2️⃣ Доступность: Отправляются на сервер при каждом HTTP-запросе к домену, который их установил, что может быть полезно для аутентификации или отслеживания сессий пользователя.
3️⃣ Срок хранения: Срок жизни куки может быть установлен при их создании. Если срок не установлен, куки считается сессионным и удаляется при закрытии браузера.
4️⃣ Безопасность: Куки могут быть настроены как HttpOnly, что делает их недоступными и уменьшает риск XSS-атак. Также куки могут быть помечены как Secure, что означает их отправку только по защищенным соединениям (HTTPS).

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

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

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

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти к Списку всех вопросов на Frontend Developer. Ставь 👍 если нравится контент.

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

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

REST API (Representational State Transfer Application Programming Interface) — это архитектурный стиль взаимодействия компонентов распределенного приложения в сети. В контексте веб-разработки, он позволяет веб-сервисам общаться друг с другом через HTTP, используя стандартные методы HTTP (GET, POST, PUT, DELETE и т.д.) для выполнения операций над данными.

Основные принципы:

1️⃣ Без состояния (Stateless): Каждый запрос от клиента к серверу должен содержать всю информацию, необходимую для его выполнения. Сервер не сохраняет состояние клиента между запросами.
2️⃣ Единообразие интерфейса (Uniform Interface): Определяет стандартный способ взаимодействия между клиентом и сервером, что облегчает и унифицирует разработку и взаимодействие компонентов системы.
3️⃣ Кэширование (Cacheable): Ответы на запросы могут быть кэшируемыми или некэшируемыми, что позволяет улучшить производительность системы за счет уменьшения нагрузки на сервер.
4️⃣ Клиент-сервер (Client-Server): Разделение обязанностей между клиентом (например, пользовательским интерфейсом) и сервером (хранилище данных), что упрощает разработку и масштабирование компонентов независимо друг от друга.
5️⃣ Многоуровневая система (Layered System): Клиент не может обязательно знать, общается ли он напрямую с сервером или через посредников, что повышает безопасность системы и позволяет использовать балансировщики нагрузки, кэширующие сервера и т.д.
6️⃣ Код по требованию (Code on Demand, необязательно): Сервер может временно расширять или настраивать функциональность клиента, передавая ему исполняемый код.

Примеры:

1️⃣ Веб-сервисы: Веб-сайты используют его для запроса данных с сервера (например, загрузка списка пользователей, публикации сообщений в блоге).
2️⃣ Мобильные приложения: Мобильные приложения общаются с сервером для получения и отправки данных (например, проверка погоды, отправка сообщений).
3️⃣ Интеграция с внешними сервисами: Приложения могут интегрироваться с внешними API для расширения своего функционала (например, использование карт Google Maps, интеграция с социальными сетями).

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

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти к Списку всех вопросов на Frontend Developer. Ставь 👍 если нравится контент.

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

Как делается http запрос ?
Спросят с вероятностью 13%

HTTP-запросы — это основа взаимодействия, позволяющие клиентам (например, браузерам) общаться с серверами. Это происходит с использованием протокола HTTP (HyperText Transfer Protocol). Клиент отправляет его серверу, а сервер отвечает HTTP-ответом. Запросы могут быть сделаны для различных целей, включая получение данных (GET запрос), отправку данных для создания или обновления ресурсов (POST, PUT запросы), удаление ресурсов (DELETE запрос) и др.

Структура HTTP-запроса

Состоит из следующих частей:

1️⃣ Стартовая строка (Start line): Определяет метод запроса (например, GET, POST), URI (Uniform Resource Identifier) запрашиваемого ресурса и версию HTTP.
2️⃣ Заголовки (Headers): Содержат дополнительную информацию для сервера, например тип контента, который клиент может принимать (Accept), тип контента, который отправляется (Content-Type), параметры аутентификации и другие.
3️⃣ Пустая строка: Разделяет заголовки и тело запроса.
4️⃣ Тело запроса (Body) (необязательно): Содержит данные, отправляемые в запросе. Используется с методами POST, PUT и другими, но не с GET.

Способы отправки HTTP-запросов

- Использование веб-браузера

Самый простой способ его отправки — использование веб-браузера. Когда вы вводите URL в адресную строку и нажимаете Enter, браузер отправляет GET-запрос к серверу, запрашивая содержимое страницы.

- Использование инструментов

✅ cURL: Командная утилита для отправки запросов через терминал или командную строку.

    curl -X GET "http://example.com"

✅ Postman: Графический интерфейс пользователя (GUI) для отправки HTTP-запросов, удобный для тестирования API.
✅ HTTP клиенты в языках программирования: Большинство языков программирования предоставляют библиотеки для работы с HTTP. Например, fetch в JavaScript, requests в Python, HttpClient в .NET.

Пример с использованием Fetch API

fetch('http://example.com/movies.json')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Ошибка:', error));

Этот код отправляет GET-запрос к http://example.com/movies.json, преобразует ответ и выводит его в консоль.

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

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти к Списку всех вопросов на Frontend Developer. Ставь 👍 если нравится контент.

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

В чём разница между foreach и map ?
Спросят с вероятностью 17%

forEach и map — это два метода массивов, предназначенные для итерации по элементам массива, но они используются в разных целях и работают по-разному.

forEach

- Назначение: Используется для выполнения заданной функции один раз для каждого элемента в массиве. Основное назначение — выполнение побочных эффектов (например, вывод в консоль, запись в файл и т.д.).
- Возвращаемое значение: Не возвращает никакого значения (то есть возвращает undefined). Это означает, что результат его работы нельзя присвоить переменной.
- Изменение оригинального массива: Может изменять оригинальный массив, если внутри функции-коллбэка производятся изменения его элементов.

const array1 = ['a', 'b', 'c'];
array1.forEach(element => console.log(element));
// Выводит каждый элемент в консоль

map

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

const array2 = [1, 4, 9];
const map1 = array2.map(x => x * 2);
console.log(map1);
// Выводит новый массив [2, 8, 18]

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

- Цель использования: forEach для выполнения операций или побочных эффектов на каждом элементе массива; map для создания нового массива на основе обработки каждого элемента исходного массива.
- Возвращаемое значение: forEach возвращает undefined, в то время как map возвращает новый массив.
- Изменение исходного массива: forEach может изменять исходный массив, если это предусмотрено логикой коллбэка; map не изменяет исходный массив, а создаёт новый.

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

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти к Списку всех вопросов на Frontend Developer. Ставь 👍 если нравится контент.

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

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

Методология BEM (Block, Element, Modifier) — это популярный подход к организации CSS классов и структуры HTML. Эта методология направлена на упрощение разработки и поддержки больших и масштабируемых проектов за счет введения строгой структуры для классов CSS.

Компоненты BEM:

1️⃣ Блок (Block): Независимый компонент страницы, который может быть повторно использован. В нем описывает сущность, которая имеет смысл сама по себе (например, кнопка, меню).
2️⃣ Элемент (Element): Часть блока, которая не может использоваться отдельно от него. Элементы связываются с блоками через двойное подчеркивание (__). Например, пункт меню (menu__item) является элементом блока меню.
3️⃣ Модификатор (Modifier): Свойство, которое изменяет внешний вид или поведение блока или элемента. Модификаторы обозначаются двойным дефисом (--). Например, активное состояние кнопки может быть представлено как button--active.

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

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

<div class="menu">
  <div class="menu__item menu__item--active">Главная</div>
  <div class="menu__item">Новости</div>
</div>

В этом примере menu является блоком, menu__item — элементом этого блока, а menu__item--active — модификатором элемента, указывающим на его активное состояние.

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

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти к Списку всех вопросов на Frontend Developer. Ставь 👍 если нравится контент.

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