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

📺 Уникальная база IT собеседований 456+ реальных собеседований на программиста, тестировщика, аналитика и прочие IT профы. Есть собесы от ведущих компаний: Сбер, Яндекс, ВТБ, Тинькофф, Озон, Wildberries и т.д. 🎯 Переходи по ссылке и присоединяйся к базе, чтобы прокачать свои шансы на успешное трудоустройство!

🤔 Как мы можем замерить скорость работы участка кода с date.Now? В JavaScript можно замерить скорость выполнения кода с помощью Date.now(), но есть более точные способы. Давайте разберём разные варианты. 🚩Использование `Date.now()` Метод Date.now() возвращает количество миллисекунд с 1 января 1970 года (Unix-время). Можно запомнить время до и после выполнения кода, а затем вычислить разницу.

const start = Date.now(); // Фиксируем время начала

// Код, время выполнения которого нужно измерить
for (let i = 0; i < 1e6; i++) { Math.sqrt(i); }

const end = Date.now(); // Фиксируем время окончания
console.log(`Время выполнения: ${end - start} мс`);

🚩Использование `performance.now()` (Более точный способ) Метод performance.now() возвращает время с микросекундной точностью (до тысячных долей миллисекунды). Он точнее, чем Date.now(), так как измеряет время с высокой детализацией.

const start = performance.now();

for (let i = 0; i < 1e6; i++) { Math.sqrt(i); }

const end = performance.now();
console.log(`Время выполнения: ${(end - start).toFixed(3)} мс`);

🚩Использование `console.time()` Если нужно просто измерить время выполнения блока кода, можно воспользоваться console.time() и console.timeEnd().

console.time("Мой код");

for (let i = 0; i < 1e6; i++) { Math.sqrt(i); }

console.timeEnd("Мой код"); // Выведет время выполнения

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

🤔 Что такое и чем опасен XSS? XSS (Cross-Site Scripting) — это атака, при которой злоумышленник внедряет вредоносный JavaScript-код в страницу. Опасен тем, что может украсть cookies, данные с формы, сделать редирект или отправить вредоносный запрос от имени пользователя. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

Станьте разработчиком нейро-сотрудников на Python и зарабатывайте от 150.000р в месяц 🔥🔥🔥 Мы научим вас создавать топовых нейро-сотрудников на базе GPT-4 Omni, и вы сможете: 1️⃣ Устроиться разработчиком в крупную компанию и зарабатывать от 150 тысяч ₽ в месяц 2️⃣ Разрабатывать такие проекты на заказ и зарабатывать от 500 тысяч ₽ за проект 3️⃣ Создать нейро-сотрудника в вашей компании и вырасти на +30-100% в зарплате Что будет на интенсиве? 🧬 Теория: как создаются нейро-сотрудники с GPT-4o на Python 🧬 Практика: мы создадим нейро-консультанта, нейро-HR, нейро-маркетолога и др. Ведущий интенсива - Senior AI разработчик нейросетей и основатель Университета искусственного интеллекта 🔥 Регистрируйтесь на бесплатный интенсив! Встречаемся в ближайший четверг!

🤔 Какая есть важная особенность у pipe? Это популярная концепция в программировании, особенно в функциональных языках и библиотеках вроде RxJS (в контексте реактивного программирования). Она используется для последовательного применения функций к данным. 🚩Почему это важно? 🟠Чистота pipe работает с чистыми функциями, которые не изменяют исходные данные и возвращают новый результат. Это повышает предсказуемость кода. 🟠Композиция Вместо вложенных вызовов функций (когда результат одной функции передается в другую) pipe упрощает цепочку, делая её линейной. 🟠Читаемость Код становится проще для понимания, особенно если функций много. 🟠Легкость модификации Можно легко добавлять или удалять шаги в цепочке, не меняя структуру кода. 🚩Как работает `pipe`? pipe принимает несколько функций в качестве аргументов и применяет их слева направо к переданным данным. То есть результат одной функции передается как вход в следующую. 🚩Пример реализации простого `pipe`

const pipe = (...functions) => (input) => 
  functions.reduce((acc, fn) => fn(acc), input);

// Пример функций
const multiplyByTwo = (num) => num * 2;
const addThree = (num) => num + 3;
const square = (num) => num ** 2;

// Использование pipe
const processNumber = pipe(multiplyByTwo, addThree, square);

