🤔 Какие примитивные данные в JavaScript есть?

- string
- number
- bigint
- boolean
- undefined
- null
- symbol
Они не являются объектами и имеют иммутабельную природу.

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

🤔 Расскажи про mobx

MobX — это библиотека для управления состоянием в JavaScript-приложениях, особенно в React. Она основана на реактивности и позволяет автоматически отслеживать изменения данных, обновляя интерфейс только там, где это необходимо.

🚩Основные принципы MobX

🟠Модели данных – `observable` (наблюдаемые)
MobX делает объекты реактивными, автоматически отслеживая их изменения.

import { makeAutoObservable } from "mobx";

class Store {
  count = 0;

  constructor() {
    makeAutoObservable(this); // Автоматически делает свойства "наблюдаемыми"
  }

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

const store = new Store();

🟠Экшены (`actions`)
Это методы, которые изменяют состояние.

store.increment(); // Увеличит count и автоматически обновит UI

🟠Компоненты подписываются на изменения – `observer`
Чтобы React-компонент обновлялся при изменении данных, его нужно обернуть в observer (из mobx-react-lite).

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

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

export default Counter;

🟠Компьютед-свойства (`computed`)
Это вычисляемые значения, которые пересчитываются только при изменении зависимостей.

class Store {
  count = 2;

  constructor() {
    makeAutoObservable(this);
  }

