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

🤔 Как работает settimeout? Функция setTimeout используется для выполнения кода или функции спустя заданный интервал времени, однократно. Она является частью Web API в браузерах и глобального объекта global в Node.js, что делает её доступной для использования в любом окружении.

let timeoutID = setTimeout(function[, delay, arg1, arg2, ...]);
let timeoutID = setTimeout(functionCode[, delay]);

function: Будет вызвана после задержки. functionCode: Строка кода для выполнения (использование этой формы не рекомендуется по соображениям безопасности). delay: Задержка в миллисекундах, после которой будет выполнена функция. Если не указать, по умолчанию будет использовано значение 0. arg1, arg2, ...: Аргументы, которые будут переданы в функцию при её вызове.

function sayHello() {
  console.log('Привет!');
}

// Вызывает функцию sayHello после задержки в 2000 миллисекунд (2 секунды)
setTimeout(sayHello, 2000);

🚩Отмена выполнения setTimeout Вызов ее возвращает идентификатор таймера, который можно использовать для отмены выполнения с помощью функции clearTimeout.

let timerId = setTimeout(sayHello, 2000);

// Отменяет выполнение
clearTimeout(timerId);

🚩Особенности поведения 🟠Минимальная задержка В HTML5 спецификация предусматривает минимальную задержку в 4ms для вложенных таймеров и в некоторых других случаях, что может повлиять на ожидаемое время выполнения. 🟠Задержка в неактивных вкладках Браузеры могут изменять поведение таймеров для неактивных вкладок для оптимизации производительности и энергопотребления. Это может привести к значительно большей задержке, чем указано. 🟠Асинхронность setTimeout не блокирует выполнение кода, который следует за ним. Он лишь запланирует выполнение функции на будущее, позволяя остальному коду продолжать выполняться без ожидания. Ставь 👍 и забирай 📚 Базу знаний

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

🤔 Как мы будем через js анимировать что либо? В JavaScript есть три основных способа создания анимаций: CSS-анимации (transition, @keyframes) + изменение классов через JS Метод requestAnimationFrame() Использование библиотек (GSAP, Anime.js, Velocity.js) 🟠CSS-анимации + управление через JS Самый простой способ — использовать CSS-анимации, а в JS только добавлять или убирать классы.

<button onclick="toggleBox()">Анимировать</button>
<div id="box"></div>

<style>
  #box {
    width: 100px;
    height: 100px;
    background: red;
    transition: transform 0.5s ease-in-out;
  }
  .move {
    transform: translateX(200px);
  }
</style>

<script>
  function toggleBox() {
    document.getElementById("box").classList.toggle("move");
  }
</script>

🟠`requestAnimationFrame()` — лучший способ в чистом JS Если нужно более гибкое управление анимацией, используем requestAnimationFrame().

<button onclick="startAnimation()">Старт</button>
<div id="box"></div>

<style>
  #box {
    width: 50px;
    height: 50px;
    background: blue;
    position: absolute;
  }
</style>

<script>
  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();
  }
</script>

🟠Библиотеки (GSAP, Anime.js, Velocity.js) Если нужно делать мощные анимации с минимальным кодом, лучше использовать библиотеку.

<button onclick="animateBox()">Анимировать</button>
<div id="box"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>

<script>
  function animateBox() {
    gsap.to("#box", { x: 300, rotation: 360, duration: 2, ease: "elastic.out(1,0.3)" });
  }
</script>

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

🤔 Что такое inline block в отличие от inline элемента? Inline block отображается в одну строку, как inline-элементы, но позволяет задавать размеры (ширину и высоту) и отступы. В отличие от inline-элементов, такие элементы сохраняют возможность занимать всю строку, как block-элементы. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 В чем различие методов call apply bind? Методы call, apply и bind принадлежат к функциональному объекту Function и используются для указания контекста this при вызове функции. Хотя все три метода позволяют контролировать значение this внутри функции, между ними существуют ключевые различия в способе использования и поведении. 🚩Сall Вызывает функцию, явно устанавливая this в первом аргументе. Остальные аргументы передаются в вызываемую функцию как есть.

function greet(message, name) {
  console.log(${message}, ${name}. This is ${this});
}

greet.call("Earth", "Hello", "Alice"); // "Hello, Alice. This is Earth"

🚩Apply Очень похож на call, но принимает аргументы в виде массива, а не по отдельности.

function greet(message, name) {
  console.log(
${message}, ${name}. This is ${this}
);
}

greet.apply("Earth", ["Hello", "Alice"]); // "Hello, Alice. This is Earth"

🚩Bind Создаёт новую функцию, которая, когда она вызывается, имеет установленный контекст this, указанный в первом аргументе. В отличие от call и apply, bind не вызывает функцию сразу, а возвращает новую функцию, которую можно вызвать позже.

