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

Купи 2-ух уровневая, ремонт, вид на море, ипотека от 2% Мечтаете о квартире у моря, но цены и необходимость делать ремонт пугают💰? Да, выбор и ремонт требует времени и денег . Но не отказывайтесь от мечты! В ЖК Фестивальный готовые квартиры с ремонтом, скидкой до 20% и ипотекой от 2%😊. ✨ Из окон видно море, до которого всего 10 минут, на территории школа, сад, магазины и даже бассейн 👍! ✅ Оставь телефон чтобы узнать цену! Узнать цену Изучите все условия кредита (займа) на сайте в соответствующем разделе. Оценивайте свои финансовые возможности и риски. Финансовые услуги оказывает: ПАО Сбербанк. #реклама festivalniy.estatesochi.com О рекламодателе

🤔 Как работает Angular? - Построен на компонентах, шаблонах и DI; - Использует Zone.js и Change Detection для отслеживания изменений; - Управляет отображением через двустороннюю привязку и шаблонные директивы; - Использует RxJS для реактивности и HttpClient для API. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🔍Тестовое собеседование на Frontend-разработчика с ex. TeamLead в Сбер 9 июля(в четверг!) в 19:00 по мск приходи онлайн на открытое собеседование, чтобы посмотреть на настоящее интервью на Middle Frontend-разработчика. Как это будет: 📂 Даниил Дмитриев, старший разработчик в R-Vision, ex. TeamLead в Сбер, будет задавать реальные вопросы и задачи разработчику-добровольцу 📂 Даниил будет комментировать каждый ответ респондента, чтобы дать понять, чего от вас ожидает собеседующий на интервью 📂 В конце можно будет задать любой вопрос Даниилу Это бесплатно. Эфир проходит в рамках менторской программы от ШОРТКАТ для Frontend-разработчиков, которые хотят повысить свой грейд, ЗП и прокачать скиллы. Переходи в нашего бота, чтобы получить ссылку на эфир → @shortcut_front_bot Реклама. О рекламодателе.

🔍Тестовое собеседование на Middle Python с разработчиком из Авито сегодня Уже сегодня вечером в 19:00 по мск приходи онлайн на открытое собеседование, чтобы посмотреть на настоящее интервью на Middle Python-разработчика. Как это будет: 📂 Даня, старший разработчик в Авито, будет задавать реальные вопросы и задачи разработчику-добровольцу 📂 Даня будет комментировать каждый ответ респондента, чтобы дать понять чего от вас ожидает собеседующий на интервью 📂 В конце можно будет задать любой вопрос Дане Это бесплатно. Эфир проходит в рамках менторской программы от ШОРТКАТ для Python-разработчиков, которые хотят повысить свой грейд, ЗП и прокачать скиллы. Переходи в нашего бота, чтобы получить ссылку на эфир → @shortcut_py_bot Реклама. О рекламодателе.

Будьте в центре внимания — с Прайм-баннером С новым медийным форматом Прайм-баннер вы можете не просто размещать рекламу на самых популярных сервисах Яндекса с высоким Brand Safety, а гибко управлять кампанией: — Оптимизируйте стоимость размещения — формат доступен по аукционной модели без порога входа — Настраивайте кросс-частоту и исключайте из показов неподходящие площадки — Размещайтесь как на уже знакомых, так и на уникальных местах показа — Выбирайте нужные среди более чем 600 таргетингов без наценок — Оценивайте результаты с помощью исследований Brand Lift, Search Lift, Visit Lift и Target Lift Узнайте больше о возможностях Прайм-баннера для вашего бренда. Узнать больше #реклама 16+ yandex.ru О рекламодателе

🤔 В чем отличие атрибутов от свойств в html тегах? Атрибуты — это то, что записано в HTML. Свойства — это то, что появляется в JavaScript-объекте element. Когда браузер загружает страницу, он парсит HTML и создает DOM-объекты, в которых атрибуты превращаются в свойства. Однако атрибуты и свойства не всегда совпадают! 🟠Атрибуты (`attributes`) Хранятся в HTML. Всегда являются строками. Их можно получить с помощью .getAttribute() и изменить через .setAttribute(). Они не меняются динамически при изменении свойства элемента в JS.

<input id="myInput" type="text" value="Hello">

const input = document.getElementById("myInput");
console.log(input.getAttribute("value")); // "Hello"