console.log(processNumber(5)); // ((5 * 2) + 3) ** 2 = 121

🚩Использование в RxJS В контексте RxJS pipe используется для работы с потоками данных, где через него можно передавать операторы, такие как map, filter, mergeMap и другие.

import { of } from 'rxjs';
import { map, filter } from 'rxjs/operators';

// Создаем поток данных
const numbers$ = of(1, 2, 3, 4, 5);

// Используем pipe для применения операторов
numbers$
  .pipe(
    filter((num) => num % 2 === 0), // Оставляем только четные
    map((num) => num * 10)          // Умножаем их на 10
  )
  .subscribe((result) => console.log(result)); 
// Вывод: 20, 40

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

🤔 Почему не используем REST? REST не всегда удобен, потому что: - требует жёсткой структуры (ресурсно-ориентированной); - может не покрывать событийные сценарии (например, подписки, стриминг); - не эффективен при мелкозернистком взаимодействии — тогда лучше GraphQL или WebSocket. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 С какими нововведениями es6 знаком? ECMAScript 6 (или ES6), также известный как ECMAScript 2015, представил множество новых возможностей для JavaScript, которые сделали язык более удобным, мощным и современным. Я знаком с большинством нововведений, и ниже я подробно расскажу о самых популярных из них. 🟠`let` и `const` До ES6 переменные создавались с помощью var. Однако у него были проблемы, такие как отсутствие блочной области видимости и возможность повторного объявления. С введением let и const эти проблемы решены. let — для переменных, которые могут изменяться. const — для переменных, которые нельзя переназначить (но можно изменять содержимое, если это объект или массив).

let a = 10;
a = 20; // Работает

const b = 30;
// b = 40; // Ошибка: Нельзя переназначить

🟠Стрелочные функции (Arrow Functions) Стрелочные функции дают более лаконичный синтаксис для объявления функций. Они также не создают собственный this, а используют this из окружающего контекста.

// Обычная функция
function add(a, b) {
  return a + b;
}

// Стрелочная функция
const add = (a, b) => a + b;

console.log(add(2, 3)); // 5

🟠Шаблонные строки (Template Literals) Раньше строки приходилось склеивать с помощью конкатенации (+). Шаблонные строки (обозначаются обратными кавычками ``) позволяют вставлять переменные и выражения прямо в текст.

const name = "Alice";
const message = `Привет, ${name}! Добро пожаловать.`;
console.log(message); // Привет, Alice! Добро пожаловать.

🟠Деструктуризация (Destructuring) Деструктуризация позволяет извлекать значения из массивов или объектов и присваивать их переменным.

// Деструктуризация массива
const arr = [1, 2, 3];
const [first, second] = arr;
console.log(first, second); // 1, 2

// Деструктуризация объекта
const user = { name: "Alice", age: 25 };
const { name, age } = user;
console.log(name, age); // Alice 25

🟠Модули (Modules) ES6 добавил встроенную поддержку модулей через import и export. Теперь код можно организовывать и повторно использовать более эффективно.

// В модуле user.js
export const greet = (name) => `Привет, ${name}`;

// В другом файле
import { greet } from './user.js';
console.log(greet("Alice")); // Привет, Alice

🟠Операторы "..." (Spread и Rest) Оператор ... используется для работы с массивами, объектами и функциями. Spread — для разворачивания массивов и объектов. Rest — для сбора оставшихся элементов в массив или объект.

// Spread
const arr1 = [1, 2];
const arr2 = [...arr1, 3, 4];
console.log(arr2); // [1, 2, 3, 4]

// Rest
const [first, ...rest] = [1, 2, 3, 4];
console.log(first); // 1
console.log(rest);  // [2, 3, 4]

🟠Классы (Classes) Классы добавляют объектно-ориентированный стиль программирования. Это синтаксический сахар над прототипами.

class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(`${this.name} говорит.`);
  }
}

const dog = new Animal("Собака");
dog.speak(); // Собака говорит.

🟠Обещания (Promises) Обещания (Promises) упрощают работу с асинхронным кодом, заменяя вложенные колбэки (callback hell).

const fetchData = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => resolve("Данные получены"), 1000);
  });
};

fetchData().then((data) => console.log(data)); // Данные получены

🟠Итераторы и генераторы Итераторы дают возможность обходить коллекции (например, массивы) шаг за шагом. Генераторы — функции, которые можно приостанавливать и возобновлять.