function greet(message, name) {
  console.log(
${message}, ${name}. This is ${this}
);
}

const greetEarth = greet.bind("Earth", "Hello", "Alice");
greetEarth(); // "Hello, Alice. This is Earth"

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

🤔 Как id может участвовать в ссылке? В URL-адресе id элемента используется в качестве якоря, который указывает браузеру, куда прокрутить страницу. Например, если элемент имеет id section1, то адрес https://example.com#section1 автоматически переместит страницу к этому элементу. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

⚡ Новые каналы с вакансиями и стажировками для джунов В этих каналах публикуются все свежие вакансии и стажировки 🔺 ВАКАНСИИ

Горячие вакансии с привлекательными офферами для джуниор разработчиков, аналитиков, дизайнеров и QA-специалистов.

👉 ПОДПИСАТЬСЯ 🔺СТАЖИРОВКИ

Стажировки для начинающих специалистов в IT независимо от возраста!

👉 ПОДПИСАТЬСЯ 🔺Junojobs

Вакансии и стажировки для junior-разработчиков на удалёнке.

👉 ПОДПИСАТЬСЯ 🔺БИГТЕХ

Junior вакансии и стажировки в крупнейших IT-компаниях мира: NVidia, Apple, T-банк, Яндекс, Google и т. д.

👉 ПОДПИСАТЬСЯ 🔺Макс из < codereview />

Эксперименты про трудоустройство в IT, советы для быстрого поиска работы и офферы для джунов.

👉 ПОДПИСАТЬСЯ

🤔 Что такое делегирование? Делегирование событий (Event Delegation) — это техника, при которой мы не навешиваем обработчик на каждый элемент, а ставим один обработчик на родителя и отслеживаем события его потомков. 🚩Как работает делегирование? Обычный способ (без делегирования) Если у нас есть 10 кнопок, мы можем повесить обработчик на каждую

document.querySelectorAll("button").forEach((btn) => {
  btn.addEventListener("click", () => {
    console.log("Кнопка нажата");
  });
});

Если кнопок 1000, это создаст 1000 обработчиков, что неэффективно. Если кнопки добавляются динамически (например, из API), обработчик на новые кнопки не сработает. 🟠Делегирование событий (оптимальный способ) Вместо того чтобы вешать обработчик на каждую кнопку, ставим один обработчик на родительский элемент и проверяем, кто вызвал событие:

document.getElementById("container").addEventListener("click", (event) => {
  if (event.target.tagName === "BUTTON") {
    console.log("Кнопка нажата:", event.target.textContent);
  }
});

🟠Пример с динамическими элементами Если мы добавляем кнопки динамически, обработчик все равно будет работать

document.getElementById("container").addEventListener("click", (event) => {
  if (event.target.classList.contains("btn")) {
    console.log("Нажата кнопка:", event.target.textContent);
  }
});

// Добавляем новую кнопку динамически
setTimeout(() => {
  const newButton = document.createElement("button");
  newButton.classList.add("btn");
  newButton.textContent = "Новая кнопка";
  document.getElementById("container").appendChild(newButton);
}, 2000);

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

🤔 Что такое z-index? Свойство z-index в CSS определяет порядок расположения элементов на оси Z (перекрытие). Элементы с более высоким z-index располагаются поверх элементов с более низким значением. Однако свойство работает только для элементов с установленным position отличным от static. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Как с помощью js можно передвигать вперед/назад по истории браузера? В JavaScript можно перемещаться вперед и назад по истории браузера с помощью объекта window.history. 🟠Использование `history.back()` и `history.forward()` Эти методы аналогичны кнопкам "Назад" и "Вперед" в браузере.

history.back();    // Перемещение на одну страницу назад
history.forward(); // Перемещение на одну страницу вперед

Пример кнопок "Назад" и "Вперед"

<button onclick="history.back()">⬅️ Назад</button>
<button onclick="history.forward()">Вперед ➡️</button>

🟠Использование `history.go(n)` Этот метод позволяет перемещаться на определенное количество шагов: history.go(-1) – назад на 1 страницу history.go(1) – вперед на 1 страницу history.go(-2) – назад на 2 страницы

history.go(-2); // Перейти на две страницы назад
history.go(3);  // Перейти на три страницы вперед

🟠Получение длины истории `history.length` Если нужно узнать, сколько страниц в истории текущей сессии:

console.log(history.length); // Количество записей в истории

🟠Манипуляции с историей: `pushState()` и `replaceState()` Если нужно изменить URL без перезагрузки страницы, можно использовать: history.pushState(state, title, url) Добавляет новый URL в историю (как будто пользователь перешел по ссылке).