🟠Свойства (`properties`) Хранятся в объекте элемента (HTMLElement). Имеют разные типы данных (строки, числа, булевые и т. д.). Меняются динамически при взаимодействии с DOM.

console.log(input.value); // "Hello"
input.value = "New text"; // Меняем свойство
console.log(input.getAttribute("value")); // "Hello" (атрибут НЕ поменялся)
console.log(input.value); // "New text" (свойство изменилось)

Пример с checked у чекбокса

<input type="checkbox" id="myCheckbox" checked>

const checkbox = document.getElementById("myCheckbox");

console.log(checkbox.getAttribute("checked")); // "checked" (атрибут есть, значит включен)
console.log(checkbox.checked); // true (свойство JS - boolean)

checkbox.checked = false; // Меняем состояние чекбокса
console.log(checkbox.getAttribute("checked")); // "checked" (атрибут не поменялся!)
console.log(checkbox.checked); // false (свойство изменилось)

🟠Как правильно работать с атрибутами и свойствами? Если хотите работать с DOM → используйте свойства (element.value, element.checked и т. д.). Если хотите работать с атрибутами в HTML → используйте .getAttribute() и .setAttribute().

const img = document.querySelector("img");

// Меняем атрибут src
img.setAttribute("src", "new-image.jpg");

// Меняем свойство width
img.width = 300;

Ставь 👍 и забирай 📚 Базу знаний

МТС Линк. Всё для коммуникации в команде 💻Платформа для общения, работы и обучения онлайн с поддержкой ИИ Встречи, чаты и звонки в одном приложении ✅МТС Линк доступен в AppStore. Берите работу с собой и оставайтесь на связи с коллегами в любое время Зарегистрироваться #реклама 16+ mts-link.ru О рекламодателе

🤔 В чём отличие синхронного кода от асинхронного? Синхронный код выполняется пошагово. Асинхронный — может запускаться и завершаться позже, с использованием callback, promise или async/await. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

Гайд МТС Линк для усиления лидогенерации Как выполнить KPI по лидам с помощью вебинаров? Изучили опыт 7.5 млн онлайн-мероприятий, которые проходят на платформе ежегодно, и спешим поделиться бесплатным гайдом ✅ Что внутри: - Составили пошаговую инструкцию по организации маркетингового вебинара; - Собрали рекомендации экспертов по обучению, выступлениям и маркетингу; - Делимся успешными кейсами компаний DSSL, Just AI, «Гален», «САРШТЕДТ» и «ЭГИС-РУС» ✅ Кому полезно: - Маркетологам — для выполнения KPI по лидам; - Владельцам сложных продуктов — чтобы знакомить с продуктом поэтапно; - Экспертам и блогерам — для монетизации личного бренда; - B2B-командам — для сокращения цикла сделки через обучение клиентов. ✨ Скачайте бесплатно по ссылке Скачать #реклама 16+ mts-link.ru О рекламодателе

🤔 Когда использовать uselayuouteffect, а когда useeffect? Оба этих хука выполняют побочные эффекты в React, но разница в том, когда именно они выполняются useEffect выполняется после рендера и отрисовки в браузере. useLayoutEffect выполняется сразу после рендера, но перед отрисовкой в браузере. То есть useLayoutEffect блокирует рендер, а useEffect — нет. 🚩Когда использовать `useEffect`? useEffect выполняется асинхронно, после того как браузер отрисовал страницу. Используется для: - Запросов к API. - Подключения WebSocket'ов или таймеров. - Логирования данных. - Изменения заголовка страницы (document.title).

import { useState, useEffect } from "react";

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

  useEffect(() => {
    document.title = `Вы кликнули ${count} раз`;
  }, [count]); // Запускается после рендера

  return <button onClick={() => setCount(count + 1)}>Клик: {count}</button>;
}

🚩Когда использовать `useLayoutEffect`? useLayoutEffect выполняется сразу после рендера, но перед тем, как браузер отобразит изменения. Используется для - Синхронных манипуляций с DOM. - Измерения размеров элементов (getBoundingClientRect). - Анимаций (например, при расчёте позиций).

import { useEffect, useLayoutEffect, useState } from "react";

function Example() {
  const [width, setWidth] = useState(0);

  useLayoutEffect(() => {
    const box = document.getElementById("box");
    setWidth(box.offsetWidth);
  }, []);

  return (
    <div>
      <div id="box" style={{ width: "100px", height: "50px", background: "red" }}></div>
      <p>Ширина: {width}px</p>
    </div>
  );
}