function* numbers() {
  yield 1;
  yield 2;
  yield 3;
}

const gen = numbers();
console.log(gen.next().value); // 1
console.log(gen.next().value); // 2
console.log(gen.next().value); // 3

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

🤔 В чём разница между div и span? - div — это блочный элемент, начинается с новой строки и занимает всю ширину. - span — строчный элемент, используется внутри текста, не разрывая поток. Оба используются для группировки, но в разных контекстах. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

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

🤔 Как считается вес селектора? Вес селектора (специфичность) – это правило, по которому браузер определяет, какой стиль применить, если есть несколько конфликтующих селекторов.

( inline, id, class/атрибут/псевдокласс, элемент/псевдоэлемент )

Пример

/* Специфичность: (0, 1, 0, 0) */
#header { color: red; }

/* Специфичность: (0, 0, 1, 0) */
.header { color: blue; }

/* Специфичность: (0, 0, 0, 1) */
h1 { color: green; }

🟠Примеры сравнения специфичности Пример 1

h1 { color: red; } /* (0,0,0,1) */
.title { color: blue; } /* (0,0,1,0) */

Пример 2

h1 { color: red; } /* (0,0,0,1) */
#main { color: blue; } /* (0,1,0,0) */

Пример 3 (комбинированные селекторы)

h1.title { color: red; } /* (0,0,1,1) */
#main h1 { color: blue; } /* (0,1,0,1) */

Пример 4 (инлайн-стиль всегда сильнее)

<h1 style="color: green;">Заголовок</h1>

h1 { color: red; } /* (0,0,0,1) */
.title { color: blue; } /* (0,0,1,0) */
#main { color: purple; } /* (0,1,0,0) */

🟠Как повысить вес селектора? Добавить ID (но не злоупотреблять). Использовать более специфичные селекторы (например, .header h1 вместо h1). Использовать !important (но осторожно!).

h1 { color: red !important; } /* Всегда будет красным */

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

🤔 Что такое и зачем нужен iframe? iframe — элемент, который позволяет встраивать один HTML-документ в другой. Используется для интеграции внешнего контента (видео, карты, сторонние приложения). Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Что делает omit? omit – это функция, которая удаляет указанные ключи из объекта и возвращает новый объект без этих ключей. В JavaScript нет встроенного omit, но его можно реализовать с помощью деструктуризации и методов Object.fromEntries() или reduce(). Реализация omit с Object.fromEntries() (современный способ)

function omit(obj, keys) {
    return Object.fromEntries(
        Object.entries(obj).filter(([key]) => !keys.includes(key))
    );
}

const user = { name: "Alice", age: 25, password: "123456" };
const safeUser = omit(user, ["password"]); 

console.log(safeUser); // { name: "Alice", age: 25 }

Реализация omit с reduce() (альтернативный способ)

function omit(obj, keys) {
    return Object.keys(obj).reduce((acc, key) => {
        if (!keys.includes(key)) acc[key] = obj[key];
        return acc;
    }, {});
}

const data = { a: 1, b: 2, c: 3 };
console.log(omit(data, ["b"])); // { a: 1, c: 3 }

Если используете Lodash, можно просто вызвать

import { omit } from "lodash";

const user = { name: "Alice", age: 25, password: "123456" };
const safeUser = omit(user, ["password"]);

console.log(safeUser); // { name: "Alice", age: 25 }

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

🤔 Отличие <i> от <em> и <strong> от <b>? - <i> и <b> — визуальные теги (курсив, жирный), не несут смысловой нагрузки; - <em> и <strong> — семантические, используются для логического акцента (эмоции, важность). Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Расскажи про операторы сравнения Операторы сравнения в JavaScript позволяют сравнивать значения и возвращают true или false. Они часто используются в условиях (if, while) и тернарных операторах. 🚩Разница между `==` и `===` 🟠`==` (нестрогое сравнение) При == JavaScript приводит типы перед сравнением.

console.log(5 == "5");  // true (строка "5" приводится к числу)
console.log(0 == false); // true (false → 0)
console.log(null == undefined); // true (особый случай)

🟠`===` (строгое сравнение) При === сравниваются и значение, и тип.

console.log(5 === "5"); // false (разные типы)
console.log(0 === false); // false (число !== логический тип)
console.log(null === undefined); // false (разные типы)

🚩🔹 Логические значения в сравнении JavaScript приводит значения к true или false

