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

📌 В чем разница == и === ? 💬 Спрашивают в 20% собеседований Операторы == (равно) и === (строго равно) используются для сравнения значений, но работают по-разному, что важно понимать для написания надёжного и предсказуемого кода. 🤔 Оператор == (равно) Сравнивает значения двух переменных, но перед сравнением производит приведение типов, если переменные относятся к разным типам. Это означает, что если вы сравниваете число с строкой, JavaScript попытается преобразовать строку в число, а затем сравнить эти два значения. Этот процесс может привести к неинтуитивным результатам. ➕ Примеры:

'2' == 2 // true, так как строка '2' преобразуется в число 2 перед сравнением
0 == false // true, так как 0 и false считаются эквивалентными
null == undefined // true, специальное правило языка

🤔 Оператор ===(строго равно) В отличие от ==, он сравнивает и значения, и типы без приведения типов. Если типы различаются, оператор немедленно возвращает false, не пытаясь преобразовать один тип в другой. Это делает сравнение более строгим и предсказуемым. ➕ Примеры:

'2' === 2 // false, так как типы различаются
0 === false // false, разные типы: число и булево значение
null === undefined // false, разные типы

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

Ищем людей, которые пройдут по нехоженым тропам тревел-теха и предложат оригинальные решения. Собираемся на О!Хакатоне — мероприятии от Островка с призовым фондом в один миллион рублей.  Тебя ждут задания на двух треках: 👉🏻 динамическое ценообразование, 👉🏻 система ранжирования отелей.          Также можно будет посетить лекции, мок-интервью и AMA-сессии с разработчиками Островка. Все активности пройдут в онлайн-формате с 28 сентября по 5 октября 2024 года. Участвовать можно из любой точки мира.  Регистрируйся по ссылке до 19 сентября и стань автором лучшего тревел-тех-решения. Реклама. ООО "БРОНИРОВАНИЕ ГОСТИНИЦ". ИНН 7703389880.

Обучайся ИТ и строй карьеру уже во время учебы Это возможно в «Школе 21» — школе цифровых технологий от Сбера Вот лишь несколько особенностей: — обучение в школе бесплатное, от тебя нужна только мотивация — 100% выпускников работают в крутых ИТ-компаниях — стажировка входит в образовательный трек — во время обучения соберешь портфолио и получишь реальный опыт Кампусы школы находятся в Москве, Ярославле, Сургуте, Казани и других городах России и работают 24/7. Узнавай больше и подавай заявку на сайте «Школы 21» уже сейчас! Реклама. Заказчик АНО "Школа 21" ИНН 7736316133

📌 Чем var отличается от const ? 💬 Спрашивают в 23% собеседований Ключевые слова var и const используются для объявления переменных, но они имеют ряд существенных различий, которые важно понимать для правильного использования в коде. 🤔 Область видимости (Scope) ➕ Var: Объявления переменных с ее использованием имеют функциональную область видимости (function scope), что означает, что переменная доступна везде в функции, где была объявлена. ➕ Const: Как и let, она имеет блочную область видимости (block scope), ограничивая доступность переменной блоком (например, циклом или условным оператором), в котором была объявлена. 🤔 Переназначение и изменение ➕ Var: Переменные, объявленные с помощью нее, могут быть переназначены и изменены. Это означает, что после объявления переменной её можно не только изменить, но и полностью переназначить на другое значение. ➕ Const: Переменные, объявленные с помощью нее, не могут быть переназначены. Однако, если переменная представляет собой объект или массив, её содержимое может быть изменено (например, можно добавить новое свойство в объект или новый элемент в массив). Важно понимать, что const предотвращает переназначение самой переменной, но не защищает содержимое объекта от изменений. 🤔 Поднятие (Hoisting) ➕ Var: Переменные, объявленные через нее, поднимаются в начало своей функциональной области видимости перед выполнением кода. Однако до их объявления в коде они будут иметь значение undefined. ➕ Const: Подобно let, ее объявления тоже поднимаются, но доступ к переменной до её объявления в коде приведёт к ошибке ReferenceError. Это явление известно как "временная мертвая зона". 🤔 Инициализация ➕ Var: Эти переменные можно объявить без инициализации, и их начальное значение будет undefined. ➕ Const: Эти переменные требуют обязательной инициализации при объявлении. Если попытаться объявить его без инициализации, это приведет к синтаксической ошибке. 🤔 Примеры:

var varVariable = 1;
varVariable = 2; // Переназначение возможно

const constVariable = { a: 1 };
constVariable.a = 2; // Изменение содержимого объекта возможно
// constVariable = { b: 3 }; // Переназначение вызовет ошибку

if (true) {
  var varScope = "доступна везде в функции";
  const constScope = "доступна только в этом блоке";
}
console.log(varScope); // Выведет строку
console.log(constScope); // Ошибка: constScope не определена

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

Автоматизация маркировки под Честный ЗНАК для бизнеса 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 события, чтобы не упустить возможность в реализации своего потенциала.