Ставь 👍 и забирай 📚 Базу знаний

Блоки для строительства от производителя с доставкой Блоки из полистиролбетона – это современный строительный материал, имеющий ряд преимуществ перед традиционными строительными блоками. ✨ Материал позволяет снизить теплопотери, улучшить звукоизоляцию и значительно упростить процесс возведения зданий, является прочным прочными и легким, что делает его выгодным решением для различных проектов. ✅ Заказывайте! Доставка по Уралу! Узнать больше #реклама avant-pkf.ru О рекламодателе

🤔 Что такое коды ответа и чем они отличаются друг от друга? Это статусные коды HTTP: - 2xx — успех; - 3xx — редиректы; - 4xx — ошибка клиента; - 5xx — ошибка сервера. Они информируют клиента о результате обработки запроса. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Что такое нечистая функция? Нечистая функция (impure function) – это функция, результат которой зависит от внешних данных или побочных эффектов. При одном и том же входном значении она может возвращать разные результаты, что делает её непредсказуемой. 🚩Признаки нечистой функции Зависит от внешнего состояния Изменяет глобальные переменные Вызывает побочные эффекты (запросы, изменения DOM, логирование, изменение переданных аргументов и т. д.) 🚩Примеры нечистых функций Использует внешнюю переменную (зависит от внешнего состояния)

let count = 0;

function increment() {
    count += 1; 
    return count;
}

console.log(increment()); // 1
console.log(increment()); // 2 (результат меняется при каждом вызове)

Модифицирует переданный аргумент

function addElement(arr, item) {
    arr.push(item); // изменяет оригинальный массив
    return arr;
}

let numbers = [1, 2, 3];
console.log(addElement(numbers, 4)); // [1, 2, 3, 4]
console.log(numbers); // [1, 2, 3, 4] (исходный массив изменён)

Выполняет побочные эффекты (например, изменяет DOM)

function changeTitle(newTitle) {
    document.title = newTitle;
}

changeTitle("Новая страница");
console.log(document.title); // "Новая страница"

Генерирует случайное значение

function getRandomNumber() {
    return Math.random();
}

console.log(getRandomNumber()); // 0.37485647 (разный результат при каждом вызове)

🚩Чем отличается от чистой функции? Чистая функция (pure function) всегда возвращает один и тот же результат при одинаковых входных данных и не изменяет внешние состояния. Чистый вариант функции addElement() (не меняет исходный массив)

function addElementPure(arr, item) {
    return [...arr, item]; // создаёт новый массив, не изменяя старый
}

let numbers = [1, 2, 3];
console.log(addElementPure(numbers, 4)); // [1, 2, 3, 4]
console.log(numbers); // [1, 2, 3] (исходный массив не изменился)

Ставь 👍 и забирай 📚 Базу знаний

Зарабатывайте на установках Яндекс Браузера Партнёрская программа для сервисных центров, магазинов компьютерной техники, сайтов для скачивания файлов и авторов статей. Вы можете предлагать его своим клиентам и аудитории — и зарабатывать на новых установках. Выплаты до 500₽ за каждую установку Яндекс Браузера. Подать заявку #реклама 0+ partner.browser.yandex.ru О рекламодателе

🤔 Как удалить eventListener? Нужно использовать ту же функцию и параметры, с которыми слушатель был добавлен. Только при совпадении обработчик будет удалён. Анонимные функции удалить невозможно, если они не были сохранены. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

Получи грант до 3,48 млн на обучение дизайну Поступай на дизайн в Центральный университет с грантом. Для учеников 10–11-х классов и СПО. Освой графический, UI/UX и продуктовый дизайн. Создавай визуальные концепты будущего. На программе студенты получают фундаментальную базу, развивают прикладные навыки, приобретают опыт работы над реальными проектами, собирают портфолио и строят связи внутри дизайн-сообщества Подать заявку #реклама 16+ cu.ru О рекламодателе

