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

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

🤔 Как общаться между iframe и самой страницой? Общение между iframe и родительской страницей может происходить с помощью: Метода postMessage (лучший способ) Доступа к window.frames или window.parent (если тот же домен) Передачи данных через localStorage или cookies 🟠`postMessage` – безопасный способ для разных доменов Метод window.postMessage() позволяет передавать сообщения между разными окнами (iframe, popup, другие вкладки) даже если они на разных доменах. 🚩Передача данных из `iframe` в родительскую страницу *Код в iframe (child.html)

// Отправляем сообщение родительскому окну
window.parent.postMessage({ type: "hello", data: "Привет, родитель!" }, "*");

Код в родительской странице (index.html)

window.addEventListener("message", (event) => {
    console.log("Получено сообщение от iframe:", event.data);
});

* в postMessage означает, что сообщение отправляется любому домену. Лучше указывать конкретный, например:

window.parent.postMessage({ type: "hello" }, "https://example.com");

🚩Передача данных из родителя в `iframe` Код в родительской странице (index.html)

const iframe = document.getElementById("myIframe");

// Ждём, когда iframe загрузится
iframe.onload = () => {
    iframe.contentWindow.postMessage({ type: "greeting", data: "Привет, iframe!" }, "*");
};

Код в iframe (child.html)

window.addEventListener("message", (event) => {
    console.log("Получено сообщение от родителя:", event.data);
});

🚩Доступ к `window.frames` и `window.parent` (только если тот же домен!) Если iframe и основная страница находятся на одном домене, можно обращаться к их window напрямую. Родительская страница → iframe

const iframe = document.getElementById("myIframe");

// Получаем объект `window` внутри `iframe`
iframe.contentWindow.document.body.style.backgroundColor = "lightblue";

iframe → Родительская страница

console.log(window.parent.document.title); // Доступ к заголовку страницы

🚩`localStorage` или `cookies` (если оба окна на одном домене) Можно сохранять данные в localStorage или cookies, а другая сторона будет их читать. Запись в localStorage из iframe

localStorage.setItem("message", "Привет от iframe!");

Чтение localStorage в родительской странице

console.log(localStorage.getItem("message")); // "Привет от iframe!"

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

Яндекс Weekend Offer Mobile Устроиться мобильным разработчиком в Яндекс за выходные. 12–13 апреля проводим Weekend Offer Mobile . До 9 апреля оставьте заявку на участие, 12 апреля пройдите технические собеседования, а 13 апреля познакомьтесь с командами и получите офер. В мероприятии участвует 7 команд: Алиса и Умные устройства, Карты и Навигатор, Авто.ру, Недвижимость, Путешествия, Аренда, Рекламные технологии. Вы сможете пообщаться с менеджерами и выбрать проект, который покажется самым интересным. Зарегистрироваться #реклама yandex.ru О рекламодателе

🤔 Где находятся макро- и микро- таски в EventLoop? В JavaScript EventLoop управляет очередью выполнения: - Микротаски (microtasks) — выполняются сразу после текущего стека, до следующих макротасков. Сюда относятся: - Promise.then - MutationObserver - queueMicrotask - Макротаски (macrotasks) — ставятся в очередь и выполняются после микротасков. Сюда входят: - setTimeout, setInterval - setImmediate (в Node.js) - I/O события - события DOM Таким образом, микротаски имеют более высокий приоритет, чем макротаски. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

Получи грант на обучение в Центральном университете Центральный университет выдает гранты на 4 года обучения в бакалавриате. Грант покрывает до 100% стоимости обучения. Участвуй в отборе, чтобы получить грант. Получи доступ к уникальным активностям для абитуриентов. Для выпускников 10-х, 11-х классов и колледжей. Подать заявку #реклама apply.centraluniversity.ru О рекламодателе

🤔 Как можно работать с датами в js? В JavaScript для работы с датами можно использовать: Date – встроенный объект Библиотеку Intl.DateTimeFormat – для форматирования Библиотеки (moment.js, date-fns, luxon) – для удобной работы 🚩Встроенный объект `Date` Создание даты

const now = new Date(); // Текущая дата и время
console.log(now); // Например: 2025-02-25T12:34:56.789Z

Способы создания даты

new Date(); // Текущая дата
new Date(2025, 1, 25); // 25 февраля 2025 (месяцы с 0)
new Date("2025-02-25"); // ISO строка
new Date(1708850400000); // Unix timestamp (в мс)

Получение значений

