🤔 В чём разница между div и span?

- div — это блочный элемент, начинается с новой строки и занимает всю ширину.
- span — строчный элемент, используется внутри текста, не разрывая поток.
Оба используются для группировки, но в разных контекстах.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 С какими нововведениями 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

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

🤔 Почему не используем REST?

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

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 Какая есть важная особенность у 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

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

🤔 Что такое и чем опасен XSS?

XSS (Cross-Site Scripting) — это атака, при которой злоумышленник внедряет вредоносный JavaScript-код в страницу. Опасен тем, что может украсть cookies, данные с формы, сделать редирект или отправить вредоносный запрос от имени пользователя.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 Как мы можем замерить скорость работы участка кода с 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("Мой код"); // Выведет время выполнения

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

🤔 Какие бывают CSS units (единицы измерения)?

- Абсолютные: px, pt, cm, mm, in;
- Относительные: em, rem, %, vw, vh, vmin, vmax;
- Функциональные: calc(), clamp() и др.
Относительные единицы зависят от размера родителя, корня или окна браузера.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 Какие есть альтернативы у redux?

Redux – мощный инструмент, но не всегда он необходим. Существует множество альтернатив, каждая из которых подходит для разных сценариев.

🚩React Context API + useReducer

Подходит для небольших и средних приложений
Встроено в React (не требует установки дополнительных библиотек)
useContext` позволяет передавать данные по дереву компонентов без "прокидывания" через props
useReducer работает как Redux, но проще

const AuthContext = createContext();

function authReducer(state, action) {
  switch (action.type) {
    case "LOGIN":
      return { ...state, isAuthenticated: true, user: action.payload };
    case "LOGOUT":
      return { ...state, isAuthenticated: false, user: null };
    default:
      return state;
  }
}

function AuthProvider({ children }) {
  const [state, dispatch] = useReducer(authReducer, {
    isAuthenticated: false,
    user: null,
  });

  return (
    <AuthContext.Provider value={{ state, dispatch }}>
      {children}
    </AuthContext.Provider>
  );
}

function LoginButton() {
  const { dispatch } = useContext(AuthContext);
  return (
    <button onClick={() => dispatch({ type: "LOGIN", payload: "Иван" })}>
      Войти
    </button>
  );
}

🚩Zustand

Проще Redux, но с теми же возможностями
Нет лишних actions и reducers, только функции

import { create } from "zustand";

const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
}));

function Counter() {
  const { count, increment } = useStore();
  return <button onClick={increment}>Счетчик: {count}</button>;
}

🚩Recoil

Идеален для React-приложений
Гибче, чем Redux, с концепцией "атомов" (раздельные состояния)

import { atom, useRecoilState } from "recoil";

const countState = atom({
  key: "count",
  default: 0,
});

function Counter() {
  const [count, setCount] = useRecoilState(countState);
  return <button onClick={() => setCount(count + 1)}>Счетчик: {count}</button>;
}

🚩Jotai

Напоминает Recoil, но без сложных концепций
Поддерживает React Suspense и асинхронные состояния

import { atom, useAtom } from "jotai";

const countAtom = atom(0);

function Counter() {
  const [count, setCount] = useAtom(countAtom);
  return <button onClick={() => setCount(count + 1)}>Счетчик: {count}</button>;
}

🚩MobX

Автоматически отслеживает изменения состояния
Удобен для сложных приложений

import { makeAutoObservable } from "mobx";
import { observer } from "mobx-react-lite";

class CounterStore {
  count = 0;

  constructor() {
    makeAutoObservable(this);
  }

  increment() {
    this.count++;
  }
}

const store = new CounterStore();

const Counter = observer(() => (
  <button onClick={() => store.increment()}>Счетчик: {store.count}</button>
));

🚩XState

Подходит для сложных логик (например, UI-анимаций, состояний формы)
Удобно описывать последовательности действий

import { createMachine, interpret } from "xstate";

const toggleMachine = createMachine({
  id: "toggle",
  initial: "inactive",
  states: {
    inactive: { on: { TOGGLE: "active" } },
    active: { on: { TOGGLE: "inactive" } },
  },
});

const service = interpret(toggleMachine).start();
service.send("TOGGLE"); // Меняет состояние

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

🤔 Как реализовывается CRUD?

- Через REST API с методами POST, GET, PUT, DELETE;
- На уровне базы — с SQL-операциями: INSERT, SELECT, UPDATE, DELETE;
- На UI — с формами создания, таблицами, редактированием и удалением записей.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 Что делает и для чего нужна функци function.Prototype.Bind?

bind() – это метод, который создает новую функцию с привязанным контекстом (this) и (опционально) фиксированными аргументами.

🚩Основные возможности `bind()`

Привязывает this, чтобы не потерять контекст
Позволяет создавать частично примененные функции
Используется в обработчиках событий и таймерах

Пример: потеря this без bind()

const user = {
  name: "Иван",
  sayHello() {
    console.log(`Привет, ${this.name}!`);
  },
};

setTimeout(user.sayHello, 1000); // ❌ this = undefined

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

🤔 Как работает hot reload (на примере Vue CLI)?

1. Webpack/Vite следит за файлами.
2. При изменении модуля:
- обновляется только этот модуль в браузере.
- состояние приложения сохраняется.
3. Vue CLI использует Webpack HMR API, чтобы перерендерить компоненты без перезагрузки страницы.
Это ускоряет разработку и упрощает отладку.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 Как защитить Cookie от JavaScript?

Если cookie содержит чувствительную информацию (например, auth_token), важно защитить его от доступа через JavaScript. Иначе злоумышленник может украсть его через XSS-атаку (Cross-Site Scripting).

🟠Используем флаг `HttpOnly` (основная защита)
HttpOnly делает cookie недоступным для JavaScript (document.cookie).

Set-Cookie: auth_token=abc123; HttpOnly; Secure; SameSite=Strict

🟠Используем `Secure`, чтобы cookie передавались только по HTTPS
Флаг Secure запрещает передачу cookie через HTTP, только HTTPS.

Set-Cookie: auth_token=abc123; Secure

🟠Используем `SameSite`, чтобы защититься от CSRF-атак
SameSite=Strict или SameSite=Lax защищает от подделки запросов (CSRF).

Set-Cookie: auth_token=abc123; SameSite=Strict

🟠Не храним токены в cookie (если можно)
Если возможно, используйте Authorization: Bearer заголовки вместо cookie.

Authorization: Bearer abc123

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

🤔 В чём отличие null от undefined?

null в JavaScript — это явное указание на отсутствие значения или объекта, тогда как undefined означает, что переменная или свойство были объявлены, но не инициализированы. null назначается вручную разработчиком, а undefined — результат автоматического присваивания переменным, которые ещё не получили значения. В логическом контексте оба значения считаются ложными, но их использование отличается в зависимости от смысла кода. null чаще используется для инициализации переменных, ожидающих объект.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 Что такое dispatch?

В контексте Frontend-разработки, dispatch — это метод, который отправляет (диспатчит) событие или действие. В зависимости от технологии dispatch может использоваться в Redux, EventTarget или React.

🟠`dispatch` в Redux
В Redux dispatch(action) используется для отправки (диспатча) действий (actions) в хранилище (store).

import { useDispatch } from 'react-redux';

const Counter = () => {
  const dispatch = useDispatch();

  return (
    <button onClick={() => dispatch({ type: 'INCREMENT' })}>
      Увеличить
    </button>
  );
};

🟠`dispatchEvent` в JavaScript (EventTarget API)
В нативном JavaScript метод dispatchEvent() используется для генерации пользовательских событий на DOM-элементах.

const button = document.querySelector("button");

// Создаём событие
const event = new Event("myCustomEvent");

// Добавляем слушатель событий
button.addEventListener("myCustomEvent", () => {
  console.log("Событие вызвано!");
});

// Диспатчим событие
button.dispatchEvent(event); // Выведет: "Событие вызвано!"

🟠`dispatch` в React (useReducer)
В React-хуке useReducer dispatch используется для изменения состояния компонента.

import { useReducer } from 'react';

const reducer = (state, action) => {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    default:
      return state;
  }
};

const Counter = () => {
  const [state, dispatch] = useReducer(reducer, { count: 0 });

  return (
    <button onClick={() => dispatch({ type: 'increment' })}>
      {state.count}
    </button>
  );
};

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

🤔 Можно ли добавлять несколько заголовков h1?

Можно, но только по смыслу:
- В HTML5 допустимо несколько h1 — по одному на секцию или article.
- Главное — сохранять логичную иерархию.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 Чем отличается замыкание от области видимости?

Замыкание и область видимости — это два фундаментальных концепта в JavaScript, связанных с работой переменных, но они решают разные задачи. Давайте разберёмся в их отличиях.

🚩Область видимости (Scope)

Область видимости определяет, где в коде можно обращаться к переменной. В JavaScript есть три основные области видимости:
Глобальная область видимости – переменные доступны в любом месте кода.
Область видимости функции (функциональная) – переменные доступны только внутри функции, где они были объявлены.
Блочная область видимости (с let и const) – переменные доступны только внутри блока {}.

function testScope() {
  let x = 10; // x доступна только внутри testScope
  console.log(x); // 10
}
console.log(x); // Ошибка: x не определена

🚩Замыкание (Closure)

Замыкание – это функция, которая запоминает область видимости, в которой была создана, даже после выхода из неё. То есть, если внутренняя функция использует переменные внешней функции, она "захватывает" их и может использовать даже после завершения работы внешней функции.

function outer() {
  let count = 0; 

  return function inner() { 
    count++;  
    console.log(count);
  };
}

const counter = outer(); // outer выполняется, но переменная count остается в памяти
counter(); // 1
counter(); // 2
counter(); // 3

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

🤔 Что означают union и intersection в TypeScript?

- Union (|): переменная может быть одного из указанных типов.
Пример: type A = string | number
- Intersection (&): переменная должна соответствовать всем типам сразу.
Пример: type B = { name: string } & { age: number }

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 Что произойдет если мы напишем невалидную разметку?

Если в HTML-документе будет невалидная разметка, браузер всё равно попытается её обработать и отобразить страницу, но возможны различные неожиданные ошибки и баги. Давайте разберём, что может пойти не так.

🚩Что делает браузер с невалидным HTML?

Когда браузер сталкивается с ошибками в разметке, он использует механизм исправления ошибок (HTML Parser Error Handling). Это означает, что:
Браузер автоматически исправит некоторые ошибки (например, добавит закрывающий тег).
Некоторые элементы могут быть проигнорированы или отображены некорректно.
CSS и JavaScript могут работать неправильно из-за ошибки в DOM-структуре.

🚩Примеры ошибок и их последствия

Отсутствие закрывающего тега

<p>Привет, мир!
<p>Это новый абзац?

Вложенность тегов в неправильных местах

<p>Текст <div>Блок внутри абзаца</div></p>

По спецификации <div> нельзя вкладывать в <p>, браузер может вынести <div> за пределы абзаца.
Итоговый HTML может быть таким:

<p>Текст </p>
<div>Блок внутри абзаца</div>

🟠Отсутствие `DOCTYPE`
Если не указать <!DOCTYPE html>, браузер может перейти в режим совместимости (Quirks Mode), что приведёт к некорректному отображению стилей.
Неправильные атрибуты в тегах

<img src="image.jpg" alt="Картинка" wrongAttr="что это?">

Незакрытые теги в таблице

<table>
  <tr>
    <td>Ячейка 1
    <td>Ячейка 2
  </tr>
</table>

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

🤔 Зачем нужен механизм двустороннего связывания?

Two-way binding нужен для:
- синхронизации состояния UI и данных без дополнительного кода;
- удобной работы с формами и интерактивными компонентами;
- упрощения кода (особенно в v-model, ngModel).
Но может затруднять отладку и контроль, если применять безмерно.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 Как бы добавлял статический метод в prototype?

На самом деле, статические методы не добавляются в prototype, потому что они принадлежат самому классу, а не его экземплярам.
Но если ты хочешь имитировать статический метод в prototype, можно использовать функцию-конструктор и добавить метод вручную.

🚩Как работают статические методы? (`static`)

В классе статические методы объявляются с помощью static. Они не находятся в prototype, а принадлежат самому классу.

class User {
  static sayHello() {
    return "Привет!";
  }
}

console.log(User.sayHello()); // ✅ "Привет!"
console.log(User.prototype.sayHello); // ❌ undefined (нет в prototype)

🚩Добавление "статического" метода в `prototype` (не совсем статический)

Если нужно, чтобы каждый объект имел доступ к "статическому" методу через prototype, можно сделать так

function User(name) {
  this.name = name;
}

// Добавляем метод в prototype
User.prototype.sayHello = function () {
  return "Привет!";
};

const user1 = new User("Иван");
console.log(user1.sayHello()); // ✅ "Привет!"

🚩Добавление метода напрямую в сам класс (имитация `static`)

Если хочется добавить метод на сам класс, а не в prototype, можно сделать так

function User(name) {
  this.name = name;
}

// Добавляем метод прямо в функцию-конструктор
User.sayHello = function () {
  return "Привет!";
};

console.log(User.sayHello()); // ✅ "Привет!"

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

🤔 Какой способ помогает бороться с прокидыванием, помимо Redux?

Можно использовать Context API, который позволяет передавать данные от родителя к потомку без явного прокидывания через props. Это удобно для глобальных данных: темы, язык, текущий пользователь.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний