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

Партнёрская программа рекрутинга в Яндекс Еду Станьте партнёром Яндекс Еды по привлечению курьеров и получите кучу преимуществ: 💰Платим до 25 000 ₽ за успешного кандидата 📞Поддержка на всех этапах 📅Свободное расписание 📊Удобные инструменты для работы Приводите новых курьеров и получайте до 187 000 ₽ в месяц! Зарегистрироваться #реклама eda.yandex.ru О рекламодателе

📌 Зачем создавались библиотеки react и другие? 💬 Спрашивают в 3% собеседований Библиотеки, такие как React, создавались для упрощения и оптимизации процесса разработки пользовательских интерфейсов (UI). Вот несколько ключевых причин, почему создавались React и другие библиотеки: 1️⃣ Повышение эффективности разработки ➕ Проблема: Написание большого количества кода вручную для создания динамических веб-страниц может быть громоздким и ошибочным. ➕ Решение: React позволяет разбивать интерфейс на отдельные компоненты, которые можно повторно использовать и комбинировать. Это снижает объем дублирующегося кода и упрощает его сопровождение. 2️⃣ Улучшение производительности ➕ Проблема: Постоянное обновление DOM (Document Object Model) может быть медленным и ресурсоемким. ➕ Решение: React использует виртуальный DOM, который минимизирует количество реальных изменений в DOM, обновляя только те элементы, которые действительно изменились. 3️⃣ Облегчение работы с состоянием приложения ➕ Проблема: Управление состоянием больших и сложных приложений может стать хаотичным. ➕ Решение: React предоставляет механизмы для удобного управления состоянием компонентов с помощью useState, useReducer, и других хуков. Это делает логику управления состоянием более ясной и предсказуемой. 4️⃣ Улучшение масштабируемости и поддерживаемости кода ➕ Проблема: По мере роста приложения, код может стать сложным для понимания и изменения. ➕ Решение: Подход к компонентам в React позволяет разработчикам легче разделять задачи и работать над отдельными частями приложения независимо друг от друга. Это улучшает масштабируемость и поддерживаемость кода. 5️⃣ Сообщество и экосистема ➕ Проблема: Наличие обширного сообщества и инструментов для разработки. ➕ Решение: React имеет большое сообщество разработчиков, множество библиотек и инструментов, которые упрощают разработку и интеграцию различных функций в приложения. Пример использования React:

import React, { useState } from 'react';

function Counter() {
  // Определение состояния count с начальным значением 0
  const [count, setCount] = useState(0);

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

export default Counter;

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

🤬 Постоянные ошибки, как они надоели! 🤯 Планируя свои дела, мы забываем, что оборудование может подвести. Это может перекрыть все рабочие планы. Придется гуглить, смотреть видосы, звонить знакомым "Не встречалась ли тебе такая ошибка?" 🥵 Все это время и силы. Наша команда нашла этому решение - Битый код. Канал, который даст тебе базу в мире ошибок. 🍸 Стань тем человеком, к которому будут обращаться и про которого будут говорить "Он сможет помочь"

Канал для тех, кто ищет самые выгодные предложения Каждый день в этом канале публикуются скидки на товары с Яндекс Маркета: найдётся всё — от компьютеров до пены для бритья. Также проходят розыгрыши классных призов! Подписывайтесь, чтобы не потерять⚡ Узнать больше #реклама О рекламодателе

Какие особенности в js ? Спросят с вероятностью 3% Это высокоуровневый, интерпретируемый язык программирования, который обладает рядом уникальных особенностей и возможностей. Рассмотрим основные из них: 1️⃣Динамическая типизация Является языком с динамической типизацией, что означает, что тип переменной определяется во время выполнения, а не во время компиляции. Тип переменной может изменяться в процессе выполнения программы.

let variable = 42; // Число
variable = 'Hello, world!'; // Строка

2️⃣Функции первого класса Являются объектами первого класса, что означает, что функции могут быть присвоены переменным, переданы как аргументы другим функциям и возвращены из других функций.

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

const sayHello = greet;
console.log(sayHello('Alice')); // Hello, Alice

function executeFunction(fn, value) {
  return fn(value);
}

console.log(executeFunction(greet, 'Bob')); // Hello, Bob

3️⃣Замыкания (Closures) Это функции, которые имеют доступ к переменным из своей внешней функции даже после того, как внешняя функция завершила выполнение. Это позволяет создавать функции с привязанными к ним переменными из внешнего окружения.

function createCounter() {
  let count = 0;
  return function() {
    count++;
    return count;
  };
}

const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2

4️⃣Прототипное наследование Использует прототипное наследование вместо классового. Каждый объект в JavaScript имеет скрытое свойство [[Prototype]], которое указывает на другой объект, используемый в качестве прототипа.

const animal = {
  speak: function() {
    console.log(`${this.name} издает звук`);
  }
};

const dog = Object.create(animal);
dog.name = 'Рекс';
dog.speak(); // Рекс издает звук

5️⃣Асинхронность и события Поддерживает асинхронное выполнение через коллбеки, промисы и async/await. Это позволяет обрабатывать события и операции ввода-вывода без блокировки основного потока выполнения. Использование коллбеков:

function fetchData(callback) {
  setTimeout(() => {
    callback('Данные получены');
  }, 1000);
}

fetchData((data) => {
  console.log(data); // Данные получены (через 1 секунду)
});

Использование промисов:

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('Данные получены');
    }, 1000);
  });
}

fetchData().then(data => {
  console.log(data); // Данные получены (через 1 секунду)
});

Использование async/await:

async function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('Данные получены');
    }, 1000);
  });
}

async function getData() {
  const data = await fetchData();
  console.log(data); // Данные получены (через 1 секунду)
}

getData();

6️⃣Интуитивно понятная работа с объектами Имеет мощные встроенные функции для работы с объектами, такие как деструктуризация, операторы расширения и методы объектов. Деструктуризация:

const person = {
  name: 'Alice',
  age: 30
};

const { name, age } = person;
console.log(name); // Alice
console.log(age); // 30

Операторы расширения:

const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };
const mergedObj = { ...obj1, ...obj2 };

console.log(mergedObj); // { a: 1, b: 3, c: 4 }

Обладает множеством уникальных особенностей, таких как динамическая типизация, функции первого класса, замыкания, прототипное наследование, асинхронное программирование с коллбеками, промисами и async/await, интуитивно понятная работа с объектами и массивами, а также событийно-ориентированное программирование. Эти возможности делают его мощным и гибким инструментом для веб-разработки и других приложений. 👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент 🔐 База собесов | 🔐 База тестовых

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

Что такое dns ? Спросят с вероятностью 3% DNS (Domain Name System) — это система, которая переводит доменные имена, понятные человеку, в IP-адреса, понятные компьютерам и сетевым устройствам. Основная задача DNS — облегчить доступ к ресурсам в Интернете, позволяя использовать легко запоминаемые доменные имена вместо сложных числовых IP-адресов. Основные функции 1️⃣Разрешение доменных имен: ✅Основная функция DNS заключается в преобразовании доменных имен (например, www.example.com) в соответствующие им IP-адреса (например, 93.184.216.34), чтобы веб-браузеры и другие интернет-клиенты могли находить и обращаться к нужным ресурсам. 2️⃣Обратное разрешение (Reverse DNS): ✅Обратное разрешение — это процесс преобразования IP-адресов обратно в доменные имена. Это используется для проверки подлинности или при проведении сетевой диагностики. Как он работает Процесс разрешения доменного имени включает несколько этапов и компонентов: 1️⃣Введение DNS-кэша: ✅Браузер и операционная система сначала проверяют свои локальные кэши на наличие записи о недавно разрешенном доменном имени. Если запись найдена и не истекла, используется закэшированный IP-адрес. 2️⃣Запрос к DNS-серверу: ✅Если локальный кэш не содержит нужной записи, запрос отправляется к DNS-серверу вашего интернет-провайдера (ISP) или другого конфигурируемого DNS-сервера (например, Google Public DNS). 3️⃣Рекурсивный запрос: ✅DNS-сервер провайдера может выполнять рекурсивный запрос, запрашивая информацию у других DNS-серверов, если он сам не знает ответа. Этот процесс включает несколько шагов: ✅Запрос к корневому DNS-серверу. ✅Корневой сервер направляет к DNS-серверу верхнего уровня домена (TLD, например, .com, .org). ✅Сервер верхнего уровня направляет к авторитетному DNS-серверу конкретного домена. 4️⃣Авторитетные DNS-серверы: ✅Авторитетный DNS-сервер для домена (например, example.com) содержит окончательную информацию об IP-адресе для запрашиваемого доменного имени и возвращает её DNS-серверу провайдера. 5️⃣Ответ клиенту: ✅DNS-сервер провайдера кэширует полученный IP-адрес и отправляет его обратно клиенту (вашему браузеру или операционной системе). 6️⃣Доступ к ресурсу: ✅Клиент использует полученный IP-адрес для установления соединения с нужным сервером и получения запрашиваемых данных. Допустим, вы вводите в браузере www.example.com: 1️⃣Браузер проверяет локальный DNS-кэш. 2️⃣Если записи нет, браузер отправляет запрос на DNS-сервер провайдера. 3️⃣DNS-сервер провайдера выполняет рекурсивный запрос: ✅Запрашивает корневой DNS-сервер. ✅Корневой сервер направляет к серверу TLD .com. ✅Сервер TLD направляет к авторитетному DNS-серверу example.com. 4️⃣Авторитетный DNS-сервер example.com возвращает IP-адрес, например, 93.184.216.34. 5️⃣DNS-сервер провайдера кэширует этот IP-адрес и возвращает его браузеру. 6️⃣Браузер устанавливает соединение с сервером по IP-адресу 93.184.216.34 и загружает страницу. DNS (Domain Name System) — это система, которая преобразует доменные имена в IP-адреса и наоборот. Она позволяет пользователям вводить легко запоминаемые доменные имена вместо сложных IP-адресов для доступа к ресурсам в Интернете. DNS включает в себя процессы проверки кэша, рекурсивные запросы к DNS-серверам и использование различных типов записей для разрешения имен и управления ресурсами. 👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент 🔐 База собесов | 🔐 База тестовых