const date = new Date();
console.log(date.getFullYear()); // 2025
console.log(date.getMonth());    // 1 (февраль, потому что январь — 0)
console.log(date.getDate());     // 25
console.log(date.getDay());      // 2 (вторник, потому что воскресенье — 0)
console.log(date.getHours());    // Часы
console.log(date.getMinutes());  // Минуты
console.log(date.getSeconds());  // Секунды
console.log(date.getTime());     // Время в миллисекундах (Unix timestamp)

Изменение даты

const date = new Date();
date.setFullYear(2030);
date.setMonth(11); // Декабрь
date.setDate(31);
console.log(date); // 31 декабря 2030

Форматирование даты

const date = new Date();
console.log(date.toDateString()); // "Tue Feb 25 2025"
console.log(date.toISOString());  // "2025-02-25T12:34:56.789Z"
console.log(date.toLocaleString()); // Локальное представление
console.log(date.toUTCString());  // "Tue, 25 Feb 2025 12:34:56 GMT"

Форматирование с Intl.DateTimeFormat

const date = new Date();
const formatter = new Intl.DateTimeFormat("ru-RU", {
    year: "numeric",
    month: "long",
    day: "numeric",
    weekday: "long",
});
console.log(formatter.format(date)); // "вторник, 25 февраля 2025 г."

🚩Библиотеки (более удобные способы) date-fns (легковесная альтернатива Moment.js)

npm install date-fns

import { format, addDays } from "date-fns";

const now = new Date();
console.log(format(now, "dd.MM.yyyy HH:mm")); // 25.02.2025 15:30
console.log(addDays(now, 5)); // Дата + 5 дней

moment.js (устаревший, но популярный)

npm install moment

import moment from "moment";

const now = moment();
console.log(now.format("DD.MM.YYYY HH:mm")); // 25.02.2025 15:30
console.log(now.add(5, "days").format("DD.MM.YYYY")); // +5 дней

luxon (современная альтернатива Moment.js)

npm install luxon

import { DateTime } from "luxon";

const now = DateTime.now();
console.log(now.toFormat("dd.MM.yyyy HH:mm")); // 25.02.2025 15:30
console.log(now.plus({ days: 5 }).toFormat("dd.MM.yyyy")); // +5 дней

Разница между датами

const date1 = new Date("2025-02-25");
const date2 = new Date("2025-03-01");

const diff = date2 - date1; // Разница в миллисекундах
console.log(diff / (1000 * 60 * 60 * 24)); // Разница в днях (4)

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

Дарим подписку на Яндекс Музыку Ответьте на 1 вопрос и Яндекс Музыка ваша для вас и 3-х ваших близких. Кинопоиск и Яндекс Книги тоже в подписке. Попробуйте бесплатно❤️ Попробовать #реклама 18+ music.yandex.ru О рекламодателе Реклама на Яндексе

🤔 Какие есть значения у box-sizing? CSS-свойство box-sizing принимает два значения: - content-box – размер элемента считается по контенту, без учета padding и border. - border-box – размер включает контент, padding и border, что облегчает расчет ширины/высоты. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

Я боялся, что провалю собеседование. Так появился easyoffer Когда я только начинал искать первую работу программистом, меня пугала мысль, что я просто не смогу ответить на вопросы на собеседовании. Типа… ты потратил месяцы на то, чтобы учиться, писал pet-проекты, собирал резюме, рассылаешь отклики — и всё может закончиться на одном-единственном вопросе, на который ты не знаешь ответ. Я реально боялся. Я смотрел видео mock-собеседований на YouTube, останавливал каждое, выписывал вопросы в Notion. Потом вручную писал к ним ответы. И потом ещё по нескольку раз перечитывал. Такой вот "тренажёр" на коленке. 📎 (там на картинке — один из моих реальных списков в Notion, ставь 🔥 если тоже так делал) В какой-то момент я посчитал — у меня уже было выписано больше 500 вопросов. Я почувствовал ужас. Потому что невозможно всё это зазубрить. А что, если спросят как раз тот, к которому я не успел подготовиться?.. Тогда и пришла идея А что если понять, какие из вопросов встречаются чаще всего? Чтобы не учить всё подряд, а сфокусироваться на главном. Так родился easyoffer. Сначала — просто как пет-проект, чтобы показать в резюме и подготовиться к собесам. А потом оказалось, что он реально помогает людям. За первые месяцы его посетили сотни тысяч человек. И я понял: это больше, чем просто пет-проект. Сейчас я делаю EasyOffer 2.0 И уже не один, а вместе с вами. В новой версии будут: – вопросы из реальных собесов, с фильтрацией по грейду, компании, типу интервью – тренажёр с карточками (по принципу интервальных повторений — как в Anki) – база задач с интервью – тренажёр «реальное собеседование», чтобы отрепетировать как в жизни Каждая фича упрощает и сокращает время на подготовку. Все эти штуки я бы мечтал иметь, когда сам готовился к собеседованиям. Я делаю всё на свои деньги. Никаких инвесторов. Только вы и я. Если вы хотите помочь — сейчас самое важное время. Краудфандинг уже стартовал. Благодаря нему я смогу привлечь больше людей для разработки, сбору и обработки собеседований. Все, кто поддержат проект до релиза, получат: 🚀 1 год PRO-доступа по цене месячной подписки. Его можно активировать в любое время, например когда начнете готовится к собесам. ➕ Доступ к закрытому бета-тесту Поддержать 👉 https://planeta.ru/campaigns/easyoffer Спасибо, что верите в этот проект 🙌

