Frontend | Вопросы собесов

Реклама для бизнеса любого уровня в Яндекс Директе Создайте эффективную рекламную кампанию с алгоритмами Яндекс Директа 👌 Начните прямо сейчас ⚡ Зарегистрироваться #реклама direct.yandex.ru О рекламодателе

Как работает promiseall ? Спросят с вероятностью 7% Promise.all — это метод, который позволяет обрабатывать несколько промисов одновременно и возвращает один промис, который завершится, когда все переданные промисы будут выполнены (или когда один из них будет отклонен). Основные особенности: 1️⃣Параллельное выполнение промисов: Promise.all принимает массив промисов и выполняет их параллельно. Он завершится успешно, когда все промисы в массиве будут выполнены. 2️⃣Возвращает один промис: Метод возвращает один промис, который: ✅Выполняется с массивом результатов, если все промисы в массиве были успешно выполнены. ✅Отклоняется с причиной отклонения первого промиса, который был отклонен. 3️⃣Отклонение при первой ошибке: Если один из промисов в массиве отклоняется, Promise.all сразу отклоняет весь промис, не дожидаясь выполнения остальных. Синтаксис

Promise.all(iterable);

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

const promise1 = new Promise((resolve) => setTimeout(resolve, 100, 'First'));
const promise2 = new Promise((resolve) => setTimeout(resolve, 200, 'Second'));
const promise3 = new Promise((resolve) => setTimeout(resolve, 300, 'Third'));

Promise.all([promise1, promise2, promise3])
  .then((results) => {
    console.log(results); // ['First', 'Second', 'Third']
  })
  .catch((error) => {
    console.error('One of the promises failed:', error);
  });

Если один из промисов отклоняется, Promise.all отклоняет весь результат.

const promise1 = new Promise((resolve) => setTimeout(resolve, 100, 'First'));
const promise2 = new Promise((resolve, reject) => setTimeout(reject, 200, 'Error in Second'));
const promise3 = new Promise((resolve) => setTimeout(resolve, 300, 'Third'));

Promise.all([promise1, promise2, promise3])
  .then((results) => {
    console.log(results); // This line will not be executed
  })
  .catch((error) => {
    console.error('One of the promises failed:', error); // 'Error in Second'
  });

Promise.all также можно использовать с async/await для более удобной работы с асинхронным кодом.

const promise1 = new Promise((resolve) => setTimeout(resolve, 100, 'First'));
const promise2 = new Promise((resolve) => setTimeout(resolve, 200, 'Second'));
const promise3 = new Promise((resolve) => setTimeout(resolve, 300, 'Third'));

async function runPromises() {
  try {
    const results = await Promise.all([promise1, promise2, promise3]);
    console.log(results); // ['First', 'Second', 'Third']
  } catch (error) {
    console.error('One of the promises failed:', error);
  }
}

runPromises();

Promise.all принимает массив промисов и возвращает один промис, который выполняется, когда все промисы в массиве выполнены успешно, или отклоняется, если любой из промисов отклонен. Он позволяет обрабатывать несколько асинхронных операций параллельно и возвращает массив результатов всех промисов. 🔥 ТОП ВОПРОСОВ С СОБЕСОВ 🔒 База собесов | 🔒 База тестовых

Jobski - твой помощник при поиске работы в IT Сервис индивидуально подбирает вакансии, учитывая ваш опыт, навыки и стек технологий. Узнать больше #реклама jobski.ru О рекламодателе

Что такое falsy значения ? Спросят с вероятностью 7% "falsy" (ложные) значения — это значения, которые при приведении к логическому типу (Boolean) дают false. Эти значения часто используются в условиях (например, в if выражениях) для проверки истинности или ложности. Основные значения: 1️⃣false: Само значение false является ложным.

  if (false) {
     console.log('Это не выполнится');
   }
   

2️⃣0 и -0: Нулевые значения считаются ложными.

if (0) {
     console.log('Это не выполнится');
   }

if (-0) {
     console.log('Это тоже не выполнится');
   }

3️⃣"" (пустая строка): Пустая строка считается ложной.

if ("") {
     console.log('Это не выполнится');
   }

4️⃣null: Значение null также является ложным.

if (null) {
     console.log('Это не выполнится');
   }

5️⃣undefined: Значение undefined является ложным.

if (undefined) {
     console.log('Это не выполнится');
   }

6️⃣NaN (Not-a-Number): Специальное значение NaN, которое обозначает нечисловое значение, считается ложным.

if (NaN) {
     console.log('Это не выполнится');
   }

Примеры 1️⃣Условные операторы:

const value = 0;

   if (!value) {
     console.log('value является falsy'); // Это выполнится
   }

2️⃣Логические операторы: Логические операторы могут быть использованы для проверки на "falsy" значения.

const value = null;
   const result = value || 'Значение по умолчанию';
   console.log(result); // 'Значение по умолчанию'

3️⃣Функции с параметрами по умолчанию: Функции могут использовать "falsy" значения для предоставления параметров по умолчанию.

function greet(name) {
     name = name || 'гость';
     console.log('Привет, ' + name);
   }

   greet(); // Привет, гость
   greet('Алиса'); // Привет, Алиса

"Falsy" значения — это значения, которые приводятся к false в логическом контексте. Основные "falsy" значения: false, 0, -0, "", null, undefined, NaN. Эти значения часто используются в условиях для проверки их истинности или ложности. 🔥 ТОП ВОПРОСОВ С СОБЕСОВ 🔒 База собесов | 🔒 База тестовых

Запустите рекламу в телеграм-каналах с Яндекс Директом Перфоманс-реклама теперь в телеграм-каналах ⚡ Яндекс Директ знает, как привлечь целевую аудиторию 💰👌 Попробовать #реклама yandex.ru О рекламодателе

Как можно оптимизировать перерисовки ? Спросят с вероятностью 7% Оптимизация перерисовок (или "repaints" и "reflows") в веб-приложениях является важной задачей для обеспечения высокой производительности и плавности интерфейса. Вот несколько методов и стратегий, которые можно использовать для оптимизации перерисовок: 1️⃣Минимизация количества изменений в DOM ✅Используйте Document Fragments: Вместо многократного добавления элементов в DOM, добавляйте их в DocumentFragment, а затем добавьте фрагмент в DOM одним действием.

    const fragment = document.createDocumentFragment();
  for (let i = 0; i < 100; i++) {
    const div = document.createElement('div');
    div.textContent = `Item ${i}`;
    fragment.appendChild(div);
  }
  document.body.appendChild(fragment);
  

✅Batch DOM updates:

Группируйте несколько изменений DOM в одно действие. Это уменьшает количество вызовов для перерисовки. 2️⃣Избегайте синхронных изменений стилей и компоновки ✅CSS класс: Вместо изменения нескольких отдельных стилей, измените один класс.

    element.style.width = '100px';
  element.style.height = '100px';
  element.style.backgroundColor = 'red';

Вместо этого используйте класс:

    .new-style {
    width: 100px;
    height: 100px;
    background-color: red;
  }
  

✅Избегайте чтения свойств, вызывающих перерисовку: Чтение некоторых свойств, таких как offsetHeight или offsetWidth, после изменения стилей, заставляет браузер выполнять немедленную перерисовку. Избегайте таких действий. 3️⃣Используйте CSS для анимаций ✅CSS анимации и трансформации: Используйте CSS для анимаций и трансформаций, так как они могут выполняться на уровне GPU, что снижает нагрузку на основной поток.

    .animated {
    transition: transform 0.3s;
    transform: translateX(100px);
  }
  

4️⃣Дебаунс и троттлинг ✅Debouncing и Throttling: Используйте дебаунс и троттлинг для событий, которые происходят часто (например, resize или scroll), чтобы уменьшить количество вызовов обработчиков событий.

    function debounce(func, wait) {
    let timeout;
    return function(...args) {
      clearTimeout(timeout);
      timeout = setTimeout(() => func.apply(this, args), wait);
    };
  }

  window.addEventListener('resize', debounce(() => {
    console.log('Resized!');
  }, 200));
  