Коммутатор ЦОД MES5500-32 Eltex за 1 минуту - 32x40G/100G (QSFP+ / QSFP28) - 2x10G (SFP+) - RS-232 (RJ-45) - OOB - USB 2.0 Пропускная способность - 6,4 Тбит/с 2 модуля питания с горячей заменой: PM600-220/12 — 220В AC PM600-48/12 — 48В DC Настройка: - CLI через Telnet, SSH (Cisco-like) - веб-интерфейс - SNMP Комплектация: - Сертификат  - Паспорт устройства  - Комплект крепления в 19"стойку - Пылезащитные заглушки для портов Узнать цену #реклама eltexcm.ru О рекламодателе

👨‍💻 Джун: Слушай, вот стажировку я прошел, где теперь можно чекнуть вакансии на работу? 🍷 Мидл: Ооо, тебе помогут ребята с канала Джун работает 💯 Карьеру нужно начинать с хорошими работодателями. Твое резюме будет ликовать, ведь контент выходит каждый день, работа ждет тебя, мой друг! 😏 Не упускай возможность и подписывайся, чтобы не потерять

Что такое merge и rebase, в чем отличие друг от друга ? Спросят с вероятностью 7% merge и rebase — это два способа интеграции изменений из одной ветки в другую в системе контроля версий Git. Оба метода имеют свои особенности и подходят для разных сценариев. Merge (слияние) Объединяет изменения из одной ветки в другую, создавая новый коммит слияния (merge commit). Этот метод сохраняет историю всех коммитов, включая все ветвления и слияния. 1️⃣Предположим, у вас есть две ветки: main и feature. 2️⃣В ветке feature вы сделали несколько коммитов. 3️⃣Вы хотите объединить изменения из feature в main.

git checkout main
git merge feature

В результате получается история, включающая коммит слияния:

A---B---C---F---G (main)
     \       /
      D---E (feature)

Где F и G — коммиты в ветке main, а D и E — коммиты в ветке feature. Коммит G — это коммит слияния, который объединяет изменения из feature в main. Rebase (перебазирование) Перемещает или переписывает базу текущей ветки на указанную базу другой ветки. Это переписывает историю коммитов, создавая новые коммиты для каждого из оригинальных коммитов. 1️⃣Предположим, у вас есть две ветки: main и feature. 1️⃣В ветке feature вы сделали несколько коммитов. 3️⃣Вы хотите перенести изменения из feature на текущий конец main.

git checkout feature
git rebase main

В результате история переписывается, как если бы коммиты из feature были сделаны на основе самой свежей версии main:

A---B---C---F---G (main)
                 \
                  D'---E' (feature)

Где D' и E' — это новые коммиты, созданные при перебазировании, основанные на последних изменениях из main. Основные отличия 1️⃣История коммитов: ✅Merge: Сохраняет всю историю, включая коммиты слияния. История показывает, когда и как происходили слияния веток. ✅Rebase: Переписывает историю, делая её линейной. История показывает, как если бы все изменения были сделаны последовательно, без ветвлений. 2️⃣Коммиты слияния: ✅Merge: Создает новый коммит слияния, который объединяет изменения из двух веток. ✅Rebase: Не создает коммит слияния. Перебазирование "переносит" коммиты одной ветки на другую. 3️⃣Конфликты: ✅Merge: Конфликты решаются один раз при слиянии. ✅Rebase: Конфликты могут возникнуть на каждом коммите, и их нужно решать поэтапно. 4️⃣Применение: ✅Merge: Хорош для сохранения полного контекста истории разработки, особенно в командной работе. ✅Rebase: Хорош для поддержания чистой, линейной истории, особенно перед слиянием ветки в основную ветку, например, main или master. Когда использовать ✅Используйте `merge`, когда вы хотите сохранить всю историю разработки, включая все ветвления и слияния. Это полезно для командной работы, где важно видеть весь контекст изменений. ✅Используйте rebase, когда вы хотите поддерживать чистую и линейную историю. Это особенно полезно для интеграции изменений в основную ветку перед созданием pull request'ов, чтобы история коммитов была более понятной. Merge объединяет изменения из одной ветки в другую, создавая новый коммит слияния и сохраняя всю историю. Rebase переписывает историю, делая её линейной, перемещая коммиты из одной ветки на базу другой. 👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент 🔐 База собесов | 🔐 База тестовых