🤔 Что происходит в момент запроса в браузере? Когда пользователь вводит URL в адресную строку браузера и нажимает Enter, происходит ряд шагов для получения и отображения запрашиваемой веб-страницы. Этот процесс включает взаимодействие различных компонентов сети и веб-технологий. 🟠Ввод URL и начало запроса Пользователь вводит URL в адресную строку браузера. Браузер проверяет кэш браузера для определения, есть ли сохраненная копия запрашиваемого ресурса. Если ресурс найден в кэше и он актуален, страница загружается из кэша, минуя сетевые запросы. 🟠DNS-разрешение Если ресурс не найден в кэше, браузер выполняет запрос к DNS-серверу для преобразования доменного имени (например, www.example.com) в IP-адрес сервера. 🟠Установление TCP-соединения После получения IP-адреса браузер устанавливает TCP-соединение с сервером. Этот процесс включает в себя трехэтапное рукопожатие: Браузер отправляет SYN-пакет серверу. Сервер отвечает SYN-ACK пакетом. Браузер отправляет ACK-пакет, подтверждая установление соединения. 🟠HTTPS и SSL/TLS Если URL использует HTTPS, происходит дополнительный этап установки защищенного соединения с использованием SSL/TLS: Браузер и сервер обмениваются сертификатами и выполняют шифрование данных. 🟠Отправка HTTP-запроса Браузер отправляет HTTP-запрос на сервер. Например, для получения главной страницы сайта может быть отправлен следующий запрос:

          GET / HTTP/1.1
     Host: www.example.com

🟠Обработка запроса на сервере Сервер принимает запрос, обрабатывает его, генерирует ответ и отправляет его обратно клиенту. Сервер может выполнять различные задачи, такие как доступ к базе данных, обработка логики приложения и рендеринг страниц. 🟠Получение и обработка HTTP-ответа Браузер получает HTTP-ответ от сервера. Ответ включает в себя статусный код, заголовки и тело (содержимое) ответа. Пример HTTP-ответа:

          HTTP/1.1 200 OK
     Content-Type: text/html
     Content-Length: 1234

     <!DOCTYPE html>
     <html>
     <head>
       <title>Пример страницы</title>
     </head>
     <body>
       <h1>Добро пожаловать!</h1>
     </body>
     </html>
     

🟠Парсинг и рендеринг страницы Браузер начинает парсинг HTML-документа. Этот процесс включает построение DOM (Document Object Model) — структуры дерева, представляющей элементы страницы. В процессе парсинга HTML браузер может обнаруживать ссылки на другие ресурсы, такие как CSS, JavaScript, изображения и шрифты, и отправлять дополнительные HTTP-запросы для их загрузки. 🟠Выполнение JavaScript После парсинга HTML и CSS браузер начинает выполнение встроенных и внешних JavaScript-скриптов. JavaScript может изменять DOM и CSSOM (CSS Object Model), что приводит к изменениям в отображении страницы. JavaScript также может отправлять асинхронные запросы (AJAX) для динамической загрузки данных и обновления страницы без перезагрузки. Ставь 👍 и забирай 📚 Базу знаний

Онлайн-магистратура для IT: ИТМО, МИФИ + Яндекс Программы онлайн-магистратуры ИТМО и МИФИ в партнёрстве с Яндексом. Актуальные знания, практическое обучение и гибкий график. Учитесь, совмещая с работой. Доступна господдержка оплаты, отсрочка от армии Перейти на сайт #реклама 16+ practicum.yandex.ru О рекламодателе

🤔 Что такое контекст в функции? Контекст в функции — это окружение, в котором выполняется функция, определяющее, на что ссылается ключевое слово this. В JavaScript, например, контекст может меняться в зависимости от того, как вызывается функция (например, напрямую, через метод объекта или с использованием call/apply). Контекст позволяет функции взаимодействовать с объектом, который вызвал её, и получать доступ к его данным. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

Творческая профессия без опыта: шаг, меняющий многое Нет художественного образования? Не знаешь, с чего начать? Думаешь «это не для меня» или «я уже опоздала»? Все меняется с одного простого шага — нужно разрешить себе попробовать. Именно поэтому я создала бесплатный курс для женщин, которым хочется перемен. Тех, кто ищет дело по душе, тянется к красоте и хочет попробовать что-то новое. Спокойно, без вложений, с поддержкой. На бесплатном 14-дневном курсе по дизайну интерьера с нуля ты узнаешь: — как выбирать правильные материалы; — какие инструменты использовать при работе над проектами; — секреты создания гармоничного пространства. За две недели у тебя на руках будет готовый дизайн-проект реальной квартиры. И все это бесплатно. Запишись на практический курс. И проверь, может, ты следующая, кто скажет: «я нашла себя»❤️ Зарегистрироваться #реклама 16+ diskill-design.ru О рекламодателе