5️⃣Виртуальный DOM ✅Использование библиотек с виртуальным DOM: Библиотеки, такие как React, используют виртуальный DOM, чтобы минимизировать количество изменений в реальном DOM, что значительно улучшает производительность. 6️⃣Избегайте использования layout thrashing ✅Layout Thrashing: Это происходит, когда чередуются операции записи и чтения из DOM, что вызывает множественные перерисовки.

    const height = element.offsetHeight;
  element.style.height =out;
    return func
  

Сгруппируйте чтения и записи отдельно:

const height = element.offsetHeight;
  element.style.height = ${height + 10}px;

7️⃣Избегайте глубоких вложенностей в DOM ✅Меньше вложенностей: Старайтесь минимизировать глубину вложенности элементов, так как это может усложнить перерисовку и компоновку. 8️⃣Оптимизация стилей ✅Уменьшите количество правил и селекторов: Сложные CSS-селекторы могут замедлить работу браузера. Используйте более простые селекторы и старайтесь избегать вложенных правил. 9️⃣Использование will-change ✅will-change: Используйте свойство will-change, чтобы заранее сообщить браузеру о планируемых изменениях, что позволяет оптимизировать рендеринг.

.will-change-transform {
    will-change: transform;
  }

Для оптимизации перерисовок в веб-приложениях, минимизируйте изменения в DOM, используйте CSS для анимаций, применяйте дебаунс и троттлинг для событий, избегайте layout thrashing, уменьшайте глубину вложенностей в DOM и используйте библиотеки с виртуальным DOM. Эти методы помогают улучшить производительность и плавность интерфейса. 🔥 ТОП ВОПРОСОВ С СОБЕСОВ 🔒 База собесов | 🔒 База тестовых

Бакалавриат и специалитет Президентской академии! ✅ Важное для абитуриентов! 🎓 🎓Хотите стать студентом одного из лучших университетов страны? Тогда не упустите шанс поступить на программы бакалавриата и специалитета в Президентскую академию (РАНХиГС). На выбор более 100 программ обучения, стажировки и практики в органах государственной власти и крупных коммерческих компаниях, участие в реальных проектах во время обучения, стипендии и общежития. Создавайте будущее страны вместе с РАНХиГС. Подробности о поступлении и об Академии вы найдете на нашем сайте. Успейте подать заявку! Узнать больше #реклама ranepa.ru О рекламодателе

В чём разница между event.Preventdefault и event.Stoppropagation ? Спросят с вероятностью 7% event.preventDefault() и event.stopPropagation() — это два метода, которые используются для управления поведением событий в JavaScript. Они выполняют разные задачи и полезны в различных сценариях. event.preventDefault() Предотвращает поведение браузера по умолчанию для события. Это может быть полезно, когда вы хотите отменить действие, которое обычно происходит при определенном событии. Примеры: 1️⃣Отмена отправки формы:

document.querySelector('form').addEventListener('submit', function(event) {
  event.preventDefault();
  console.log('Форма не отправлена!');
});

2️⃣Отмена перехода по ссылке:

document.querySelector('a').addEventListener('click', function(event) {
  event.preventDefault();
  console.log('Переход по ссылке отменен!');
});

event.stopPropagation() Предотвращает дальнейшее распространение события по дереву DOM. Это полезно, когда вы хотите остановить событие от всплытия (bubbling) или захвата (capturing) к родительским элементам. Примеры: 1️⃣Остановка всплытия события:

document.querySelector('.child').addEventListener('click', function(event) {
  event.stopPropagation();
  console.log('Клик на child');
});

document.querySelector('.parent').addEventListener('click', function() {
  console.log('Клик на parent');
});

