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

Автоматизация маркировки под Честный ЗНАК для бизнеса GetMark - это система для автоматизации и упрощения процесса маркировки товаров под Честный ЗНАК. ✅ Мы предлагаем интеграцию со всеми необходимыми системами, включая Wildberries, Ozon и другие. ✅ Благодаря удобному интерфейсу и поддержке мобильных устройств, вы можете легко управлять маркировкой с любого устройства. ✅ Наши решения подходят для производителей, дистрибьюторов и продавцов. Попробуйте бесплатный тестовый период и получите консультацию специалиста прямо сейчас! Узнать больше #реклама getmark.ru О рекламодателе

📌 Чем let отличается от var ? 💬 Спрашивают в 27% собеседований Ключевые слова let и var используются для объявления переменных, но между ними есть несколько важных различий, касающихся области видимости, поднятия (hoisting) и создания блока. 🤔 Область видимости (Scope) ➕ Var: Объявления переменных с использованием var имеют функциональную область видимости, что означает, что переменная, объявленная с помощью нее внутри функции, доступна везде в этой функции. ➕ Let: В отличие от var, let имеет блочную область видимости. Это означает, что переменная, объявленная с помощью нее в блоке (например, в цикле или условном операторе), будет доступна только в пределах этого блока. 🤔 Поднятие (Hoisting) ➕ Var: Переменные, объявленные с ее помощью, поднимаются в начало функции или скрипта. Это означает, что они могут быть использованы до своего объявления, хотя до инициализации они будут иметь значение undefined. ➕ Let: Переменные, объявленные с ее помощью, также поднимаются, но не инициализируются. Попытка доступа к такой переменной до её объявления приведет к ошибке ReferenceError. Это поведение известно как "временная мертвая зона" (temporal dead zone, TDZ). 🤔 Создание в глобальном контексте ➕ Var: Переменные, объявленные с ее помощью в глобальном контексте, становятся свойствами глобального объекта (window в браузерах). ➕ Let: Переменные, объявленные с ее помощью в глобальном контексте, не становятся свойствами глобального объекта. 🤔 Примеры:

if (true) {
  var varVariable = "Я доступен везде в функции";
  let letVariable = "Я доступен только в этом блоке";
}

console.log(varVariable); // Работает, потому что var имеет функциональную область видимости
console.log(letVariable); // Ошибка, потому что let имеет блочную область видимости

console.log(a); // undefined из-за поднятия
var a = 3;

console.log(b); // ReferenceError из-за временной мертвой зоны
let b = 4;

🤔 Итог: let предоставляет более строгую и предсказуемую область видимости переменных, что улучшает управляемость кодом и уменьшает вероятность ошибок, связанных с неожиданным доступом или изменением данных. var может быть полезен, когда нужна функциональная область видимости, но сейчас let и const (для объявления констант) являются предпочтительными вариантами для управления переменными. В то время как var объявляет переменную, доступную во всей функции, а let ограничивает видимость переменной блоком, в котором она объявлена. 🔥 ТОП ВОПРОСОВ С СОБЕСОВ 🔒 База собесов | 🔒 База тестовых

🧑‍💻 Если твой английский позволяет ответить только на вопрос "Do you speak English", то с этим нужно что-то делать, будучи программистом. 🫤 Ты в курсе, что ... - говорят по-английски — 20% из всех людей. - Большое кол-во IT документации написано на английском. Хочешь понимать код лучше? Изучи язык, который используется в его основе. 📕 На нашем канале ты постепенно будешь набираться опыта, в этом тебе помогут: - Тесты для изучения английского: проверьте свои знания на практике. - Английский через мемы: учите язык весело и с интересом. - Шпаргалки для повторения: закрепите знания быстро и эффективно. - Английский сленг программиста: станьте настоящим профи в коммуникации. 🔥 Маленький шаг в изучении иностранного откроет перед тобой большие возможности будущего специалиста и значительно повысит твое зп. 🌸 Подпишись, do it!