За что вы на самом деле платите, внедряя BI? Конференция Fine Day Online! Дата: 17 апреля | Время: 16:00 (МСК) BI-решения помогают бизнесу расти, но их внедрение бывает выходят за рамки бюджета. Где прячутся скрытые расходы? Как избежать лишних затрат? Обсудим на конференции! ✨ Как оценить реальную цену данных ✨ Оптимизация затрат без потери качества аналитики ✨ Ошибки, которые удорожают BI-проекты ✨ Реальный опыт компаний, которые уже прошли этот путь Бонусы для участников: ✅ Доступ к записям конференции и Эксклюзивный чек-лист: "BI без лишних затрат: типовые ошибки и как их избежать" Участие бесплатное! Зарегистрироваться #реклама bi.glowbyteconsulting.com О рекламодателе

🤔 На что можно заменить интерфейсы в js? В JavaScript нет встроенной поддержки интерфейсов, как в TypeScript, Java или C#. Однако, их можно заменить несколькими способами, в зависимости от задачи. 🟠Использование JSDoc (аннотации типов) Можно описывать структуру объектов с помощью @typedef и @param, что помогает при автодополнении и статическом анализе кода.

/**
 * @typedef {Object} User
 * @property {string} name
 * @property {number} age
 */

/**
 * @param {User} user
 */
function printUser(user) {
    console.log(`Имя: ${user.name}, Возраст: ${user.age}`);
}

const person = { name: "Alice", age: 30 };
printUser(person); // Работает!

🟠Использование классов (Abstract Class Pattern) Можно создать абстрактный класс с методами-заглушками, которые нужно реализовать в потомках.

class Animal {
    constructor(name) {
        if (new.target === Animal) {
            throw new Error("Нельзя создать экземпляр абстрактного класса!");
        }
        this.name = name;
    }

    makeSound() {
        throw new Error("Метод makeSound() должен быть переопределён!");
    }
}

class Dog extends Animal {
    makeSound() {
        return "Гав-гав!";
    }
}

const dog = new Dog("Бобик");
console.log(dog.makeSound()); // "Гав-гав!"

// const animal = new Animal("Лев"); // Ошибка!

🟠Проверка структуры объекта (Duck Typing) Можно просто проверять, есть ли нужные методы и свойства у объекта перед использованием.

function useDevice(device) {
    if (typeof device.turnOn !== "function") {
        throw new Error("Объект должен иметь метод turnOn()");
    }
    device.turnOn();
}

const phone = { turnOn: () => console.log("Телефон включен!") };
useDevice(phone); // "Телефон включен!"

const invalidDevice = { power: true };
// useDevice(invalidDevice); // Ошибка: "Объект должен иметь метод turnOn()"

🟠Использование TypeScript (лучший вариант) TypeScript добавляет поддержку интерфейсов в JavaScript.

interface User {
    name: string;
    age: number;
}

function printUser(user: User) {
    console.log(`Имя: ${user.name}, Возраст: ${user.age}`);
}

const person: User = { name: "Alice", age: 30 };
printUser(person); // Работает!

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

Бизнес образование в Moscow Business Academy (MBA) Получите современное бизнес образование от международных экспертов. ✅Более 37 направлений обучения. ✅Международные дипломы. ✅Online и очные форматы обучения. ✅Разборы практических бизнес-кейсов. Скидка на все программы online до 35%! Узнать больше #реклама 16+ moscow.mba О рекламодателе

🤔 Как зарегистрировать компонент глобально в Vue 3? Глобальная регистрация компонента означает, что ты можешь использовать его в любом месте приложения, не подключая вручную. Это удобно для часто используемых элементов, таких как кнопки, формы или заголовки. Регистрация происходит один раз при запуске приложения, и после этого компонент доступен везде. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

