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

Map и Set — это структуры данных, введённые в ES6 (ECMAScript 2015), которые расширяют возможности стандартных объектов и массивов, предоставляя более специализированные и гибкие способы хранения данных.

Map

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

Основные методы:
- new Map() — создаёт новую коллекцию.
- map.set(key, value) — устанавливает значение value для ключа key.
- map.get(key) — возвращает значение, ассоциированное с ключом key.
- map.has(key) — возвращает true, если key существует в коллекции.
- map.delete(key) — удаляет элемент по ключу key.
- map.clear() — удаляет все элементы из коллекции.
- map.size — возвращает количество элементов в коллекции.

let map = new Map();
map.set('1', 'str1');    // строка в качестве ключа
map.set(1, 'num1');      // цифра как ключ
map.set(true, 'bool1');  // булево значение как ключ

console.log(map.get(1)); // num1
console.log(map.get('1')); // str1
console.log(map.size); // 3

Set

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

Основные методы:
- new Set() — создаёт новую коллекцию.
- set.add(value) — добавляет значение value в коллекцию, если его там ещё нет.
- set.delete(value) — удаляет значение value из коллекции.
- set.has(value) — возвращает true, если значение value присутствует в коллекции.
- set.clear() — удаляет все элементы из коллекции.
- set.size — возвращает количество элементов в коллекции.

let set = new Set();

let john = { name: "John" };
let pete = { name: "Pete" };
let mary = { name: "Mary" };

// посещения, некоторые пользователи заходят многократно
set.add(john);
set.add(pete);
set.add(mary);
set.add(john);
set.add(mary);

console.log(set.size); // 3

for (let user of set) {
  console.log(user.name); // John, Pete, Mary
}

Map и Set представляют собой мощные структуры данных, которые делают код более чистым и читаемым, а также предоставляют удобные методы для работы с данными. Map идеально подходит для хранения пар ключ/значение с уникальными ключами, в то время как Set используется для хранения уникальных значений.

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

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

Каким способом можно объявить переменные, в чем отличия ?
Спросят с вероятностью 17%

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

1️⃣ var:

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

2️⃣ let:

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

3️⃣ const:

- Область видимости: Как и let, имеет блочную область видимости.
- Поднятие (Hoisting): Поднимается так же, как и let, с теми же ограничениями доступа до объявления.
- Перезаписываемость: Нельзя изменить значение. Однако, если переменная ссылается на объект или массив, то можно изменить содержимое объекта или массива, но не саму ссылку.
- Необходима инициализация: При объявлении переменной с const необходимо сразу же инициализировать её значением.

// Использование var
var x = 5;
console.log(x); // 5
var x = 10; // Переопределение возможно
console.log(x); // 10

// Использование let
let y = "hello";
console.log(y); // hello
y = "world"; // Переопределение значения допустимо
console.log(y); // world
// let y = "test"; // Ошибка: Identifier 'y' has already been declared

// Использование const
const z = { message: "constant" };
console.log(z.message); // constant
z.message = "changed"; // Изменение свойства объекта допустимо
console.log(z.message); // changed
// const z = "new"; // Ошибка: Identifier 'z' has already been declared

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

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

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

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

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

Основные ветки:

- master: Содержит стабильную версию кода, готовую к выпуску (release).
- develop: Основная ветка для разработки, содержит последние изменения кода для следующего выпуска.

Вспомогательные ветки:

- feature: Для разработки новых функций. Каждая ветка создается для работы над определенной задачей и в конечном итоге сливается с develop.
- release: Предназначенные для подготовки новых выпусков продукта. В них может вестись работа по исправлению ошибок, документации и другим задачам, связанным с выпуском. После завершения подготовки ветка release сливается с master и с develop.
- hotfix: Для быстрого исправления ошибок в продакшен-версии. Создаются от ветки master, и после исправления сразу же сливаются обратно в master и develop.

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

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

Недостатки:

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

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

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

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

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

HTTP (HyperText Transfer Protocol) — это протокол передачи гипертекста, основной протокол для передачи данных. Он используется для загрузки веб-страниц с сервера на клиентский браузер, а также для отправки данных от клиента к серверу. Является протоколом прикладного уровня модели OSI (Open Systems Interconnection) и работает поверх протокола TCP/IP.

