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

🤔 Какой тип у функции? В JavaScript функция — это объект типа function. Он имеет ссылочный тип и может передаваться как значение. Чем похожи массивы, объекты и функции? Все они — объекты. Можно добавлять свойства, передавать по ссылке. У каждого есть прототип, и они наследуют от Object. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Какие методы будут у API? Методы API чаще всего соответствуют CRUD-операциям: - GET — получение данных. - POST — создание ресурса. - PUT/PATCH — обновление. - DELETE — удаление. Если REST не используется, методы могут быть обёрнуты в RPC-стиль или GraphQL-запросы: getUser, updatePrice, subscribeToPrice, logUserActivity. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Что выбираешь ооп или функции? Выбор между объектно-ориентированным программированием (ООП) и функциональным программированием (ФП) зависит от задачи, которую нужно решить. Оба подхода имеют свои плюсы и минусы. 🚩Когда использовать ООП? Объектно-ориентированное программирование подходит, когда: Нужно моделировать реальные объекты и их поведение Приложение состоит из множества взаимодействующих сущностей Важно инкапсулировать данные и защитить их от прямого изменения Требуется повторное использование кода через наследование и полиморфизм class Animal { constructor(name) { this.name = name; } speak() { console.log(`${this.name} издает звук`); } } class Dog extends Animal { speak() { console.log(`${this.name} лает`); } } const dog = new Dog("Бобик"); dog.speak(); // "Бобик лает" 🚩Когда использовать функциональное программирование? Функциональный подход хорош, если Код должен быть чистым и предсказуемым Нужно избегать изменений состояния (иммутабельность) Требуется много работы с массивами, коллекциями данных Нужно легко писать асинхронный код const double = num => num * 2; const numbers = [1, 2, 3, 4]; const doubledNumbers = numbers.map(double); console.log(doubledNumbers); // [2, 4, 6, 8] Ставь 👍 и забирай 📚 Базу знаний

🤔 Какие достоинства у инкрементального DOM против виртуального? Инкрементальный DOM (например, в Svelte): - Менее абстрактен — ближе к реальному DOM. - Быстрее монтируется — нет необходимости в полной виртуальной копии. - Меньше памяти и меньше промежуточных структур. В отличие от виртуального DOM: - он не сравнивает деревья, а прямо вставляет нужные изменения. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Как мы будем через js анимировать что либо? В JavaScript есть три основных способа создания анимаций: CSS-анимации (transition, @keyframes) + изменение классов через JS Метод requestAnimationFrame() Использование библиотек (GSAP, Anime.js, Velocity.js) 🟠CSS-анимации + управление через JS Самый простой способ — использовать CSS-анимации, а в JS только добавлять или убирать классы. Анимировать #box { width: 100px; height: 100px; background: red; transition: transform 0.5s ease-in-out; } .move { transform: translateX(200px); } function toggleBox() { document.getElementById("box").classList.toggle("move"); } 🟠`requestAnimationFrame()` — лучший способ в чистом JS Если нужно более гибкое управление анимацией, используем requestAnimationFrame(). Старт #box { width: 50px; height: 50px; background: blue; position: absolute; } let position = 0; let animationId; function animate() { position += 5; // Двигаем на 5px за кадр document.getElementById("box").style.transform = `translateX(${position}px)`; if (position < 300) { // Останавливаем, когда достигнет 300px animationId = requestAnimationFrame(animate); } } function startAnimation() { cancelAnimationFrame(animationId); // Останавливаем предыдущую анимацию position = 0; animate(); } 🟠Библиотеки (GSAP, Anime.js, Velocity.js) Если нужно делать мощные анимации с минимальным кодом, лучше использовать библиотеку. Анимировать function animateBox() { gsap.to("#box", { x: 300, rotation: 360, duration: 2, ease: "elastic.out(1,0.3)" }); } Ставь 👍 и забирай 📚 Базу знаний

