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

Разбираем как решать задачи на LeetCode ✅ Примеры решений ✅ Пояснения Выбери своё направление: 1. Python 2. JavaScript 3. Java 4. C# 5. Golang 6. C/C++ 7. PHP 8. Kotlin 9. Swift

Что известно про преобразование типов ? Спросят с вероятностью 7% Преобразование типов — это процесс приведения значения из одного типа в другой. JavaScript, как язык с динамической типизацией, автоматически преобразует типы значений, когда это необходимо, но также позволяет разработчикам явно выполнять преобразования типов. Виды преобразования 1️⃣Неявное (автоматическое): Это преобразование, которое происходит автоматически при выполнении операций с разными типами данных. Например, при сложении числа и строки JavaScript автоматически преобразует число в строку. 2️⃣Явное: Это преобразование, которое выполняется разработчиком явно с использованием встроенных функций или операторов. Примеры неявного 1️⃣Строковое преобразование: При конкатенации строки с числом число автоматически преобразуется в строку.

      const result = 'The answer is ' + 42;
   console.log(result); // 'The answer is 42'
   

2️⃣Числовое преобразование: При выполнении арифметических операций строка, содержащая число, автоматически преобразуется в число.

      const result = '42' - 10;
   console.log(result); // 32
   

3️⃣Логическое преобразование: В логическом контексте (например, в условиях if) значения автоматически приводятся к логическому типу (true или false).

      if ('hello') {
     console.log('This is true'); // This is true
   }

   if (0) {
     console.log('This is false'); // This will not be executed
   }
   

Примеры явного 1️⃣Преобразование в строку: Для явного преобразования в строку можно использовать метод String() или оператор + с пустой строкой.

      const num = 42;
   const str1 = String(num);
   const str2 = num + '';

   console.log(str1); // '42'
   console.log(str2); // '42'
   

2️⃣Преобразование в число: Для явного преобразования в число можно использовать функции Number(), parseInt(), или parseFloat().

      const str = '42';
   const num1 = Number(str);
   const num2 = parseInt(str, 10);
   const num3 = parseFloat(str);

   console.log(num1); // 42
   console.log(num2); // 42
   console.log(num3); // 42
   

3️⃣Преобразование в логическое значение: Для явного преобразования в логическое значение можно использовать функцию Boolean() или двойное отрицание !!.

      const value = 0;
   const bool1 = Boolean(value);
   const bool2 = !!value;

   console.log(bool1); // false
   console.log(bool2); // false
   

Таблица преобразования типов | Значение | К строке | К числу | К логическому | |-------------------|-------------------|------------------|-----------------| | undefined | 'undefined' | NaN | false | | null | 'null' | 0 | false | | true | 'true' | 1 | true | | false | 'false' | 0 | false | | 42 | '42' | 42 | true | | 0 | '0' | 0 | false | | '' (пустая строка) | '' | 0 | false | | '42' | '42' | 42 | true | | 'hello' | 'hello' | NaN | true | | {} (пустой объект) | '[object Object]' | NaN | true | | [] (пустой массив) | '' | 0 | true | | [42] | '42' | 42 | true | | [1, 2, 3] | '1,2,3' | NaN | true | Преобразование типов — это процесс приведения значения из одного типа в другой. Оно может происходить автоматически (неявное преобразование) или выполняться разработчиком явно (явное преобразование). Предоставляет функции и методы для преобразования в строки, числа и логические значения. 👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент 🔐 База собесов | 🔐 База тестовых

🔥Тесты для подготовки к собеседованию🔥 Выбери своё направление: 1. Frontend 2. Python 3. Java 4. Тестировщик QA 5. Data Science 6. DevOps 7. C# 8. С/C++ 9. Golang 10. PHP 11. Kotlin 12. Swift

Ответьте на 1 вопрос и получите 90 дней с Яндекс Плюс! Музыка, подкасты, аудиокниги, фильмы, сериалы, кешбэк баллами Плюса во всех серивах Яндекса. Будьте в Плюсе — 90 дней бесплатно! Предложение ограничено. Подписаться #реклама 18+ plus.yandex.ru О рекламодателе