📌 Что такое virtual dom? 💬 Спрашивают в 27% собеседований Virtual DOM (виртуальный Document Object Model) - это концепция, широко используемая в разработке интерфейсов, особенно в библиотеке React от Facebook, а также в других современных фронтенд-фреймворках. DOM - это структура данных, используемая браузерами для представления веб-страниц. Она позволяет программам изменять структуру, стиль и содержание веб-страницы, взаимодействуя с HTML и CSS. Проблема обычного DOM заключается в том, что он может быть довольно медленным при частых обновлениях, поскольку изменения в нем приводят к перерисовке элементов страницы, что может быть ресурсоёмким процессом. Эта концепция призвана решить данную проблему. Вместо того чтобы напрямую взаимодействовать с реальным DOM при каждом изменении, изменения сначала применяются к виртуальному, который является лёгкой копией реального DOM. После этого, с помощью процесса, называемого согласованием (reconciliation), виртуальный DOM сравнивается с предыдущей его версией, чтобы определить, какие именно изменения необходимо внести в реальный. Это позволяет минимизировать количество операций с реальным DOM, что значительно увеличивает производительность приложения. 🤔 Пример без Virtual DOM:

const element = document.getElementById('myElement');
element.textContent = 'Новый текст';

В этом случае каждое изменение непосредственно обновляет DOM, что может быть неэффективно при множественных обновлениях.

🤔 Пример с использованием Virtual DOM (пример на React):

class MyComponent extends React.Component {
  render() {
    return <div>Новый текст</div>;
  }
}

В этом случае, при изменении состояния компонента, React сначала применяет изменения к виртуальному DOM, а затем, используя согласование, оптимально обновляет реальный. Виртуальный Document Object Model позволяет писать код, как если бы можно было менять любую часть веб-страницы в любой момент, не беспокоясь о производительности. Это делает разработку интерфейсов более интуитивно понятной и эффективной. 🤔 Итог: Virtual DOM - это технология для оптимизации обновлений веб-интерфейсов, позволяющая ускорить и упростить разработку сложных пользовательских интерфейсов, минимизируя взаимодействие с медленным реальным DOM. 🔥 ТОП ВОПРОСОВ С СОБЕСОВ 🔒 База собесов | 🔒 База тестовых

Коммутатор ЦОД 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 О рекламодателе

Мы за бесплатное обучение Подборка каналов для роста и развития в сфере Frontend-разработки 👥 Reactify | Frontend Разработка — активное сообщество для бесплатного обучения веб-разработке. 💼 Frontend | Собеседования — огромная база актуальной теории для Frontend Разработчиков. Обучайтесь, общайтесь, растите вместе с нами. Станьте частью IT-сообщества!

📌 Какие типы данных существуют? 💬 Спрашивают в 27% собеседований Существует несколько основных типов данных, которые можно разделить на две категории: примитивные типы и объекты. 🤔 Примитивные типы: ➕ Number: представляет как целые числа, так и числа с плавающей точкой. Например, 42 или 3.14. ➕ String: представляет текстовые данные. Строки неизменяемы. Пример: "Привет, мир!". ➕ Boolean: имеет два значения, true и false, и используется для работы с логическими операциями. ➕ Undefined: переменная имеет тип undefined, если она была объявлена, но ей не было присвоено никакого значения. ➕ Null: специальное значение, которое представляет собой "ничего" или "пустое значение". Важно отметить, что null является объектом из-за ошибки в ранних версиях JavaScript. ➕ Symbol: уникальное и неизменяемое значение, используемое как ключ для свойств объекта. Создают уникальные идентификаторы в объектах. ➕ BigInt: тип данных, позволяющий работать с целыми числами произвольной точности. Введен для представления чисел, которые больше, чем максимальное значение, которое может представить тип Number. 🤔 Объекты: ➕ Object: могут содержать наборы пар ключ-значение, где ключи - строки или символы, а значения — любой тип данных. Используются для представления коллекций данных, сложных структур или для создания пользовательских типов данных с помощью классов и прототипов. 🤔 Специальные типы: ➕ Массивы: используются для хранения упорядоченных коллекций данных. ➕ Функции: объекты первого класса, поддерживающие вызов. ➕ Дата: для работы с датами и временем. ➕ Регулярные выражения: для работы с регулярными выражениями. Важно понимать разницу между примитивными типами и объектами, поскольку это влияет на способ работы с переменными и передачу данных в функции. 🔥 ТОП ВОПРОСОВ С СОБЕСОВ 🔒 База собесов | 🔒 База тестовых