history.pushState({ page: 1 }, "Title 1", "/page1");

history.replaceState(state, title, url) Заменяет текущий URL (не добавляет новую запись в историю).

history.replaceState({ page: 2 }, "Title 2", "/page2");

Пример динамического изменения истории:

document.querySelector("button").addEventListener("click", () => {
  history.pushState({ page: "about" }, "About Page", "/about");
});

🟠Отслеживание изменений истории `popstate` Когда пользователь нажимает "Назад" или "Вперед", можно реагировать с помощью события popstate

window.addEventListener("popstate", (event) => {
  console.log("Текущий state:", event.state);
});

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

🤔 Что известно про отладку JS? Для отладки JavaScript-кода используются инструменты разработчика (DevTools) в браузерах, такие как Chrome или Firefox. Вы можете ставить точки останова, отслеживать значения переменных в режиме выполнения, использовать команду debugger для остановки кода и логировать информацию через console.log(). Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

💡 В EasyOffer 2.0 появится фильтрация вопросов по грейдам и типам интервью! 📊 Например, вот вероятности ТОП-30 вопросов, которые задают на HR-скрининге Python-разработчику уровня Middle/Senior. Данные основаны на 53 реальных интервью. 97% Какие у тебя зарплатные ожидания 73% Какие у тебя есть вопросы 44% Какие критерии при выборе будущей работы 41% Расскажи о себе 38% Почему ищешь работу 35% Расскажи про свой опыт 35% Расскажи про проект на предыдущей работе 32% Почему уволился с предыдущей работы 29% Где территориально сейчас живешь/находишься 23% Есть ли другие предложения по работе 17% Есть ли военный билет 17% Почему хочешь сменить работу 17% Как проводишь свободное время 17% Расскажи про задачи на предыдущей работе 17% Сколько коммерческого опыта работы с Python 17% С какими БД работал 14% Находишься ли в активном поиске работы 14% С каким стеком работаешь 14% Почему решил откликнуться на нашу вакансию 14% Какой текущий статус поиска работы 11% Почему решил стать программистом 11% С какими фреймворками работал 11% Какую зарплату получал на предыдущей работе 11% Работаешь ли в настоящий момент 11% На какой грейд себя оцениваешь 11% Как быстро можешь приступить к работе после получения офера 11% Расскажи про свои pet-проекты 8% Какие знаешь типы данных в Python 8% Что такое декоратор в Python 8% Что ищешь на новой работе 🚀 Скоро стартует краудфандинговая кампания, которая поможет ускорить разработку EasyOffer 2.0. Первые спонсоры получат уникальные лимитированные награды! 📢 Если вам это интересно, подписывайтесь на канал 👉 этот телеграм канал

🤔 Расскажи про особенности свойства color color – одно из самых базовых CSS-свойств, которое отвечает за цвет текста и текста в элементах (например, градиентных фонах и SVG).

p {
  color: red;
}

🟠Какие значения принимает `color`? CSS позволяет задавать цвета несколькими способами 🟠Особенности работы `color` Наследование color наследуется потомками по умолчанию, в отличие от многих других свойств CSS (например, background).

body {
  color: blue;
}
p {
  color: inherit; /* Явное наследование */
}

currentColor — скрытое золото Это специальное значение, которое означает "используй текущее значение color". Очень полезно для стилизации border, box-shadow, outline и SVG.

button {
  color: red;
  border: 2px solid currentColor; /* Использует color */
}

transparent — особый цвет

p {
  color: transparent;
}

Когда rgba() или hsla() лучше

p {
  color: rgba(255, 0, 0, 0.5); /* Полупрозрачный красный */
}

color и mix-blend-mode Можно заставить текст взаимодействовать с фоном с помощью mix-blend-mode

h1 {
  color: white;
  mix-blend-mode: difference;
}

color в ::selection и ::placeholder Некоторые элементы (например, выделенный текст или placeholder в input) требуют отдельного указания color

::selection {
  background: blue;
  color: white;
}

input::placeholder {
  color: gray;
}

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

💻 Ты разработчик, который хочет зарабатывать больше? В IT важно не просто кодить, а разбираться в архитектуре, понимать бизнес и грамотно выстраивать свою карьеру. Иначе через пару лет ты окажешься в толпе мидлов, которым ИИ уже подбирает замену. 📌 В своем канале Саня об IT говорит не про «как войти в IT», а как не застрять в нём. • Какие технологии будут востребованы в 2025? • Реальные кейсы: разбор IT-трендов без маркетинговой шелухи. • Карьерный рост: как перейти из мидлов в сеньоры, а дальше – хоть в техлиды. 🚀 Подписывайся, если хочешь развиваться, а не топтаться на месте! 👉 https://t.me/+Soa4Lzwkqqw3Yjgy