10$ за техническое собеседование на английском языке: 1. Отправьте запись технического собеседования на английском языке файлом на этот аккаунт 2. Добавьте ссылку на вакансию или пришлите название компании и должность 3. Напишите номер кошелка USDT (Tether) на который отправить 10$ 🛡 Важно: – Запись будет использована только для сбора данных о вопросах – Вы останетесь анонимны – Запись нигде не будет опубликована 🤝 Условия: – Внятный звук, различимая речь – Допустимые профессии: • Любые программисты • DevOps • Тестировщики • Дата сайнтисты • Бизнес/Системные аналитики • Прожекты/Продукты • UX/UI и продукт дизайнеры

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

Что означает слово специфичность в css ? Спросят с вероятностью 7% Специфичность (specificity) — это механизм, который браузеры используют для определения приоритета применяемых стилей. Специфичность определяет, какие правила CSS будут применены к элементу, когда существуют конфликтующие правила. Она рассчитывается на основе различных типов селекторов, используемых в правиле CSS. Основные концепции 1️⃣Типы селекторов и их веса: Специфичность определяется по типу селекторов, и каждый тип имеет свой вес. В порядке увеличения специфичности: ✅Элементы и псевдоэлементы (div, h1, p, ::before, ::after): вес 1. ✅Классы, атрибуты и псевдоклассы (.class, [type="text"], :hover, :nth-child): вес 10. ✅Идентификаторы (#id): вес 100. ✅Инлайновые стили (стили, заданные непосредственно в элементе с атрибутом style): вес 1000. ✅Важные правила (!important): не учитывают специфичность, а просто переопределяют другие правила. 2️⃣Правила вычисления специфичности: Специфичность CSS выражается в виде чисел (a, b, c, d), где: ✅a — количество инлайновых стилей (1 или 0). ✅b — количество идентификаторов. ✅c — количество классов, атрибутов и псевдоклассов. ✅d — количество элементов и псевдоэлементов. Примеры расчета специфичности 1️⃣Элементы и псевдоэлементы:

      div { color: red; } /* Специфичность: 0, 0, 0, 1 */
   p::before { content: ''; } /* Специфичность: 0, 0, 0, 2 */
   

2️⃣Классы, атрибуты и псевдоклассы:

      .example { color: blue; } /* Специфичность: 0, 0, 1, 0 */
   [type="text"] { color: green; } /* Специфичность: 0, 0, 1, 0 */
   :hover { color: yellow; } /* Специфичность: 0, 0, 1, 0 */
   

3️⃣Идентификаторы:

      #unique { color: orange; } /* Специфичность: 0, 1, 0, 0 */
   

4️⃣Инлайновые стили:

      <div style="color: purple;"></div> <!-- Специфичность: 1, 0, 0, 0 -->
   

5️⃣Комбинированные селекторы:

#unique .example:hover { color: pink; } /* Специфичность: 0, 1, 1, 1 */
   

Если два или более правил CSS применяются к одному и тому же элементу, приоритет будет у правила с наибольшей специфичностью.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Specificity Example</title>
  <style>
    p { color: red; } /* Специфичность: 0, 0, 0, 1 */
    .text { color: green; } /* Специфичность: 0, 0, 1, 0 */
    #unique { color: blue; } /* Специфичность: 0, 1, 0, 0 */
    .text#unique { color: orange; } /* Специфичность: 0, 1, 1, 0 */
  </style>
</head>
<body>
  <p class="text" id="unique">This is a paragraph.</p>
</body>
</html>

В этом примере, текст параграфа будет оранжевого цвета, так как правило .text#unique имеет наибольшую специфичность (0, 1, 1, 0). Использование !important Правила с ним имеют наивысший приоритет и могут переопределить даже те стили, которые имеют более высокую специфичность. Тем не менее, злоупотребление !important может затруднить управление стилями и отладку.

p { color: red !important; } /* Перебивает все другие правила */

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

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

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

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 используется для выполнения нескольких асинхронных операций параллельно и возвращает один промис, который разрешается массивом результатов, если все промисы выполнены успешно, или отклоняется, если любой из промисов отклоняется. Это полезно для управления несколькими асинхронными задачами одновременно. 🔥 ТОП ВОПРОСОВ С СОБЕСОВ 🔒 База собесов | 🔒 База тестовых

В чем разница uselayuouteffect и useeffect ? Спросят с вероятностью 7% useEffect и useLayoutEffect — это хуки, которые позволяют выполнять побочные эффекты в функциональных компонентах. Оба они предназначены для выполнения кода после рендеринга компонента, но их поведение различается по времени выполнения и влиянию на рендеринг. useEffect ✅Когда выполняется: Выполняется после того, как браузер закончил обновлять DOM. Это означает, что все изменения в DOM уже произошли, и браузер уже отрисовал интерфейс. ✅Основное использование: Используется для выполнения побочных эффектов, которые не блокируют отрисовку, таких как сетевые запросы, подписки на события, манипуляции с DOM (не критичные к рендерингу) и регистрация таймеров. ✅Поведение: Не блокирует рендеринг. Это означает, что пользователь может видеть обновленный интерфейс перед выполнением побочного эффекта. Пример:

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

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

  useEffect(() => {
    console.log('useEffect: Выполняется после рендеринга');
    document.title = `Вы нажали ${count} раз`;

    return () => {
      console.log('useEffect: Очистка');
    };
  }, [count]);

  return (
    <div>
      <p>Вы нажали {count} раз</p>
      <button onClick={() => setCount(count + 1)}>Нажми меня</button>
    </div>
  );
}