Основные характеристики HTTP:

✅ Безсостоянийность (Stateless): Не сохраняет информацию о состоянии между различными запросами. Каждый запрос обрабатывается независимо, без знания предыдущих запросов. Это означает, что информация о состоянии должна передаваться отдельно, если она нужна для последовательных запросов.
✅ Простота: Предоставляет простой синтаксис для запросов и ответов, что облегчает разработку веб-приложений.
✅ Расширяемость: Позволяет легко добавлять новые методы и заголовки для запросов и ответов, что делает его гибким и адаптируемым к новым требованиям и технологиям.

Как работает HTTP:

1️⃣ Клиент (обычно веб-браузер) отправляет HTTP-запрос к серверу. Запрос может быть сделан при вводе URL в адресную строку браузера, при нажатии на ссылку на веб-странице или при отправке формы. Запрос включает в себя метод (например, GET для запроса данных или POST для отправки данных), URL, версию протокола HTTP, необходимые заголовки и тело запроса (для методов, передающих данные, таких как POST).
2️⃣ Сервер обрабатывает полученный запрос и отправляет обратно HTTP-ответ, который включает в себя статус выполнения (код состояния), заголовки ответа и тело ответа (обычно HTML-документ, изображение, данные JSON и т.д.).
3️⃣ Клиент обрабатывает ответ от сервера. Например, браузер может отобразить HTML-страницу или обновить часть текущей страницы, если это был AJAX-запрос.

Методы HTTP:

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

- GET: Запрос содержимого указанного ресурса.
- POST: Отправка данных на сервер для создания нового ресурса.
- PUT: Обновление существующего ресурса данными из запроса.
- DELETE: Удаление указанного ресурса.
- HEAD: Запрос заголовков для указанного ресурса.
- OPTIONS: Запрос поддерживаемых методов для ресурса.

Версии HTTP:

Существует несколько версий, включая 1.0, 1.1, и 2. Каждая новая версия протокола вносит улучшения в эффективность, безопасность и скорость передачи данных.

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

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

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

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

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

Основные хуки:

1️⃣ useState
Позволяет добавлять состояние к функциональным компонентам.

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

2️⃣ useEffect
Даёт возможность выполнять побочные эффекты в компоненте, такие как обращения к API, подписки или таймеры.

 useEffect(() => {
       document.title = Вы нажали ${count} раз;
     }, [count]); // Зависимость от состояния count

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

const value = useContext(MyContext);

Дополнительные хуки:

1️⃣ useReducer
Альтернатива useState для более сложного управления состоянием, использует концепцию редьюсера для обработки сложных изменений состояния.

     const [state, dispatch] = useReducer(reducer, initialState);

2️⃣ useCallback
Возвращает мемоизированный колбэк, который изменяется только если изменяются зависимости.

     const memoizedCallback = useCallback(() => {
       doSomething(a, b);
     }, [a, b]);

3️⃣ useMemo
Возвращает мемоизированное значение, пересчитывается только при изменении зависимостей.

     const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

4️⃣ useRef
Возвращает изменяемый ref-объект, который можно использовать для доступа к DOM-элементам или хранения любого мутируемого значения.

     const myRef = useRef(initialValue);

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

     useImperativeHandle(ref, () => ({
       focus: () => {
         myTextInput.current.focus();
       }
     }));

6️⃣ useLayoutEffect
Похож на useEffect, но выполняется синхронно после всех изменений DOM. Используется для чтения макета из DOM и реагирования на эти изменения синхронно.

     useLayoutEffect(() => {
       // Измерения или взаимодействия с DOM
     }, [dependencies]);

7️⃣ useDebugValue
Может использоваться для отображения метки для пользовательских хуков в React DevTools.

useDebugValue(value);

Основные хуки (useState, useEffect, useContext) позволяют добавлять состояние, работать с побочными эффектами и использовать контекст в функциональных компонентах

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

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

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

Что такое 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. Ставь 👍 если нравится контент.

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