console.log(1 == true);  // true (1 → true)
console.log(0 == false); // true (0 → false)
console.log("" == false); // true ("" → false)
console.log([] == false); // true (пустой массив → false)
console.log(null == false); // false (null не приводится к false)

🚩Особые случаи - null == undefined → true (они считаются "похожими"). - null === undefined → false (разные типы). - null >= 0 → true (null превращается в 0). - null > 0 → false (но null >= 0 – true, странно, да?).

console.log(null == undefined); // true
console.log(null >= 0); // true
console.log(null > 0);  // false (WTF?)

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

🤔 Как отрисовать компонент по условию? Используют директивы: • v-if — компонент вообще не создаётся, если условие ложное. • v-show — компонент всегда в DOM, но просто скрывается через CSS (display: none). • Можно также использовать тернарный оператор прямо в шаблоне (v-bind:is, component, slot и т.п.). Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Когда используются теги div и span? <div> и <span> — это самые универсальные HTML-теги, но у них разные роли: <div> — блочный контейнер (для структуры). <span> — строчный контейнер (для оформления текста). 🚩Примеры использования `<div>` Разметка секций страницы

<div class="header">Навигация</div>
<div class="content">Основной контент</div>
<div class="footer">Подвал</div>

Группировка элементов

<div class="card">
  <h2>Заголовок</h2>
  <p>Текст внутри карточки</p>
</div>

🚩Когда использовать `<span>`? <span> используется для выделения части текста или небольших элементов. Это строчный элемент, который не переносится на новую строку. 🚩Примеры использования `<span>` Выделение части текста

<p>Сегодня <span class="highlight">солнечная погода</span>.</p>

Иконки, кнопки и маленькие элементы

<button>
  <span class="icon">🔍</span> Поиск
</button>

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

🤔 Как настраивать собственную кастомизацию форм? Можно использовать стили для стандартных элементов формы, применять псевдоэлементы, использовать кастомные компоненты на основе div и JavaScript. Также часто подключают библиотеки или UI-фреймворки. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Как взаимодействовать с vuex js? Vuex — это централизованное хранилище для управления состоянием в приложениях Vue.js. Оно используется, когда несколько компонентов нуждаются в доступе к общему состоянию. 🟠Подключение Vuex в проект Сначала установим Vuex, если он ещё не установлен:

npm install vuex

Теперь создадим хранилище (store)

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit('increment');
      }, 1000);
    }
  },
  getters: {
    doubleCount: state => state.count * 2
  }
});

Затем подключаем это хранилище в main.js

import Vue from 'vue';
import App from './App.vue';
import store from './store';

Vue.config.productionTip = false;

new Vue({
  store, // Подключаем Vuex-хранилище
  render: h => h(App)
}).$mount('#app');

🟠Доступ к данным из Vuex (state) Чтобы получить данные из хранилища (state), можно использовать this.$store.state или mapState.

<template>
  <div>
    <p>Счетчик: {{ $store.state.count }}</p>
  </div>
</template>

С использованием mapState

<script>
import { mapState } from 'vuex';

export default {
  computed: {
    ...mapState(['count'])
  }
};
</script>

🟠Изменение состояния (mutations) В Vuex нельзя изменять state напрямую, для этого используются mutations.

<template>
  <button @click="$store.commit('increment')">Увеличить</button>
</template>

Или с помощью mapMutations

<script>
import { mapMutations } from 'vuex';

export default {
  methods: {
    ...mapMutations(['increment'])
  }
};
</script>

<template>
  <button @click="increment">Увеличить</button>
</template>

🟠Асинхронные действия (actions) Мутации не поддерживают асинхронные операции, поэтому для этого используются actions.

<template>
  <button @click="$store.dispatch('incrementAsync')">Увеличить через 1 сек</button>
</template>

Или с mapActions

<script>
import { mapActions } from 'vuex';

export default {
  methods: {
    ...mapActions(['incrementAsync'])
  }
};
</script>

<template>
  <button @click="incrementAsync">Увеличить через 1 сек</button>
</template>

🟠Использование геттеров (getters) Геттеры работают как вычисляемые свойства (computed), позволяют получать обработанные данные из state.

<template>
  <p>Удвоенный счетчик: {{ $store.getters.doubleCount }}</p>
</template>

Или с mapGetters

<script>
import { mapGetters } from 'vuex';