🤔 Какие типы данных существуют? Существует несколько основных типов данных, которые можно разделить на две категории: примитивные типы и объекты. 🚩Примитивные типы: 🟠Number представляет как целые числа, так и числа с плавающей точкой. Например, 42 или 3.14. 🟠String представляет текстовые данные. Строки неизменяемы. Пример: "Привет, мир!". 🟠Boolean имеет два значения, true и false, и используется для работы с логическими операциями. 🟠Undefined переменная имеет тип undefined, если она была объявлена, но ей не было присвоено никакого значения. 🟠Null специальное значение, которое представляет собой "ничего" или "пустое значение". Важно отметить, что null является объектом из-за ошибки в ранних версиях JavaScript. 🟠Symbol уникальное и неизменяемое значение, используемое как ключ для свойств объекта. Создают уникальные идентификаторы в объектах. 🟠BigInt тип данных, позволяющий работать с целыми числами произвольной точности. Введен для представления чисел, которые больше, чем максимальное значение, которое может представить тип Number. 🚩Объекты могут содержать наборы пар ключ-значение, где ключи - строки или символы, а значения — любой тип данных. Используются для представления коллекций данных, сложных структур или для создания пользовательских типов данных с помощью классов и прототипов. Ставь 👍 и забирай 📚 Базу знаний

🤔 Что такое SVG? SVG (Scalable Vector Graphics) — это векторный графический формат, основанный на XML. Он позволяет отображать графику (фигуры, линии, текст) с возможностью масштабирования без потери качества. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Для чего нужна методология в html? Методология в HTML (и в веб-разработке в целом) нужна для организации и структурирования кода так, чтобы он был понятным, поддерживаемым и масштабируемым. Она помогает разработчикам работать в команде, избегать хаоса в проекте и ускоряет развитие продукта, делая код простым для чтения и изменения. 🚩Зачем это нужно 🟠Понятность кода Без единого подхода код может стать "кашей" из классов и тегов. Методология помогает дать элементы структуры, которые легко понять не только автору кода, но и другим разработчикам. 🟠Снижение ошибок Если есть четкие правила, уменьшается риск дублирования, неправильных имен или конфликтов стилей. 🟠Упрощение масштабирования В больших проектах количество HTML-структур растет, и без системного подхода будет сложно добавлять новые элементы, не нарушая старые. 🟠Легкость сопровождения С методологией легко найти нужные элементы и вносить изменения. 🚩Примеры популярных методологий 🟠БЭМ (Блок, Элемент, Модификатор) Одна из самых популярных методологий для HTML и CSS. - Она предлагает структурировать классы так: - Блок: независимый компонент (например, menu). - Элемент: часть блока (например, menu__item). - Модификатор: вариант блока или элемента (например, menu__item--active). Пример кода Главная О нас Контакты 🟠Atomic Design Основана на создании интерфейсов из "атомов" (простейшие элементы, например, кнопки), "молекул" (комбинации атомов, например, форма) и "организмов" (сложные компоненты, например, шапка сайта). Пример Клик Имя 🟠SMACSS (Scalable and Modular Architecture for CSS) Делит код на модули (например, глобальные стили, компоненты, утилиты) и предлагает поддерживать независимость и минимизацию дублирования кода. Ставь 👍 и забирай 📚 Базу знаний

В нашем канале много ценного для разработчиков по подготовке к собесам👇 Уже 2 года мы развиваем комьюнити, где 10000+ разработчиков, и вместе мы тренируем собеседования и выжимаем из рынка максимум! Полные разборы собеседований: Сбер, VK, OZON, M-Video, Evrone, еще раз OZON, IT One, Trading View, МТС, Лантан, ДОМ.РФ Стримы с гостями и записями: Как проходить собеседование на английском Как решать livecoding задачи Прокачали более 30 резюме вместе с Юрой Сборники вопросов по темам: Кибербезопасность на собеседовании Все вопросы по React на собеседовании Все вопросы по TypeScript на собеседовании Как решать задачи двумя указателями Вопросы с Vue собеседований Вопросы по сетям и методологиям с 200 собесов Вопросы по JS с 200 собесов Какие задачи спрашивают на livecoding чаще Полезные посты: Job-борды для поиска работы Запись нашего самого кринжового собеса Новый HTTP метод QUERY Статистика по рынку: Июль, Июнь, Май, Апрель, Март Текущие рекорды участников: Оффер 6800$ net с релокацией на Кипр Из Шанхая до 4500$ в американскую компанию Получили 427 000 на руки в Сбер и отказались Выбили 380 000 на руки в банк и приняли! Наши встречи в Питере, Москве, Шанхае Как я прохожу собесы на ютубе: Оффер 260к на Go в Empoycity Оффер 300к на Go в "Системная интеграция" Отжал 390 gross + 25% премии в Иннотех Оффер на лида 415 gross + 20% премии в ПСБ А еще каждый четверг у нас проходят полезные стримы с решениями задач и разборами резюме) Подписывайся 👇 Ссылка скрыта Реклама, erid: 2W5zFHWEhaH ИП Галактионов Тихон Витальевич, ИНН 771618975809