В этом примере клик на .child элемент не вызовет обработчик клика на .parent элементе. Сравнение `event.preventDefault()`: ✅Предотвращает действие браузера по умолчанию. ✅Примеры: отмена отправки формы, отмена перехода по ссылке. efault() и event.stopPropag ✅Останавливает дальнейшее распространение события по дереву DOM. ✅Примеры: остановка всплытия события от дочернего элемента к родительскому. 🔥 ТОП ВОПРОСОВ С СОБЕСОВ 🔒 База собесов | 🔒 База тестовых

Требуются парни и девушки в возрасте 19–40 лет, желающие работать в сфере IT. Опыт в программировании не нужен. Завтра запускаем бесплатный онлайн-интенсив по Frontend-разработке, где будем показывать, как разрабатывать сайты и веб-приложения. За 7 дней обучения ты: 1. Создашь полноценный веб-сайт на HTML и CSS; 2. Оживишь страницу с помощью JavaScript; 3. Используешь фронтенд-фреймворк Angular; 4. Подключишь Backend и загрузишь сайт на хостинг; 5. Получишь советы по доработке своего проекта; 6. Узнаешь сколько можно зарабатывать и как работать; 7. Получишь в подарок чек-лист «45 мест для поиска работы». А главное, ты увидишь, что разрабатывать сайты и приложения не так сложно, как кажется. И поймёшь, как тебе развиваться в этой профессии, чтобы уже в следующем году зарабатывать от 1000$ на вёрстке сайтов. 👉 Проскочить на интенсив бесплатно 🔥 С нас обучение, практика и помощь с выходом на фриланс.

ТОП-4 Курса по UX/UI-дизайну по версии Tutortop Tutortop — маркетплейс курсов №1 по количеству школ-партнеров, курсов и реальных отзывов студентов. Освойте востребованную профессию с нуля за 4-5 месяцев. Соберите портфолио из 10+ проектов. Выйдите на заработок 100 000₽+ и работайте удаленно в гибком графике. Выбрать #реклама 16+ tutortop.ru О рекламодателе

В чём разница между сессией и куком ? Спросят с вероятностью 7% Сессии и куки — это два различных способа хранения данных в веб-приложениях, и у них есть свои особенности и случаи применения. Вот основные различия между ними: Куки (Cookies) 1️⃣Хранение данных на клиенте: Куки хранятся в браузере пользователя. Это небольшие кусочки данных, которые веб-сервер отправляет браузеру, и браузер сохраняет их и отправляет обратно на сервер с каждым запросом. 2️⃣Долговременное хранение: Куки могут иметь установленный срок действия и могут сохраняться на длительное время (например, несколько дней, недель или даже лет), если это явно указано при их создании. 3️⃣Использование для идентификации: Куки часто используются для сохранения информации о пользователе, такой как предпочтения, идентификаторы сессий или данные для авторизации. 4️⃣Размер и количество ограничены: Обычно размер одной куки ограничен 4KB, и браузеры могут ограничивать количество куки (например, до 20-30 на один домен). 5️⃣Безопасность: Куки могут быть подвержены угрозам безопасности, таким как кража куки (cookie theft) или атаки с подделкой межсайтовых запросов (CSRF). Использование флага HttpOnly помогает защитить куки от доступа через JavaScript, а флаг Secure гарантирует их передачу только по HTTPS. Пример создания куки:

document.cookie = "username=JohnDoe; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/";

Сессии (Sessions) 1️⃣Хранение данных на сервере: Данные сессии хранятся на сервере, а не в браузере пользователя. Браузер хранит только идентификатор сессии (обычно в куке), который используется для связи данных сессии с конкретным пользователем. 2️⃣Кратковременное хранение: Сессии, как правило, предназначены для хранения данных в течение одного сеанса работы пользователя (например, до закрытия браузера или истечения времени бездействия). Данные сессии удаляются, когда сессия заканчивается. 3️⃣Использование для хранения состояния: Сессии используются для хранения состояния пользователя между запросами, таких как состояние авторизации, содержимое корзины покупок и другие временные данные. 4️⃣Размер и масштабируемость: Поскольку данные сессии хранятся на сервере, размер их ограничен только серверными ресурсами. Это позволяет хранить больше данных по сравнению с куки. 5️⃣Безопасность: Сессии обычно считаются более безопасными, так как данные не передаются с каждым запросом и хранятся на сервере. Однако нужно заботиться о безопасности идентификаторов сессий, чтобы предотвратить атаки, такие как угон сессий (session hijacking). Пример создания сессии на сервере (с использованием Express.js):