export default Example;

useLayoutEffect ✅Когда выполняется: Выполняется синхронно после всех мутировавших эффектов DOM, но перед тем, как браузер обновит экран. Это означает, что изменения, сделанные в useLayoutEffect, будут видны пользователю до того, как браузер нарисует обновленный интерфейс. ✅Основное использование: Используется для выполнения побочных эффектов, которые должны произойти до отрисовки интерфейса, таких как измерение размеров DOM-элементов, выполнение синхронных изменений в DOM, которые должны произойти перед отрисовкой, или выполнение операций, которые блокируют отрисовку. ✅Поведение: Блокирует отрисовку до тех пор, пока эффект не будет выполнен. Это может привести к задержке в отображении интерфейса, если эффект выполняется долго. Пример:

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

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

  useLayoutEffect(() => {
    console.log('useLayoutEffect: Выполняется после рендеринга, но перед отрисовкой');
    document.title =раз</p>
      <button onCl

    return () => {
      console.log('useLayoutEffect: Очистка');
    };
  }, [count]);

  return (
    <div>
      <p>Вы нажали {count} раз</p>
      <button onClick={() => setCount(count + 1)}>Нажми меня</button>
    </div>
  );
}

export default Example;

Основные различия 1️⃣Время выполнения: ✅useEffect выполняется асинхронно после того, как браузер обновил экран. ✅useLayoutEffect выполняется синхронно перед тем, как браузер обновит экран. 2️⃣Использование: ✅useEffect лучше подходит для побочных эффектов, которые не влияют на компоновку и отрисовку интерфейса. ✅useLayoutEffect лучше подходит для побочных эффектов, которые должны быть выполнены перед отрисовкой, таких как измерение или изменения в DOM. 🔥 ТОП ВОПРОСОВ С СОБЕСОВ 🔒 База собесов | 🔒 База тестовых

Как повысить эффективность вебинаров? Организация продающего вебинара - не простая задача, ведь необходимо предусмотреть множество деталей: удобную дату, вовлекающий контент, методы продвижения и взаимодействия с участниками. Вебинары от МТС Линк помогают привлекать новых клиентов и увеличивать конверсию из участника в лид. В сервисе доступен анализ поведения пользователей во время вебинара, синхронный перевод, автовебинары и интерактивные инструменты для вовлечения участников. Делимся методичкой с кейсами, чек-листами и инструкциями для маркетологов, PR и event-менеджеров, чтобы сделать вебинары эффективным инструментом для лидогенерации. Получите методичку бесплатно на сайте. Скачать #реклама 16+ mts-link.ru О рекламодателе