26–27 апреля проводим Weekend Offer Frontend Устроиться в Яндекс за выходные — реально. Ищем крутых фронтендеров с опытом работы от 4 лет, готовых работать в офисном или гибридном режиме в России. Подавайте заявку до 23 апреля — и всего за два дня пройдите все технические собеседования. После сможете пообщаться с нанимающими менеджерами и выбрать из 10 команд ту, которая покажется самой интересной. Если всё сложится хорошо, сразу же пришлём вам офер. Зарегистрироваться #реклама yandex.ru О рекламодателе

🤔 Что делает babel? Babel – это транспилер для JavaScript, который преобразует современный код (ES6+ и JSX) в старый, совместимый с более старыми браузерами. 🚩Зачем нужен Babel? 🟠Поддержка старых браузеров Некоторые браузеры (например, Internet Explorer) не поддерживают новые фичи JavaScript. Babel переводит код на более старый стандарт, чтобы он работал везде. 🟠Поддержка современных стандартов (ES6, ES7, ES8...) Позволяет использовать новые возможности JavaScript, даже если браузер их пока не поддерживает. 🟠Компиляция JSX Babel преобразует JSX (используется в React) в обычный JavaScript. 🟠Оптимизация и эксперименты Можно использовать нестандартные предложения для JavaScript, такие как плагины для новых фич. 🚩Как это работает? Babel делает три шага: Парсинг – разбор кода в абстрактное синтаксическое дерево (AST). Трансформация – изменение AST (например, замена const на var). Генерация – создание нового кода из изменённого AST. 🚩Пример работы Babel Современный JavaScript (ES6+)

const greet = (name) => `Hello, ${name}!`;
console.log(greet("Alice"));

После транспиляции Babel (ES5)

"use strict";

function greet(name) {
    return "Hello, " + name + "!";
}
console.log(greet("Alice"));

🚩Использование Babel 1⃣Установка Babel через npm

npm install --save-dev @babel/core @babel/cli @babel/preset-env

2⃣Создание конфигурации (.babelrc)

{
  "presets": ["@babel/preset-env"]
}

3⃣Транспиляция файла (script.js)

npx babel script.js --out-file script.compiled.js

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

Стать бэкендером в Яндексе за несколько дней 12–17 апреля устраиваем Week Offer Backend: за несколько дней можно пройти технические секции и попасть в Яндекс. Для этого нужно зарегистрироваться и решить несколько задач в Контесте. Ищем классных бэкенд-разработчиков с опытом работы от 3 лет на C++, Python, Java/Kotlin или Go, готовых работать в офисном или гибридном режиме в России. Вы сможете выбрать одну из команд: Яндекс Пэй, Яндекс ID, Яндекс Плюс, Яндекс Сплит, Яндекс Сейвы, Яндекс 360. Можно пообщаться с нанимающими менеджерами и выбрать самый интересный проект. Если всё пройдёт хорошо, сразу же получите офер. Зарегистрироваться #реклама yandex.ru О рекламодателе

🤔 Как отследить изменение модели? Способы: - watch: следим за конкретным полем или выражением. - @input или @update:modelValue — события от v-model. - computed с геттером и сеттером — можно ловить изменения при записи. - emit из компонента — в родителе можно слушать события. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

Почему вы не используете Битрикс24 CRM с AI-помощником? 1- не знал 2- забыл Рассказываем и напоминаем! ✅Битрикс24 CRM с AI помогает увеличивать продажи, работать с постоянными клиентами и сохранять все важные данные. AI-помощник CoPilot внутри сервиса расшифрует телефонные разговоры и автоматически заполнит карточки клиента в CRM. Битрикс24 можно использовать бесплатно для всех команд, независимо от их размера. ⚡Не тратьте время на рутину. Узнать больше #реклама 16+ bitrix24.ru О рекламодателе

🤔 Что такое нечистая функция? Нечистая функция (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] (исходный массив не изменился)

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

Ищешь высокооплачиваемые проекты? Попробуй SkillStaff SkillStaff — это платформа для ИТ-специалистов, менеджеров и креаторов, которым мало одного оклада. Здесь можно найти клиентов, выполнять их проекты и увеличивать свой доход. - Проекты с гибким графиком: part time, full time, удаленка и гибрид - Ставка за час работы — та, что ты сам выбрал - Клиенты — ведущие бренды, проверенные с юридической точки зрения при регистрации на платформе - Оплата поступает ежемесячно на расчетный счет исполнителя - Удобный личный кабинет и функционал, автоматизирующий документооборот Все, что нужно для работы — иметь статус самозанятого или ИП, а платформа поможет со всеми нюансами. Регистрируйся прямо сейчас Зарегистрироваться #реклама 16+ skillstaff.ru О рекламодателе