Frontend | Вопросы собесов - Статистика та аналітика Telegram каналу @easy_javascript

17 374

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

17 374

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

( 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; } /* Всегда будет красным */

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

17 374

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

17 374

🤔 Что делает 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 }

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

17 374

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

17 374

🤔 Расскажи про операторы сравнения Операторы сравнения в 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?)

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

17 374

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

17 374

🤔 Когда используются теги 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>

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

17 374

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

17 374

🤔 Как взаимодействовать с 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
  }
});

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

17 374

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

17 374

🤔 Какие проблемы решают 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();

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

17 374

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

17 374

17 374

🤔 Расскажи про memo в react React.memo — это функция в React, которая используется для оптимизации производительности функциональных компонентов. Она предотвращает ненужные повторные рендеры, если пропсы компонента не изменились. 🚩Зачем нужен `React.memo`? В React каждый раз, когда родительский компонент обновляется, все его дочерние компоненты тоже ререндерятся, даже если их пропсы остались неизменными. Это может негативно сказаться на производительности, особенно если дочерний компонент выполняет сложные вычисления или рендерит большое количество данных. React.memo решает эту проблему, запоминая (мемоизируя) предыдущий результат рендера и сравнивая его с новыми пропсами. Если пропсы не изменились, компонент просто использует закэшированное представление, а не ререндерится. 🚩Как использовать `React.memo`? React.memo — это функция высшего порядка (HOC), которая оборачивает функциональный компонент

import React from "react";

const MyComponent = ({ value }) => {
  console.log("Рендер компонента!");
  return <div>Значение: {value}</div>;
};

// Оборачиваем компонент в React.memo
const MemoizedComponent = React.memo(MyComponent);

export default MemoizedComponent;

🚩Пример без React.memo vs. с React.memo Допустим, у нас есть родительский компонент, который изменяет состояние при каждом клике

import React, { useState } from "react";
import MemoizedComponent from "./MyComponent";

const Parent = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Увеличить</button>
      <MemoizedComponent value="Привет, мир!" />
    </div>
  );
};

export default Parent;

🚩Когда НЕ стоит использовать `React.memo`? Если компонент всегда ререндерится из-за изменения пропсов – смысла в memo нет. Если компонент рендерится быстро – оптимизация может быть ненужной, а проверка пропсов даже замедлит работу. Если пропсы часто изменяются – кэширование теряет смысл, так как все равно ререндерится. Ставь 👍 и забирай 📚 Базу знаний

17 374

🤔 Что известно о версиях HTTP, чем они отличаются? - HTTP/1.1 — классический, последовательные запросы, keep-alive. - HTTP/2 — мультиплексирование, бинарный формат, заголовки сжимаются. - HTTP/3 (QUIC) — работает поверх UDP, более надёжный и быстрый при потере пакетов. Каждая версия улучшает скорость и устойчивость соединения. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

17 374

🤔 Как можно вставить svg в html документ? Вставить SVG в HTML можно несколькими способами, в зависимости от того, что вам нужно: просто отобразить изображение, стилизовать его через CSS или динамически изменять с помощью JavaScript. 🟠Прямой (inline) SVG-код в HTML Этот способ позволяет стилизовать и изменять SVG с помощью CSS и JavaScript.

<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

🟠Через тег `<img>` Если SVG не нужно изменять, можно вставить его как обычное изображение.

<img src="image.svg" alt="Описание изображения" width="100" height="100">

🟠Через CSS `background-image` SVG можно использовать как фоновое изображение.

<div class="icon"></div>

<style>
  .icon {
    width: 100px;
    height: 100px;
    background-image: url('image.svg');
    background-size: cover;
  }
</style>

🟠Через тег `<object>` Позволяет загружать SVG-файлы и взаимодействовать с ними.

<object type="image/svg+xml" data="image.svg" width="100" height="100"></object>

🟠Через тег `<iframe>` SVG можно загружать в iframe.

<iframe src="image.svg" width="100" height="100"></iframe>

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

17 374

🤔 Как использовал iframe? - Встраивание видео, чартов, приложений. - Для отдельной изоляции контента (например, 3rd party). - Открытие внешних сайтов. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

17 374

🤔 Как взаимодействуешь с eventloop? Event Loop (Цикл событий) – это механизм, который управляет выполнением кода, обработкой асинхронных задач и взаимодействием с Web API. 🚩Как мы взаимодействуем с Event Loop? Используем асинхронный код: setTimeout, setInterval, fetch, Promise, async/await Оптимизируем выполнение тяжелых задач Управляем приоритетами выполнения (Microtask vs Macrotask) 🟠Как работает Event Loop? JavaScript выполняет код в однопоточном режиме, но может обрабатывать асинхронные задачи через очередь событий (Event Queue) и микрозадачи (Microtask Queue).

console.log("1");

setTimeout(() => console.log("2"), 0);

Promise.resolve().then(() => console.log("3"));

console.log("4");

Вывод в консоли

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

17 374

От устаревших моделей к будущему кибербезопасности 💻 На бесплатном вебинаре расскажем: 1) Почему старые правила безопасности больше не работают 2) Что такое Zero Trust на самом деле 3) Как концепция превращается в конкретные продукты и технологии 4) Для каких реальных задач Zero Trust подходит Efros DO: модули NA, ICC, FA, NAС ✨ Подарки за вашу активность! Среди участников вебинара будет разыгран корпоративный мерч от организаторов за самые интересные и актуальные вопросы 📅 Вебинар Zero Trust: современное прочтение правила «доверяй, но проверяй» состоится 9 сентября в 12:00–13:00 (московское время) Узнать больше #реклама 16+ sec.ussc.ru О рекламодателе

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

📈 Аналітичний огляд Telegram-каналу Frontend | Вопросы собесов

📊 Показники аудиторії та динаміка

📝 Опис та контентна політика