📕 Прогер, как ты расширяешь свой кругозор в сфере IT? Не достаточно знать что-то одно, мысля глобально и изучая смежные отрасли, ты не только становишься умнее, но и увеличиваешь свою востребованность и свой заработок. 🗿 Не обязательно читать заумные книги и смотреть подкасты - это долго. У нас есть решение: 🔥 Полезные статьи - концентрат знаний. 🔥 Советы - короткие сообщения, которые будут увеличивать твою эффективность. 🔥 Инструменты - tool-сайты в разы упростят и ускорят твою работу. 🧑‍💻 Время, силы, желание - ресурсы, которые нужно использовать с умом. Подпишись на канал Заметки прогера, IT ниша скажет "спасибо" за такого специалиста.

Дизайн в FIGMA с нуля. Бесплатный курс + портфолио Онлайн-программа с наставником и чатом. Дизайн от профессионалов. Доступ 0 руб. Узнать больше #реклама 16+ yudaevschool24.online О рекламодателе

😭 Джун: Как мне найти работу в IT, если опыта нет? 🧑‍💻 Мидл: Просто зайди на канал Джун стажер и подбери стажировку по душе. 📕 Админы отбирают самые сочные вакансии от ведущих компаний, к тому же контент выходит каждый день. 🔥 Не упускай возможность и подписывайся, чтобы не потерять

Что такое hoisting ? Спросят с вероятностью 7% Поднятие (hoisting) — это механизм, при котором объявления переменных и функций поднимаются вверх своей области видимости во время компиляции, до фактического выполнения кода. Это означает, что вы можете использовать переменные и функции до их объявления в коде. Hoisting переменных Для переменных, объявленных с использованием var, только само объявление поднимается, а присвоение значения остается на своем месте. Это может привести к неожиданным результатам.

console.log(a); // undefined
var a = 5;
console.log(a); // 5

Интерпретируется как:

var a;
console.log(a); // undefined
a = 5;
console.log(a); // 5

Переменные, объявленные с помощью let и const, также поднимаются, но находятся в так называемой "временной мертвой зоне" (temporal dead zone, TDZ) до тех пор, пока выполнение кода не дойдет до строки их объявления. Попытка доступа к таким переменным до их объявления вызывает ошибку.

console.log(b); // ReferenceError: Cannot access 'b' before initialization
let b = 10;
console.log(b); // 10

console.log(c); // ReferenceError: Cannot access 'c' before initialization
const c = 15;
console.log(c); // 15

Hoisting функций Функции, объявленные с помощью function declaration, полностью поднимаются — как объявление, так и их определение. Это позволяет вызывать функции до их объявления в коде.

hoistedFunction(); // "This function is hoisted"

function hoistedFunction() {
  console.log("This function is hoisted");
}

Функции, объявленные как function expression, ведут себя иначе. Только объявление переменной поднимается, но не ее присвоение. Это значит, что вы не можете вызвать такую функцию до ее фактического объявления.

hoistedFunctionExpression(); // TypeError: hoistedFunctionExpression is not a function

var hoistedFunctionExpression = function() {
  console.log("This function is not hoisted");
};

Важные моменты 1️⃣Переменные, объявленные с помощью `var`, поднимаются, но их значение становится undefined до присвоения. 2️⃣Переменные, объявленные с помощью let ито такое поднимаются, но остаются недоступными до фактического объявления в коде, что вызывает ошибку при доступе. 3️⃣Функции, объявленные как function declaration, полностью поднимаются и могут быть вызваны до своего объявления. 4️⃣Функции, объявленные как function expression, поднимаются только как переменные, а присвоение происходит на месте, что делает их недоступными до присвоения. Поднятие (hoisting) — это механизм, при котором объявления переменных и функций поднимаются вверх своей области видимости во время компиляции, позволяя использовать их до фактического объявления в коде. Однако, переменные, объявленные с let и const, остаются недоступными до их фактического объявления. 👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент 🔐 База собесов | 🔐 База тестовых

👨‍💻 Будущий специалист, ты знаешь, какая самая частая ошибка новичка в сфере IT? Отсутствие практики убивает в тебе потенциал ✈️ Как с этим бороться, мой друг? Найди работу и прокачивай свои скилы на конкретных задачах 🔥 У нас ты будешь находить большое количество вакансий каждый день. Понятие работы перестанет быть для тебя размытым. Подпишись на канал и не откладывай свой прогресс в долгий ящик.