Курс по Java-разработке с junior до middle Несколько фактов о нашем курсе: - личный ментор/наставник; - помогаем решать твои текущие задачи; - доучиваем после онлайн-школы; - ведем от уровня junior до middle Уже во время обучения наши ученики зарабатывают от 60 000 рублей. Хватит тратить деньги, покупая не оправдывающие себя курсы Забронируй курс по специальной цене! Узнать больше #реклама 16+ ykul.ru О рекламодателе

🤔 От чего зависит this? Значение this определяется контекстом вызова функции. В глобальной области видимости this ссылается на глобальный объект (например, window в браузере). В строгом режиме или внутри методов, значение this зависит от способа вызова функции. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Почему map используют чаще, чем объект? Хотя объекты {} исторически использовались как ассоциативные массивы (ключ-значение), у Map есть ряд преимуществ, которые делают его более удобным в большинстве случаев. 🟠`Map` может использовать любые типы данных в качестве ключей В объектах {} ключи всегда автоматически приводятся к строке.

const obj = {};
const key1 = {};
const key2 = {};

obj[key1] = "value1";
obj[key2] = "value2";

console.log(obj); // { '[object Object]': 'value2' }
console.log(obj[key1]); // "value2" (ключи перезаписались, потому что оба стали "[object Object]")

Пример с Map:

const map = new Map();
map.set(key1, "value1");
map.set(key2, "value2");

console.log(map.get(key1)); // "value1"
console.log(map.get(key2)); // "value2"

🟠`Map` хранит порядок ключей В объекте {} порядок ключей не гарантируется (особенно для числовых ключей).

const obj = { 2: "two", 1: "one", 3: "three" };
console.log(Object.keys(obj)); // ["1", "2", "3"] (порядок числовых ключей изменился!)

Пример с Map

const map = new Map();
map.set(2, "two");
map.set(1, "one");
map.set(3, "three");

console.log([...map.keys()]); // [2, 1, 3] (порядок сохраняется!)

🟠`Map` быстрее при частых добавлениях/удалениях Объекты {} оптимизированы для хранения структуры данных, но операции delete и Object.keys(obj).length могут быть медленными, потому что движок JavaScript выполняет дополнительные проверки. Разница в скорости В Map операции .set(), .get(), .delete() выполняются быстрее. В объекте {} delete obj[key] может работать медленнее, так как JavaScript оптимизирует объекты для других целей. 🟠У `Map` есть удобные методы Объект {} не имеет встроенных методов для работы с ключами и значениями. Чтобы, например, узнать размер объекта, приходится использовать Object.keys(obj).length.

const map = new Map();
map.set("a", 1);
map.set("b", 2);

console.log(map.size); // 2
console.log(map.has("a")); // true
console.log(map.delete("b")); // true (удалит "b")

В объекте {}

const obj = { a: 1, b: 2 };

console.log(Object.keys(obj).length); // 2 (нужно вызывать Object.keys())
console.log(obj.hasOwnProperty("a")); // true (менее удобный синтаксис)
delete obj.b; // Удаление ключа

🟠`Map` не имеет проблем с прототипами В объекте {} могут быть неожиданные проблемы, если ключ совпадает с именем встроенного метода.

const obj = {};
console.log(obj.toString); // [Function: toString] (унаследованное свойство!)
console.log(obj["toString"]); // [Function: toString] (может вызвать баги)

Чтобы обойти это, приходится делать так

const obj = Object.create(null); // Теперь у объекта нет прототипа
obj.toString = "custom";
console.log(obj.toString); // "custom"

В Map таких проблем нет

const map = new Map();
map.set("toString", "custom");
console.log(map.get("toString")); // "custom" (никаких багов!)

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

🤔 Как JS понимает, что есть следующий прототип? Каждый объект в JavaScript содержит ссылку на прототип через специальное свойство proto (или [[Prototype]], доступное через Object.getPrototypeOf()). Если свойство или метод не найдено у объекта, движок JavaScript автоматически переходит к его прототипу. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 В чем отличие атрибутов от свойств в 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;

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

Как масштабировать команду? — Нанять аутсорс А как проще всего работать с аутсорсерами? — В Битрикс24 Коллабах. Это платформа для работы с внешними специалистами внутри вашего Битрикс24. Выглядит как чат, только удобнее. Встроены задачи, встречи, файлы. Для коротких и долгосрочных проектов. Особенно удобно для взаимодействия команд, где обсуждается несколько параллельных задач. Узнать больше #реклама 16+ collabs.bitrix24.ru О рекламодателе