Станьте AI-разработчиком на Python и зарабатывайте от 150.000₽ в месяц 🔥🔥🔥 Мы научим вас создавать и тренировать нейронные сети, и вы сможете: 1️⃣ Устроиться разработчиком в крупную компанию и зарабатывать от 150 тыс. ₽ в месяц 2️⃣ Разрабатывать такие проекты на заказ и зарабатывать от 500 тыс. ₽ за проект 3️⃣ Создать нейро-сотрудника в вашей компании и вырасти на +30-100% в зарплате На интенсиве будет много практики: создадим 9 нейросетей за 1 вечер: 🧬 Оценка выброса CO2 по параметрам машины 🧬 Сегментация изображения для робота доставщика 🧬 Трекинг людей на видео 🧬 Распознавание речи и другие Ведущий интенсива - Senior AI-разработчик и основатель Университета искусственного интеллекта 🔥 Регистрируйтесь на бесплатный интенсив! Встречаемся в ближайшую среду. Вы узнаете, как освоить самую востребованную профессию 2024 года и гарантированно зарабатывать через 7 мес.

Серверное Оборудование Купить БУ в Москве с Гарантией! Компания WestComp продает бу серверное оборудование вендора HPE в поколении Gen8 Gen9 и Gen10 всех линеек в отличном состоянии! Купить серверы можно с НДС без повышения цены и в лизинг. Доступна услуга Colocation в ЦОД TIER III Москвы! Можно выгодно купить сервер HP Proliant DL или BL, СХД HPE 3PAR, HPE Synergy, HPE BladeSystem, HPE Apollo любой конфигурации с гарантией до 5 лет! Цены в 10 раз ниже чем на новое оборудование! Выбрать #реклама westcomp.ru О рекламодателе

Ещё 4 года назад в JavaScript существовал только один тип данных — number. А теперь есть ещё и BigInt. Он отвечает за большие числа. Как и зачем происходило становление BigInt и какие операции он поддерживает — в шестом выпуске бесплатного курса по JavaScript от AvitoTech. Рекомендуем посмотреть все эпизоды, база по фронтенду ещё никому не мешала.

📌 Что такое promise и какие состояния у него есть? 💬 Спрашивают в 47% собеседований Promise (обещание) — это объект, представляющий завершение (или неудачу) асинхронной операции и её результат. Он позволяет ассоциировать обработчики с асинхронным действием, тем самым избавляя от необходимости использовать обратные вызовы (callback-функции). Они упрощают работу с асинхронными операциями, такими как AJAX-запросы или чтение файлов, позволяя написать код, который проще понять и поддерживать. 🤔 Состояния: 1️⃣ Pending (Ожидание): Начальное состояние; асинхронная операция не завершена. 2️⃣ Fulfilled (Исполнено): Операция завершена успешно, и promise возвращает результат. 3️⃣ Rejected (Отклонено): Операция завершена с ошибкой, и promise возвращает причину отказа. ➕ Пример:

let обещание = new Promise(function(resolve, reject) {
    // Эмуляция асинхронной операции, например, запроса к серверу
    setTimeout(() => {
        // Условие успешного выполнения операции
        if (/* условие успеха */) {
            resolve("данные получены");
        } else {
            reject("ошибка при получении данных");
        }
    }, 1000);
});