const express = require('express');
const session = require('express-session');
const app = express();

app.use(session({
  secret: 'mySecret',
  resave: false,
  saveUninitialized: true,
  cookie: { secure: true }
}));

app.get('/', (req, res) => {
  if (req.session.views) {
    req.session.views++;
    res.send(`Number of views: ${req.session.views}`);
  } else {
    req.session.views = 1;
    res.send('Welcome to the session demo. Refresh!');
  }
});

app.listen(3000);

✅Куки хранятся в браузере пользователя, могут быть долговременными и используются для хранения небольших данных, таких как идентификаторы и предпочтения. ✅Сессии хранятся на сервере, обычно кратковременные и используются для хранения состояния пользователя между запросами. 🔥 ТОП ВОПРОСОВ С СОБЕСОВ 🔒 База собесов | 🔒 База тестовых

С помощью чего скопировал бы объект ? Спросят с вероятностью 7% Есть несколько способов скопировать объект. Важно понимать разницу между поверхностным (shallow) и глубоким (deep) копированием. Поверхностная копия копирует только сам объект и его непосредственные свойства, в то время как глубокая копия копирует весь объект и все его вложенные объекты. Поверхностное копирование 1️⃣Object.assign Метод Object.assign копирует все перечисляемые свойства из одного или более исходных объектов в целевой объект.

const original = { a: 1, b: 2 };
const copy = Object.assign({}, original);
console.log(copy); // { a: 1, b: 2 }

2️⃣Оператор расширения (spread operator) Оператор расширения (...) также можно использовать для создания поверхностной копии объекта.

const original = { a: 1, b: 2 };
const copy = { ...original };
console.log(copy); // { a: 1, b: 2 }

Глубокое копирование 1️⃣JSON.parse и JSON.stringify Этот метод преобразует объект в строку JSON, а затем обратно в объект, создавая тем самым глубокую копию. Однако он имеет ограничения, такие как невозможность копирования функций и потеря undefined значений.

const original = { a: 1, b: { c: 2 } };
const copy = JSON.parse(JSON.stringify(original));
console.log(copy); // { a: 1, b: { c: 2 } }

2️⃣Рекурсивная функция Можно написать свою рекурсивную функцию для глубокого копирования объекта.

function deepCopy(obj) {
  if (obj === null || typeof obj !== 'object') {
    return obj;
  }

  if (Array.isArray(obj)) {
    const arrCopy = [];
    for (let i = 0; i < obj.length; i++) {
      arrCopy[i] = deepCopy(obj[i]);
    }
    return arrCopy;
  }

  const copy = {};
  for (const key in obj) {
    if (obj.hasOwnProperty(key)) {
      copy[key] = deepCopy(obj[key]);
    }
  }
  return copy;
}

const original = { a: 1, b: { c: 2 } };
const copy = deepCopy(original);
console.log(copy); // { a: 1, b: { c: 2 } }

3️⃣Библиотеки для глубокого копирования Существуют библиотеки, такие как lodash, которые предоставляют готовые функции для глубокого копирования объектов.

const _ = require('lodash');
const original = { a: 1, b: { c: 2 } };
const copy = _.cloneDeep(original);
console.log(copy); // { a: 1, b: { c: 2 } }

Для поверхностного копирования объектов можно использовать Object.assign или оператор расширения (...). Для глубокого копирования можно использовать JSON.parse и JSON.stringify, написать рекурсивную функцию или воспользоваться библиотекой, такой как lodash. 🔥 ТОП ВОПРОСОВ С СОБЕСОВ 🔒 База собесов | 🔒 База тестовых

ТОП-4 Курса по веб-дизайну по версии Tutortop Tutortop — маркетплейс курсов №1 по количеству школ-партнеров, курсов и реальных отзывов студентов. Освойте востребованную профессию с нуля за 4-5 месяцев. Соберите портфолио из 10+ проектов. Выйдите на заработок 100 000₽+ и работайте удаленно в гибком графике. Выбрать #реклама 16+ tutortop.ru О рекламодателе

Какие плюсы есть у ts ? Спросят с вероятностью 7% TypeScript (TS) — это надстройка над JavaScript, добавляющая статическую типизацию и другие возможности. Он предоставляет множество преимуществ, которые делают его привлекательным для разработки крупных и сложных приложений. Вот основные плюсы TypeScript: 1️⃣Статическая типизация Позволяет явно указывать типы переменных, функций и объектов, что помогает выявлять ошибки на этапе компиляции, а не во время выполнения. Это делает код более надежным и уменьшает количество багов.

function add(a: number, b: number): number {
  return a + b;
}

// Ошибка на этапе компиляции, если передать нечисловые значения
// add('1', '2');

2️⃣Улучшенная поддержка инструментов и автодополнение Статическая типизация и декларации типов позволяют редакторам кода (например, Visual Studio Code) предоставлять улучшенное автодополнение, подсказки и рефакторинг.

interface User {
  id: number;
  name: string;
}

const user: User = {
  id: 1,
  name: 'Alice'
};

// Автодополнение будет предлагать поля 'id' и 'name' для объекта 'user'

3️⃣Рефакторинг и поддержка кода Благодаря типизации и строгим правилам, TypeScript упрощает рефакторинг кода. Вы можете безопасно переименовывать переменные, функции и классы, уверенные в том, что все использования будут обновлены. 4️⃣Совместимость с JavaScript Является надстройкой над JavaScript, поэтому любой корректный JavaScript-код также является корректным TypeScript-кодом. Это позволяет постепенно внедрять TypeScript в существующие проекты.

// Это корректный TypeScript-код, так как он также является корректным JavaScript-кодом
const message = "Hello, TypeScript!";
console.log(message);

5️⃣Расширенные возможности OOP Добавляет возможности объектно-ориентированного программирования (ООП) к JavaScript, такие как классы, интерфейсы, абстрактные классы и модификаторы доступа (public, private, protected).

class Animal {
  private name: string;

  constructor(name: string) {
    this.name = name;
  }

  public speak(): void {
    console.log(`${this.name} makes a noise.`);
  }
}

class Dog extends Animal {
  constructor(name: string) {
    super(name);
  }

  public speak(): void {
    console.log(`${this.name} barks.`);
  }
}

const dog = new Dog('Rex');
dog.speak(); // Rex barks.

6️⃣Система модулей Поддерживает современные стандарты модулей (ES6 и CommonJS), что упрощает организацию и управление зависимостями в проекте.

// module.ts
export function greet(name: string): string {
  return `Hello, ${name}`;
}

// main.ts
import { greet } from './module';

console.log(greet('TypeScript'));

7️⃣Поддержка современных возможностей JavaScript TypeScript поддерживает последние версии JavaScript и позволяет использовать новые возможности языка даже в старых браузерах благодаря транспиляции. 8️⃣Сообщество и экосистема Имеет большое и активное сообщество, множество библиотек и инструментов. Это делает его надежным выбором для долгосрочных проектов. TypeScript добавляет статическую типизацию, улучшает автодополнение и рефакторинг, предоставляет возможности ООП, поддерживает современные стандарты модулей и совместим с JavaScript. Это делает код более надежным, удобным в поддержке и разработке. 🔥 ТОП ВОПРОСОВ С СОБЕСОВ 🔒 База собесов | 🔒 База тестовых