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

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

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

      let age: number = 25;
   let name: string = "Alice";

   function greet(name: string): string {
     return `Hello, ${name}`;
   }
   

2️⃣Совместимость: TypeScript полностью совместим. Любой корректный JavaScript-код также является корректным TypeScript-кодом. Это позволяет постепенно внедрять TypeScript в существующие проекты. 3️⃣Поддержка современных возможностей: Поддерживает все современные стандарты JavaScript (ES6 и выше), а также предоставляет дополнительные возможности, такие как декораторы и асинхронные функции. 4️⃣Расширенные возможности ООП (объектно-ориентированного программирования): Добавляет возможности, такие как классы, интерфейсы, абстрактные классы и модификаторы доступа (public, private, protected).

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

     public greet(): void {
       console.log(`Hello, my name is ${this.name}`);
     }
   }

   const alice = new Person("Alice");
   alice.greet(); // Hello, my name is Alice
   

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

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

   const user: User = {
     id: 1,
     name: "Alice",
     email: "alice@example.com"
   };
   

6️⃣Инструменты разработки: Благодаря статической типизации и метаданным, TypeScript обеспечивает улучшенное автодополнение, рефакторинг и навигацию по коду в популярных редакторах кода, таких как Visual Studio Code. 7️⃣Компиляция: Компилируется (или транслируется) в JavaScript. Это означает, что код TypeScript преобразуется в JavaScript, который затем может выполняться в любом браузере или среде выполнения JavaScript.

      // TypeScript
   let message: string = "Hello, TypeScript";

   // Компилированный JavaScript
   var message = "Hello, TypeScript";
   

Создание простого проекта может включать следующие шаги: 1️⃣Установка TypeScript:

      npm install -g typescript
   

2️⃣Инициализация проекта TypeScript:

      tsc --init
   

Это создаст файл tsconfig.json, в котором можно настроить параметры компиляции TypeScript. 3️⃣Создание TypeScript-файла:

      // src/index.ts
   const greet = (name: string): string => {
     return Hello, ${name};
   };

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

4️⃣Компиляция TypeScript в JavaScript:

      tsc
   

Это создаст файл index.js в папке dist или другой указанной папке. 5️⃣Запуск скомпилированного JavaScript-кода:

      node dist/index.js
   

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

В SAP было удобно? А в ERP лучше, докажем! Переводим с SAP, Navision, OeBS на ERP за 3 месяца⚡⚡⚡ Опер. и фин. контуры по SCRUM: *** Радикальное снижение «незавершенки» по проекту *** Ориентация на добавление ценности *** Wiki-документация *** Кросс-функциональная команда *** WIP-лимиты *** Ежедневная обратная связь *** Самоорганизация команды *** Раннее обнаружение и ликвидация дефектов Узнать больше #реклама nfp2b.ru О рекламодателе

В чем отличие map от обычного объекта ? Спросят с вероятностью 7% Объекты и Map используются для хранения пар ключ-значение. Однако, у них есть различия, которые могут сделать Map более подходящим для определенных задач по сравнению с обычными объектами. Вот основные отличия: 1️⃣Типы ключей ✅Объекты: Ключами могут быть только строки или символы. Другие типы, такие как числа или объекты, автоматически преобразуются в строки.

    const obj = {};
  obj[1] = 'one'; // Ключ преобразуется в строку '1'
  console.log(obj['1']); // 'one'

  const a = { key: 'a' };
  const b = { key: 'b' };
  obj[a] = 'value'; // Ключ преобразуется в '[object Object]'
  console.log(obj['[object Object]']); // 'value'
  

✅Map: Ключами могут быть любые значения, включая объекты, функции и примитивы.

    const map = new Map();
  map.set(1, 'one');
  console.log(map.get(1)); // 'one'

  const a = { key: 'a' };
  const b = { key: 'b' };
  map.set(a, 'valueA');
  map.set(b, 'valueB');
  console.log(map.get(a)); // 'valueA'
  console.log(map.get(b)); // 'valueB'
  

2️⃣Итерация ✅Объекты: Осуществляется с помощью циклов for...in или методов Object.keys(), Object.values() и Object.entries().

    const obj = { a: 1, b: 2 };
  for (const key in obj) {
    console.log(key, obj[key]);
  }

  Object.keys(obj).forEach(key => console.log(key, obj[key]));
  

✅Map: Имеет встроенные методы для итерации, такие как map.keys(), map.values() и map.entries(). Эти методы возвращают итерируемые объекты.

    const map = new Map([['a', 1], ['b', 2]]);
  for (const [key, value] of map) {
    console.log(key, value);
  }

  map.forEach((value, key) => console.log(key, value));
  

3️⃣Сохранение порядка ✅Объекты: Порядок свойств в объектах не гарантирован, хотя современные реализации JavaScript сохраняют порядок добавления свойств. ✅Map: Порядок добавления пар ключ-значение всегда сохраняется. 4️⃣Производительность ✅Объекты: Использование объектов может быть быстрее для создания и доступа к свойствам, но это зависит от реализации в конкретной среде выполнения. ✅Map: Map оптимизирован для частого добавления и удаления ключей и значений. 5️⃣Методы и свойства ✅Объекты: Не имеют встроенных методов для работы с коллекцией ключей и значений. ✅Map: Предоставляет множество встроенных методов, таких как set, get, has, delete, и свойства, такие как size.

    const map = new Map();
  map.set('key', 'value');
  console.log(map.has('key')); // true
  console.log(map.get('key')); // 'value'
  map.delete('key');
  console.log(map.size); // 0
  

6️⃣Прототипное наследование ✅Объекты: Имеют цепочку прототипов, которая может приводить к коллизиям имен свойств с прототипами.

    const obj = { a: 1 };
  console.log(obj.toString); // [Function: toString] - свойство унаследовано от Object.prototype
  

✅Map: В Map нет такой проблемы, так как он не использует цепочку прототипов для хранения данных.

    const map = new Map();
  map.set('a', 1);
  console.log(map.toString); // [Function: toString] - метод самого Map, а не его данных
  

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

❓Если вам интересно - Почему батчевые update могут вызывать дедлоки - Что делать, если одни и те же данные нужны в нескольких сервисах - Как эффективно осуществлять пагинацию, когда записей очень много ✅ То подписывайтесь на канал Senior Backend разработчика с авторскими статьями про проектирование, архитектуру, базы данных

Реклама для бизнеса любого уровня в Яндекс Директе Создайте эффективную рекламную кампанию с алгоритмами Яндекс Директа 👌 Начните прямо сейчас ⚡ Зарегистрироваться #реклама 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 О рекламодателе