обещание.then(
    function(результат) { console.log(результат); }, // обработчик успеха
    function(ошибка) { console.log(ошибка); } // обработчик ошибки
);

Promise поддерживает цепочки вызовов (then), что позволяет организовывать асинхронный код последовательно и читабельно. Кроме того, существуют вспомогательные методы, такие как Promise.all, Promise.race, Promise.resolve, и Promise.reject, которые облегчают работу с группами асинхронных операций. 🤔 Итог: Promise — это способ организации асинхронного кода, который предоставляет более удобный и понятный интерфейс для работы с асинхронными операциями, чем традиционные callback-функции. У каждого обещания есть три состояния: ожидание, исполнено и отклонено, которые помогают управлять результатом асинхронных операций. 🔥 ТОП ВОПРОСОВ С СОБЕСОВ 🔒 База собесов | 🔒 База тестовых

🔥 Один в поле не воин, поэтому топовый программист должен находится в топ команде. 🧑‍💻 Марк Цукерберг создал первоначальную версию Facebook в одиночку, но для превращения стартапа в глобальную социальную сеть потребовалась мощная команда. 👌 IT мероприятия - одно из тех мест, где можно найти единомышленников в данной нише. 🔥 Подпишись на канал IT события, чтобы не упустить возможность в реализации своего потенциала.

Методичка: как сделать онлайн-встречи эффективнее Надоело ждать коллег, которые постоянно забывают о встречах, а отсутствие повестки и потерянные договоренности мешают нормально работать? Команда МТС Линк собрала на 37 страницах полезные материалы, чек-листы и кейсы, которые помогают компаниям проводить эффективные совещания в онлайне с помощью сервиса Встречи. Из методички узнаете: - Как создать постоянную ссылку и подключаться на встречи в 2 клика, - Как делать заметки и работать с файлами, не переживая за качество связи и безопасность данных. - Как облегчает жизнь ИИ, который расшифровывает созвоны в текст и автоматически отправляет расшифровку на почту. Еще в методичке описаны 7 способов оценки текущей эффективности ваших онлайн-встреч. Получить гайд можно бесплатно на сайте. Скачать #реклама mts-link.ru О рекламодателе

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

📌 Что такое замыкание ? 💬 Спрашивают в 47% собеседований Замыкание — это функция, которая запоминает своё лексическое окружение даже после того, как она выполняется вне своей области видимости. Другими словами, функция, объявленная в определённой области видимости, сохраняет доступ к переменным этой области, даже когда она вызывается за пределами своего первоначального контекста. Это важно по нескольким причинам: 1️⃣ Инкапсуляция данных: Позволяют скрыть переменные внутри функции, делая их недоступными извне, кроме как через другую функцию, созданную в той же области видимости. 2️⃣ Сохранение состояния: Позволяют сохранять состояние между вызовами функции, без использования глобальных переменных. 3️⃣ Кадрирование и функциональное программирование: Облегчают каррирование и другие техники функционального программирования, позволяя функциям работать с переменными, которые были в их области видимости в момент создания. ➕ Пример:

function создатьСчетчик() {
    let количество = 0; // переменная количество "замкнута" внутри функции увеличить

    function увеличить() {
        количество += 1;
        return количество;
    }

    return увеличить;
}

const счетчик = создатьСчетчик();
console.log(счетчик()); // 1
console.log(счетчик()); // 2

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

🥰 Как улучшить свой код 🥰 Настрой среду, в которой ты работаешь! 🥰 Многие программисты пишут код на настройках по умолчанию - ошибка. 🥰 Не подключают плагины, которые ускорят работу и увеличат эффективность - фатальная ошибка. 👩‍💻 Канал Visual Studio Сode | Плагины сделает твою рабочую среду универсальным и мощным инструментом. 🥰 Повышай свою эффективность и подписывайся на канал Visual Studio Сode | Плагины