export default {
  computed: {
    ...mapGetters(['doubleCount'])
  }
};
</script>

<template>
  <p>Удвоенный счетчик: {{ doubleCount }}</p>
</template>

🟠Модули Vuex (для больших проектов) Если приложение большое, можно разделить Vuex-хранилище на модули:

const counterModule = {
  state: () => ({ count: 0 }),
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  getters: {
    doubleCount: state => state.count * 2
  }
};

export default new Vuex.Store({
  modules: {
    counter: counterModule
  }
});

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

🤔 В чём отличия HTTP/1 от HTTP/2? - HTTP/2 использует одно соединение вместо нескольких; - Поддерживает мультиплексирование — отправку нескольких запросов одновременно; - Бинарный протокол вместо текстового; - Улучшенная производительность за счёт header compression и server push. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Какие проблемы решают vue а какие jquery? Это два совершенно разных инструмента с разными подходами и целями. Они решают свои проблемы, но Vue.js более современный и масштабируемый фреймворк, тогда как jQuery — это библиотека для упрощения работы с DOM. Давайте разберёмся, какие проблемы решает каждый из них. 🚩Проблемы, которые решает Vue.js: Vue.js — это современный фреймворк для построения реактивных пользовательских интерфейсов (UI). Он решает множество проблем, которые возникают при разработке масштабных, интерактивных приложений. 🟠Реактивность данных Vue.js автоматически отслеживает изменения данных (двустороннее связывание данных) и обновляет интерфейс без необходимости вручную изменять DOM.

const app = Vue.createApp({
  data() {
    return {
      message: "Привет, мир!"
    };
  }
}).mount('#app');

HTML

<div id="app">
  <p>{{ message }}</p>
  <button @click="message = 'Изменено!'">Изменить сообщение</button>
</div>

🟠Компонентный подход Vue позволяет разбивать приложение на компоненты — маленькие, переиспользуемые части интерфейса, которые содержат свою логику, стили и разметку.

Vue.component('my-button', {
  template: `<button @click="clickHandler">Нажми меня</button>`,
  methods: {
    clickHandler() {
      alert('Нажали кнопку!');
    }
  }
});

HTML

<my-button></my-button>

🟠Управление состоянием Vue может работать с глобальным состоянием через Vuex (или Pinia). Это удобно для сложных приложений, где данные должны передаваться между разными компонентами. Если у вас корзина покупок, Vuex помогает сохранять её состояние и передавать данные компонентам без путаницы. 🟠Одностраничные приложения (SPA) Vue.js идеально подходит для создания SPA — приложений, где вся логика загружается единожды, а переходы между страницами происходят без перезагрузки браузера. Для этого используется библиотека vue-router. 🟠Упрощение работы с динамическими интерфейсами С Vue.js легко создавать сложные элементы интерфейса, такие как анимации, формы, списки с фильтрацией и сортировкой. 🟠Масштабируемость Vue.js идеально подходит для создания больших приложений, поскольку он поддерживает: Переиспользуемые компоненты. Интеграцию с современными инструментами разработки (TypeScript, Webpack, Babel). Поддержку экосистемы (Vuex, Vue Router, Pinia). 🚩Проблемы, которые решает jQuery jQuery — это библиотека, созданная для упрощения работы с DOM, AJAX и событиями. Она была особенно полезна в прошлом, когда JavaScript был менее удобным. 🟠Кроссбраузерная совместимость Раньше в JavaScript было много различий между браузерами. jQuery решал эту проблему, предоставляя единый API, который работал везде одинаково.

$('#element').hide(); // Работает во всех браузерах

🟠Простое управление DOM jQuery предоставляет мощные методы для поиска, добавления, удаления и изменения элементов DOM.

$('#button').click(function() {
  $('#text').text('Кнопка нажата');
});

🟠AJAX-запросы jQuery упрощал работу с AJAX-запросами, позволяя отправлять данные на сервер и получать ответ без перезагрузки страницы.

$.ajax({
  url: '/api/data',
  method: 'GET',
  success: function(data) {
    console.log(data);
  }
});

🟠Обработка событий jQuery предоставлял удобный API для работы с событиями, что особенно полезно при создании интерактивного интерфейса.

$('#button').on('click', function() {
  alert('Кнопка нажата!');
});

🟠Анимации jQuery позволяет легко создавать простые анимации (например, плавное появление или скрытие элементов).

$('#element').fadeIn();

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