  get double() {
    return this.count * 2;
  }
}

const store = new Store();
console.log(store.double); // 4
store.count = 5;
console.log(store.double); // 10 (пересчиталось автоматически)

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

🤔 Как сравнить объекты?

1. По ссылке: используется ===, который проверяет, ссылаются ли объекты на одно место в памяти.
2. По значению: необходимо пройти по ключам объектов и сравнить их значения вручную или с помощью библиотек, например Lodash.

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

🤔 Что такое массив?

Это структура данных, которая представляет собой упорядоченный список элементов. В JavaScript массивы могут содержать любые типы данных: числа, строки, объекты, другие массивы и даже функции.

🚩Почему массивы нужны?

Массивы помогают удобно хранить и обрабатывать наборы данных. Вместо того чтобы создавать множество переменных, можно использовать массив, чтобы хранить сразу несколько значений и работать с ними с помощью специальных методов.

🚩Как используются массивы?

Массивы позволяют:
Хранить несколько значений в одной переменной
Перебирать элементы с помощью циклов
Добавлять, удалять, изменять элементы
Выполнять операции, например, сортировку и фильтрацию

🚩Как создать массив?

В JavaScript массив можно создать разными способами:
С использованием литерала массива

let fruits = ["яблоко", "банан", "апельсин"];

С использованием конструктора Array

let numbers = new Array(1, 2, 3, 4, 5);

🚩Как обращаться к элементам массива?

Доступ к элементу массива осуществляется по индексу (начинается с 0):

let fruits = ["яблоко", "банан", "апельсин"];
console.log(fruits[0]); // "яблоко"
console.log(fruits[1]); // "банан"

🚩Основные методы работы с массивами

Добавление элемента в конец push()

let arr = [1, 2, 3];
arr.push(4); 
console.log(arr); // [1, 2, 3, 4]

Удаление последнего элемента pop()

arr.pop();
console.log(arr); // [1, 2, 3]

Добавление элемента в начало unshift()

arr.unshift(0);
console.log(arr); // [0, 1, 2, 3]

Удаление первого элемента shift()

arr.shift();
console.log(arr); // [1, 2, 3]

Перебор массива forEach()

arr.forEach(item => console.log(item)); 

Фильтрация элементов filter()

let evenNumbers = arr.filter(num => num % 2 === 0);
console.log(evenNumbers); // [2]

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

🤔 Как используются телепорты в Vue?

Телепорт позволяет отрисовать элемент не внутри текущего компонента, а в другом месте DOM. Например, ты можешь открыть модальное окно или dropdown не внутри своей вложенной структуры, а сразу в body. Это решает проблемы с позиционированием и z-index — особенно для всплывающих элементов, которые не должны быть ограничены стилями родителя.

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

🤔 Как увеличить в размере при наведении элемент, не сдвигая соседние?

Чтобы увеличить элемент в размере при наведении, не сдвигая при этом соседние элементы, можно использовать CSS свойство transform с функцией scale. Это позволяет изменять размер элемента, не влияя на его положение и соседние элементы, так как трансформация происходит в контексте самого элемента и не меняет его фактические размеры в документе.

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Увеличение при наведении</title>
    <style>
        .container {
            display: flex;
            gap: 10px;
        }
        .item {
            width: 100px;
            height: 100px;
            background-color: lightblue;
            text-align: center;
            line-height: 100px;
            transition: transform 0.3s;
        }
        .item:hover {
            transform: scale(1.2); /* Увеличение размера при наведении */
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>
</body>
</html>

🚩Почему это важно?

🟠Эффективность пользовательского интерфейса
Увеличение элементов при наведении может служить для привлечения внимания пользователя или для улучшения взаимодействия, например, при работе с интерактивными элементами.

🟠Стабильность макета
Применение трансформации с transform: scale позволяет изменять размер элемента без изменения его фактического размера и расположения в документе, что сохраняет стабильность макета и не нарушает расположение соседних элементов.

🟠Плавные анимации
Использование transition делает анимацию плавной и приятной для глаз, улучшая общее восприятие интерфейса.

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

🤔 Как сравниваются массивы и объекты в JS?

Сравнение объектов и массивов происходит по ссылке, а не по содержимому. Даже два идентичных массива/объекта считаются разными, если созданы отдельно.

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

🤔 С помощью чего можно рассчитать идентификатор в js?

В JavaScript есть несколько способов сгенерировать уникальный идентификатор (ID), в зависимости от требований:

🟠 Генерация UUID
UUID (универсально уникальный идентификатор) – это 128-битное число, представленное строкой в формате xxxxxxxx-xxxx-Mxxx-Nxxx-xxxxxxxxxxxx.
Генерация с помощью crypto.randomUUID() (современный способ)

const id = crypto.randomUUID();
console.log(id); // Например: "3d593c8e-7a34-45f7-9a14-2f5f5788d4ec"

Использование библиотеки uuid

import { v4 as uuidv4 } from 'uuid';

const id = uuidv4();
console.log(id); // "f47ac10b-58cc-4372-a567-0e02b2c3d479"

🟠Хеш-функции (SHA, MD5)
Если нужно вычислить уникальный идентификатор на основе входных данных (например, строки или объекта), можно использовать хеш-функции.
SHA-256 через crypto.subtle

async function generateHash(input) {
    const encoder = new TextEncoder();
    const data = encoder.encode(input);
    const hashBuffer = await crypto.subtle.digest('SHA-256', data);
    return [...new Uint8Array(hashBuffer)].map(b => b.toString(16).padStart(2, '0')).join('');
}

generateHash("hello").then(console.log);
// Например: "2cf24dba5fb0a30e26e83b2ac5b9e29e1b161e5c1fa7425e73043362938b9824"

🟠Генерация случайного идентификатора
Если нужна просто случайная строка, можно использовать Math.random().
Базовая генерация ID

const id = Math.random().toString(36).substring(2, 10);
console.log(id); // Например: "5g7f8a1z"

Более безопасный вариант с crypto.getRandomValues()

function generateRandomId(length = 16) {
    const array = new Uint8Array(length);
    crypto.getRandomValues(array);
    return [...array].map(b => b.toString(16).padStart(2, '0')).join('');
}

console.log(generateRandomId(8)); // Например: "a3f9b8c7"

🟠Инкрементальные ID
Если нужно просто увеличивающееся число (например, ID для записей в массиве), можно использовать счётчик

let counter = 0;
function generateIncrementalId() {
    return ++counter;
}

console.log(generateIncrementalId()); // 1
console.log(generateIncrementalId()); // 2
console.log(generateIncrementalId()); // 3

🟠Хеширование строки (например, объекта)
Можно создать ID, основываясь на JSON-объекте.

function hashObject(obj) {
    return JSON.stringify(obj)
        .split("")
        .reduce((hash, char) => {
            return ((hash << 5) - hash) + char.charCodeAt(0);
        }, 0)
        .toString(16);
}

console.log(hashObject({ name: "Alice", age: 25 })); // Например: "-3d4e5f"

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

🤔 Дай пояснение, для какой цели добавлены следующие элементы.

article, aside, audio, canvas, figcaption, figure, footer, header, hgroup, output, section, video
- article — самодостаточный, независимый фрагмент контента (пост, новость).
- aside — боковое или дополнительное содержимое (сайдбар, заметка).
- audio — встроенный аудиоплеер, проигрывает звук.
- canvas — холст для динамической графики, рисования.
- figcaption — подпись к изображению или другой визуализации в <figure>.
- figure — контейнер для самостоятельного медиаконтента с подписью (графики, схемы).
- footer — нижний блок страницы или раздела, часто содержит навигацию, контакты.
- header — верхний блок, заголовки, логотип, меню.
- hgroup — группировка заголовков (например, h1 и h2 вместе как один логический блок).
- output — отображение результата (например, вычислений в формах).
- section — логический блок документа (тема, раздел).
- video — встроенный видеоплеер, воспроизводит видео.

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

🤔 Почему 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" (никаких багов!)

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

🤔 Какие проблемы решает Vuex?

Vuex — это централизованное хранилище данных. Он решает проблему, когда нескольким компонентам нужно работать с одними и теми же данными. Вместо того чтобы передавать данные через props или события, всё состояние хранится в одном месте. Это упрощает управление состоянием, особенно в больших приложениях, и делает логику более предсказуемой.

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