#javascript #react

📹 50 вопросов для Middle Frontend

Собеседование на позицию Middle Frontend с акцентом на оптимизацию в React, Webpack, SOLID, паттерны, ООП и TypeScript.

Узнайте, какие вопросы помогут вам пройти собеседование на Middle Frontend разработчика.


➡️ Список вопросов с ответами

📹 Видео

💬 Новости

🎓 Платформа

#javascript

🔒 Классы в JavaScript: Магия под капотом

JavaScript классы — это не просто синтаксический сахар, а целый мир внутренних механизмов и прототипного наследования. Давайте разберемся, что происходит "под капотом", когда вы создаете класс.


👀Прототипы: Корень всего

Прежде чем перейти к классам, вспомним про прототипы. В JavaScript классы — это по сути красивая обертка над прототипным наследованием.

// Старый способ до классов
function User(name) {
  this.name = name;
}

User.prototype.sayHi = function() {
  console.log(`Привет, я ${this.name}`);
};

const user = new User('Иван');
user.sayHi(); // Работает так же, как и современный класс

👀Класс под микроскопом

Когда вы пишете современный класс:

class User {
  constructor(name) {
    this.name = name;
  }

  sayHi() {
    console.log(`Привет, я ${this.name}`);
  }

  static createAnonymous() {
    return new User('Аноним');
  }
}

Внутри происходит примерно следующее:

1. Конструктор: Метод constructor превращается в функцию-конструктор.
2. Методы экземпляра: Добавляются в prototype класса.
3. Статические методы: Привязываются непосредственно к классу.


👀Магия создания объекта

Когда вы пишете new User('Иван'), происходит:

1. Создается новый объект
2. Контекст this привязывается к этому объекту
3. Вызывается конструктор
4. Объект возвращается (если не указано иное)


👀Наследование: Под капотом

class Employee extends User {
  constructor(name, position) {
    super(name);  // Вызов родительского конструктора
    this.position = position;
  }
}

При наследовании JavaScript:
- Устанавливает прототипную цепочку
- Копирует статические методы
- Сохраняет связь между классами


👀Тонкости и подводные камни

1. Классы — функции:

class MyClass {}
console.log(typeof MyClass); // "function"

2. Классы не всплывают:

const obj = new MyClass(); // ReferenceError
class MyClass {}

3. Методы не перечислимы по умолчанию:

class Example {
  method() {} // Не будет виден в for...in
}

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


Ресурсы для изучения:

➡️ Вопрос

💬 Новости

🎓 Платформа

#javascript

🔢Основные методы массивов в JavaScript

Методы массивов позволяют удобно работать с данными, изменять, фильтровать, сортировать и трансформировать их. Разберем основные:


✔ forEach – перебирает массив без возврата значения:

[1, 2, 3].forEach(num => console.log(num * 2)); 
// 2, 4, 6

✔ map – создает новый массив с измененными значениями:

const doubled = [1, 2, 3].map(num => num * 2);  
console.log(doubled); // [2, 4, 6]

✔ filter – возвращает новый массив с элементами, удовлетворяющими условию:

const even = [1, 2, 3, 4].filter(num => num % 2 === 0);  
console.log(even); // [2, 4]

✔ reduce – сводит массив к одному значению:

const sum = [1, 2, 3, 4].reduce((acc, num) => acc + num, 0);  
console.log(sum); // 10

✔ find – возвращает первый элемент, подходящий под условие:

const found = [1, 2, 3, 4].find(num => num > 2);  
console.log(found); // 3

✔ some / every – проверяют, удовлетворяют ли элементы условию:

console.log([1, 2, 3].some(num => num > 2)); // true
console.log([1, 2, 3].every(num => num > 0)); // true

✔ sort – сортирует массив (по умолчанию как строки):

const sorted = [3, 1, 4, 2].sort((a, b) => a - b);  
console.log(sorted); // [1, 2, 3, 4]

✔ reverse – меняет порядок элементов на обратный:

console.log([1, 2, 3].reverse()); // [3, 2, 1]

Какие методы используете чаще всего? Делитесь в комментариях)


Ресурсы для изучения:

➡️ Вопрос

💬 Новости

🎓 База вопросов

#JavaScript

🚩 Какие основные отличия Cookies и Session Storage?

Определения
- Cookies: Небольшие текстовые файлы, которые сохраняются браузером на устройстве пользователя и отправляются на сервер с каждым HTTP-запросом.
- Session Storage: Механизм хранения данных в браузере, доступный только в пределах вкладки/окна в течение сессии.


1️⃣ Время жизни
- Cookies: С expires или max-age живут после закрытия браузера, без них - удаляются после сессии
- Session Storage: Существует только в рамках открытой вкладки


2️⃣ Объём
- Cookies: ~4 КБ на домен (все куки суммарно)
- Session Storage: ~5 МБ на домен


3️⃣ Доступность
- Cookies: Автоматически отправляются с каждым HTTP-запросом
- Session Storage: Доступен только через JavaScript на клиенте


5️⃣ Использование
- Cookies: Аутентификация, трекинг пользователей
- Session Storage: Временные данные в рамках вкладки, кэширование


5️⃣ Безопасность
- Cookies: Уязвимы к CSRF (можно защитить флагами)
- Session Storage: Не уязвим к CSRF, но уязвим к XSS-атакам


🔎🔎🔎🔎🔄

#️⃣Вопрос

#️⃣Новости

#️⃣База вопросов

#JavaScript

🚩 Как избежать слишком частых запросов к серверу при реализации поиска с автокомплитом?


Debounce - отправляет запрос только после паузы в вводе (пример кода на картинке)

Throttle - ограничивает частоту запросов (например, не чаще чем раз в 500 мс) (пример кода на картинке)


Разница:
- Debounce - лучше для автокомплита (ждет окончания ввода).
- Throttle - полезен при скролле или resize (гарантирует периодические вызовы).

Пример с Lodash (библиотека с готовыми функциями):

import { debounce } from 'lodash';
searchInput.addEventListener('input', debounce(fetchResults, 300));

🔎🔎🔎🔎🔄

#️⃣Вопрос

#️⃣Новости

#️⃣База вопросов

#JavaScript

🚩Как защитить данные в LocalStorage от стороннего JS?

LocalStorage доступен всем скриптам на той же странице, поэтому злонамеренный код (например, XSS-атака) может прочитать или изменить его данные.

Полной защиты нет, но можно снизить угрозы:


Основные методы защиты:

🖇Не хранить конфиденциальные данные — токены, пароли не должны попадать в LocalStorage

🖇Шифровать данные перед записью — например, с помощью CryptoJS

🖇Использовать HttpOnly-куки — для критичных данных, они недоступны из JavaScript

🖇Content Security Policy (CSP) — ограничивает выполнение сторонних скриптов


Дополнительные меры защиты:

🖇Проверка целостности данных — добавление контрольных сумм

🖇Время жизни данных — автоматическое удаление устаревших данных

🖇Валидация при чтении — проверка формата и структуры данных

🖇Регулярная очистка — удаление неиспользуемых данных


❗️Помните: LocalStorage — это удобство, а не сейф. Для действительно важных данных используйте серверную сессию и HttpOnly куки.


🔎🔎🔎🔎🔄

#⃣Вопрос

#⃣Новости

#⃣База вопросов

#JavaScript

🚩Расскажите про все методы Promise?


Основные методы экземпляра:

🖇then(onFulfilled, onRejected) — используется для обработки успешного выполнения промиса или ошибок

🖇catch(onRejected) — ловит ошибки, которые произошли в промисе или в одном из последующих then()

🖇finally(onFinally) — выполняется в любом случае, когда промис завершен (успешно или с ошибкой)


Статические методы Promise:

🖇Promise.all — принимает массив промисов и возвращает новый промис, который выполнится только тогда, когда все переданные промисы завершатся. Если хотя бы один промис будет отклонён, Promise.all отклонит результат

🖇Promise.race— возвращает промис, который выполнится или будет отклонён первым среди переданных промисов

🖇Promise.allSettled — возвращает новый промис, который выполнится, когда все переданные промисы завершатся (успешно или с ошибкой), и возвращает массив объектов с результатами

🖇Promise.any— возвращает первый успешный промис среди переданных, игнорируя отклоненные промисы


🔎🔎🔎🔎🔄

#⃣Вопрос

#⃣Новости

#⃣База вопросов

#JavaScript

🚩Как получать данные в реальном времени?

Чат, уведомления, лайв-обновления — как сделать так, чтобы данные приходили мгновенно?


🔴WebSocket - полноценная двусторонняя связь

const socket = new WebSocket('wss://example.com/ws');

socket.onopen = () => console.log('Соединение установлено');
socket.onmessage = (event) => console.log('Получено:', event.data);
socket.onclose = () => console.log('Соединение закрыто');

// Отправка данных
socket.send('Привет, сервер!');

✅Плюсы: мгновенная передача, бинарные данные
❌Минусы: сложнее настройка сервера


🔴Server-Sent Events (SSE) - поток от сервера

const eventSource = new EventSource('/updates');
eventSource.onmessage = (event) => {
  console.log('Новое сообщение:', event.data);
};

Сервер (Node.js):

app.get('/updates', (req, res) => {
  res.setHeader('Content-Type', 'text/event-stream');
  setInterval(() => {
    res.write(`data: ${new Date().toISOString()}\n\n`);
  }, 1000);
});

✅Плюсы: простота, автопереподключение
❌Минусы: только сервер → клиент


🔴Long Polling - запрос с ожиданием

function fetchUpdates() {
  fetch('/poll')
    .then(response => response.json())
    .then(data => {
      console.log('Данные:', data);
      fetchUpdates(); // Новый запрос
    });
}

✅ Плюсы: работает без WebSocket
❌ Минусы: высокая нагрузка на сервер


🔴Когда что использовать?

- WebSocket — чаты, игры, совместная работа
- SSE — уведомления, новостные ленты, мониторинг
- Long Polling — простые обновления, фоллбэк для старых браузеров


🔎🔎🔎🔎🔄

#⃣Вопрос

#⃣Новости

#⃣База вопросов

#JavaScript

🚩Как использовать Service Workers для реализации офлайн-приложений и кэширования ресурсов?

Ваш сайт может работать без интернета и загружаться мгновенно! Service Workers делают это возможным.

🟣Что это такое?

Service Worker — умный помощник в браузере, который:
- Сохраняет файлы сайта на устройстве пользователя
- Перехватывает запросы к серверу
- Отдает файлы из памяти вместо скачивания


🟣Как работает?

Первый визит: скачивает и сохраняет важные файлы
Повторные визиты: отдает файлы мгновенно из памяти
Без интернета: сайт работает как обычно!

// 1. Регистрация
navigator.serviceWorker.register('/service-worker.js');

// 2. Сохранение файлов
cache.addAll(['/index.html', '/styles.css', '/script.js']);

// 3. Перехват запросов
caches.match(request) || fetch(request);

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

Для пользователей:
- Мгновенная загрузка
- Работа без интернета
- Экономия трафика

Для бизнеса:
- Довольные пользователи
- Меньше отказов
- Стабильность


🟣С чего начать?

1. Определите важные страницы
2. Добавьте простой Service Worker
3. Протестируйте офлайн-режим
4. Усложняйте постепенно


🔎🔎🔎🔎🔄

#⃣Вопрос

#⃣Новости

#⃣База вопросов

#JavaScript

This - одна из самых популярных тем на собесах! Рассмотрим за 15 минут 💎

🔎🔎🔎🔎🔄

#⃣Видео

#⃣Новости

#⃣База вопросов