Для чего нужны map, set ? Спросят с вероятностью 7% Map и Set — это структуры данных, введенные в ECMAScript 6 (ES6), которые предоставляют дополнительные возможности и более гибкую работу с коллекциями данных по сравнению с традиционными объектами и массивами. Вот основные особенности и случаи их использования: Map Это структура данных, которая позволяет хранить пары ключ-значение и поддерживает любые типы данных в качестве ключей. Основные особенности: 1️⃣Любые типы ключей: В ней ключами могут быть любые значения, включая объекты, функции и примитивы. Это отличает Map от объектов, где ключи могут быть только строками или символами.

      const map = new Map();
   map.set('a', 1);
   map.set(1, 'one');
   map.set({}, 'object');
   map.set(function() {}, 'function');
   console.log(map);
   

2️⃣Сохранение порядка: Сохраняет порядок вставки элементов, что позволяет итерировать по элементам в порядке их добавления. 3️⃣Итерируемость: Имеет встроенные методы для итерации, такие как map.keys(), map.values(), и map.entries(), что упрощает работу с коллекцией данных. 4️⃣Методы и свойства: ✅set(key, value): Добавляет новую пару ключ-значение в Map. ✅get(key): Возвращает значение, соответствующее ключу. ✅has(key): Возвращает true, если ключ присутствует в Map. ✅delete(key): Удаляет пару ключ-значение по ключу. ✅clear(): Очищает Map. ✅size: Возвращает количество элементов в Map. Пример:

const map = new Map();
map.set('name', 'Alice');
map.set('age', 25);

console.log(map.get('name')); // Alice
console.log(map.has('age')); // true
console.log(map.size); // 2

for (const [key, value] of map) {
  console.log(key, value);
}
// name Alice
// age 25

Set Это структура данных, которая хранит уникальные значения. В Set каждое значение может присутствовать только один раз. Основные особенности: 1️⃣Только уникальные значения: Set автоматически удаляет дубликаты значений, что позволяет легко создавать коллекции уникальных элементов. 2️⃣Итерируемость: Set поддерживает итерацию и имеет встроенные методы для работы с коллекцией данных. 3️⃣Методы и свойства: ✅add(value): Добавляет новое значение в Set. ✅has(value): Возвращает true, если значение присутствует в Set. ✅delete(value): Удаляет значение из Set. ✅clear(): Очищает Set. ✅size: Возвращает количество элементов в Set. Пример:

const set = new Set();
set.add(1);
set.add(2);
set.add(2); // Дубликат не добавится
set.add(3);

console.log(set.has(2)); // true
console.log(set.size); // 3

for (const value of set) {
  console.log(value);
}
// 1
// 2
// 3

Сравнение с традиционными структурами данных Объекты и массивы: ✅Объекты используются для хранения пар ключ-значение, но ключи могут быть только строками или символами. ✅Массивы используются для хранения упорядоченных коллекций элементов, но они не гарантируют уникальность значений. Map и Set: ✅Map предоставляет более гибкую работу с парами ключ-значение, поддерживая любые типы данных в качестве ключей и сохраняя порядок вставки. ✅Set предоставляет коллекцию уникальных значений и автоматически удаляет дубликаты. 🔥 ТОП ВОПРОСОВ С СОБЕСОВ 🔒 База собесов | 🔒 База тестовых

Пикник для ИТ-специалистов в Коломенском Отдохните в кругу опытных ИТ-специалистов. Будут лекции, музыка, мастер-классы, интерактив — и все это в один день. Ждем вас 17.08. Зарегистрироваться #реклама it-picnic.ru О рекламодателе

Подписывайтесь на канал с мемами для айтишников👇🏻 https://t.me/+zT1A6VPbNoAyMzQy