🤔 Что такое макро и микро задачи?

Макро-задачи (macro-tasks) — это крупные задачи, такие как события ввода-вывода, таймеры или сетевые запросы, которые планируются в основной очереди событий. Микро-задачи (micro-tasks) — это задачи меньшего приоритета, которые выполняются сразу после завершения текущего блока кода, но до выполнения следующих макро-задач (например, `Promise` или `MutationObserver`). Микро-задачи всегда выполняются перед макро-задачами, что позволяет им завершаться быстрее. Это важное отличие в управлении асинхронным кодом и приоритизацией событий.

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

🤔 Как работают медиа запросы про мобильные приложения?

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

🚩Основные аспекты

🟠Ширина экрана (Viewport Width)
Один из наиболее часто используемых параметров для медиа-запросов — ширина экрана устройства.

@media (max-width: 600px) {
    /* Стили для мобильных устройств */
}   

🟠Ориентация (Orientation)
Медиа-запросы могут применяться в зависимости от ориентации устройства: портретная (вертикальная) или альбомная (горизонтальная).

@media (orientation: portrait) {
    /* Стили для портретной ориентации */
}

@media (orientation: landscape) {
    /* Стили для альбомной ориентации */
}   

🟠Разрешение экрана (Resolution)
Медиа-запросы могут основываться на разрешении экрана, что полезно для ретина-дисплеев и других устройств с высоким разрешением.

@media (min-resolution: 2dppx) {
    /* Стили для экранов с высоким разрешением */
}   

🚩Примеры

Изменение стилей для мобильных устройств

/* Основные стили для всех устройств */
body {
    font-size: 16px;
    background-color: white;
}

/* Стили для мобильных устройств (максимальная ширина 600px) */
@media (max-width: 600px) {
    body {
        font-size: 14px;
        background-color: lightgrey;
    }
}

Адаптация макета для планшетов и мобильных устройств

/* Основные стили для десктопов и планшетов */
.container {
    display: flex;
    flex-direction: row;
}

/* Стили для планшетов (ширина 601px до 1024px) */
@media (max-width: 1024px) {
    .container {
        flex-direction: column;
    }
}

/* Стили для мобильных устройств (максимальная ширина 600px) */
@media (max-width: 600px) {
    .container {
        flex-direction: column;
        font-size: 12px;
    }
}

🚩Подходы

🟠Мобильный подход (Mobile-First)
В этом подходе основные стили пишутся для мобильных устройств, а затем добавляются медиа-запросы для планшетов и десктопов.

/* Основные стили для мобильных устройств */
body {
font-size: 14px;
}

/* Стили для планшетов и десктопов */
@media (min-width: 600px) {
body {
font-size: 16px;
}
}

@media (min-width: 1024px) {
body {
font-size: 18px;
}
}

🟠Десктопный подход (Desktop-First)
В этом подходе основные стили пишутся для десктопов, а затем добавляются медиа-запросы для планшетов и мобильных устройств.

/* Основные стили для десктопов */
body {
font-size: 18px;
}

/* Стили для планшетов */
@media (max-width: 1024px) {
body {
font-size: 16px;
}
}

/* Стили для мобильных устройств */
@media (max-width: 600px) {
body {
font-size: 14px;
}
}

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

🤔 Что такое this?

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

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

🤔 Какое свойство используется для перевода текста в заглавные/строчные буквы?

Используется свойство text-transform. Это свойство управляет преобразованием текста и может принимать несколько значений для изменения регистра букв.

🚩Значения свойства

🟠none
Оставляет текст в его первоначальном виде, без преобразований.

p {
    text-transform: none;
}   

🟠capitalize
Преобразует первую букву каждого слова в заглавную.

p {
    text-transform: capitalize;
}   

🟠uppercase
Преобразует все буквы текста в заглавные.

p {
    text-transform: uppercase;
}   

🟠lowercase
Преобразует все буквы текста в строчные.

p {
    text-transform: lowercase;
}   

🚩Примеры использования

🟠Преобразование текста в заглавные буквы

.uppercase {
    text-transform: uppercase;
}

<p class="uppercase">Этот текст будет заглавными буквами.</p>

🟠Преобразование текста в строчные буквы

.lowercase {
    text-transform: lowercase;
}

<p class="lowercase">ЭТОТ ТЕКСТ БУДЕТ СТРОЧНЫМИ БУКВАМИ.</p>

🟠Преобразование первой буквы каждого слова в заглавную

.capitalize {
    text-transform: capitalize;
}

<p class="capitalize">этот текст будет с заглавными буквами у каждого слова.</p>

🟠Отсутствие преобразований

.none {
    text-transform: none;
}

<p class="none">Этот текст останется в исходном виде.</p>

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

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

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

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

🤔 Для чего рекомендуется использовать атрибуты data?

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

🚩Атрибуты

🟠Хранение дополнительных данных
Позволяют хранить пользовательские данные непосредственно в HTML-элементах. Это особенно полезно, когда необходимо передавать данные между HTML и JavaScript.

<div id="user" data-user-id="123" data-user-role="admin">...</div>   

🟠Создание более гибких и интерактивных приложений
Можно легко передавать и использовать данные для динамического изменения содержимого страницы.

<button data-action="save" data-target="#form">Save</button>  

🟠Разделение данных и представления
Помогают разделять данные и логику от представления, сохраняя HTML-код чистым и структурированным.

🟠Работа с JavaScript
JavaScript может легко извлекать и использовать данные из атрибутов data-, что упрощает манипулирование элементами страницы.

const user = document.getElementById('user');
const userId = user.getAttribute('data-user-id');
const userRole = user.getAttribute('data-user-role');
console.log(`User ID: ${userId}, Role: ${userRole}`);  

🚩Примеры использования

🟠Хранение информации о продукте

<div class="product" data-product-id="101" data-product-price="29.99">
    <h2>Product Name</h2>
    <p>Product Description</p>
</div>

const product = document.querySelector('.product');
const productId = product.getAttribute('data-product-id');
const productPrice = product.getAttribute('data-product-price');
console.log(`Product ID: ${productId}, Price: ${productPrice}`);

🟠Управление действиями кнопки

<button data-action="submit" data-target="#form">Submit</button>

const button = document.querySelector('button');
button.addEventListener('click', function() {
    const action = this.getAttribute('data-action');
    const target = this.getAttribute('data-target');
    console.log(`Action: ${action}, Target: ${target}`);
});

🟠Хранение состояния элемента

<div id="toggle" data-state="collapsed">Click to Expand</div>

const toggle = document.getElementById('toggle');
toggle.addEventListener('click', function() {
    const state = this.getAttribute('data-state');
    if (state === 'collapsed') {
        this.setAttribute('data-state', 'expanded');
        this.textContent = 'Click to Collapse';
    } else {
        this.setAttribute('data-state', 'collapsed');
        this.textContent = 'Click to Expand';
    }
});

🚩Плюсы

➕Простота и гибкость
Легко добавлять и изменять данные без изменения HTML-структуры.
➕Совместимость с существующими инструментами
Атрибуты data- не влияют на стандартные функции браузеров и инструментов разработки.
➕Поддержка валидации HTML
HTML5 атрибуты data- валидны и не нарушают спецификацию.

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

🤔 Какие бывают хуки?

В React хуки — это специальные функции, которые позволяют "подключаться" к состоянию и жизненному циклу функциональных компонентов. Основные хуки включают `useState` для работы с состоянием, `useEffect` для выполнения побочных эффектов, и `useContext` для доступа к контексту. Также есть пользовательские хуки, которые можно создавать для повторного использования логики между компонентами. Хуки позволяют использовать функциональные компоненты так же эффективно, как и классовые.

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

🤔 Как стилизовать инпут для загрузки файлов?

Элемент <input type="file"> может быть сложно из-за его специфичного и нестандартного поведения в разных браузерах. Однако, с помощью CSS и небольшого количества JavaScript, можно создать стилизованный компонент для загрузки файлов, который будет выглядеть и работать одинаково во всех браузерах.

🚩Для загрузки файлов HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom File Input</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="file-input">
        <input type="file" id="file" class="file-input__input">
        <label for="file" class="file-input__label">
            <span class="file-input__button">Choose a file</span>
            <span class="file-input__name">No file chosen</span>
        </label>
    </div>
    <script src="scripts.js"></script>
</body>
</html>

🚩Для загрузки файлов CSS

/* Стили для контейнера файла */
.file-input {
    position: relative;
    display: inline-block;
    width: 100%;
    max-width: 400px;
    font-family: Arial, sans-serif;
}

/* Скрыть стандартный инпут для файла */
.file-input__input {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

/* Стили для кастомного лейбла */
.file-input__label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #f8f8f8;
    cursor: pointer;
}

/* Стили для кнопки выбора файла */
.file-input__button {
    background-color: #007bff;
    color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
    margin-right: 10px;
}

/* Стили для отображения имени файла */
.file-input__name {
    color: #999;
}

🚩Для загрузки файлов JavaScript

document.addEventListener('DOMContentLoaded', function () {
    const fileInput = document.querySelector('.file-input__input');
    const fileName = document.querySelector('.file-input__name');

    fileInput.addEventListener('change', function () {
        if (fileInput.files.length > 0) {
            fileName.textContent = fileInput.files[0].name;
        } else {
            fileName.textContent = 'No file chosen';
        }
    });
});

🟠HTML
Создается структура с элементом <input type="file">, который скрыт с помощью CSS. <label> используется для создания пользовательского интерфейса. Лейбл связан с инпутом через атрибут for.

🟠CSS
Скрывается стандартный элемент инпута для файла с помощью opacity: 0 и position: absolute. Стилизуются кастомные элементы лейбла, кнопки и отображения имени файла.

🟠JavaScript
Слушает событие change на инпуте для файла. При выборе файла обновляет текст внутри элемента с классом .file-input__name на имя выбранного файла.

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

🤔 Что такое мемоизация?

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

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

🤔 Что такое селектор атрибутов?

Позволяют выбирать элементы HTML на основе наличия, значения или частичного соответствия атрибутов. Это мощный инструмент, который делает стилизацию элементов более гибкой и точной.

🚩Виды

🟠Селектор по наличию атрибута
Выбирает элементы, которые содержат указанный атрибут, независимо от его значения.

/* Выбирает все элементы с атрибутом title */
[title] {
    color: blue;
}

🟠Селектор по точному значению атрибута
Выбирает элементы, атрибут которых имеет точное указанное значение.

/* Выбирает все элементы с атрибутом type, равным "submit" */
input[type="submit"] {
    background-color: green;
}

🟠Селектор по наличию значения в списке значений атрибута
Выбирает элементы, атрибут которых содержит указанное значение в списке, разделенном пробелами.

/* Выбирает все элементы с классом, включающим "btn" */
[class~="btn"] {
    font-weight: bold;
}

🟠Селектор по начальной части значения атрибута
Выбирает элементы, атрибут которых начинается с указанного значения.

/* Выбирает все элементы, значение атрибута href которых начинается с "https" */
a[href^="https"] {
    color: red;
}

🟠Селектор по конечной части значения атрибута
Выбирает элементы, атрибут которых заканчивается на указанное значение.

/* Выбирает все элементы, значение атрибута href которых заканчивается на ".pdf" */
a[href$=".pdf"] {
    text-decoration: underline;
}

🟠Селектор по вхождению значения в атрибут
Выбирает элементы, атрибут которых содержит указанное значение в любом месте.

/* Выбирает все элементы, значение атрибута href которых содержит "example" */
a[href*="example"] {
    color: orange;
}

🚩Примеры использования селекторов атрибутов

Стилизация всех изображений с атрибутом alt

img[alt] {
    border: 2px solid blue;
}

Стилизация ссылок, ведущих на внешние сайты

a[href^="http"] {
    color: red;
}

Стилизация полей ввода с определенным типом

input[type="text"] {
    border: 1px solid gray;
}

Стилизация элементов с определенным классом

[class~="button"] {
    padding: 10px;
    background-color: lightgray;
}

🚩Комбинированные селекторы

Селекторы атрибутов можно комбинировать с другими типами селекторов для создания более специфичных правил.

/* Выбирает все кнопки с классом btn и типом submit */
button.btn[type="submit"] {
    background-color: green;
    color: white;
}

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

🤔 В чём отличие хранения данных в local storage от куки?

`localStorage` хранит данные на стороне клиента и позволяет сохранять информацию в виде ключ-значение без ограничения по времени, пока пользователь явно не удалит данные. Куки же могут передаваться на сервер при каждом запросе, имеют ограниченный объём (до 4KB) и срок действия. `localStorage` более удобен для долгосрочного хранения данных, которые не должны передаваться на сервер, тогда как куки полезны для передачи информации, такой как аутентификационные токены. `localStorage` работает только на клиентской стороне, куки же могут быть доступны и на стороне сервера.

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

🤔 Как изменить стили кнопок с атрибутом disabled?

C атрибутом disabled, используя селекторы атрибутов. Селектор [disabled] позволяет выбрать все элементы, которые имеют этот атрибут, а селектор :disabled позволяет выбрать все элементы, которые находятся в состоянии disabled.

🚩Пример использования

🟠Селектора [disabled]
Этот селектор выбирает все элементы, у которых присутствует атрибут disabled.

button[disabled] {
    background-color: gray;
    color: white;
    border: 1px solid #ccc;
    cursor: not-allowed; /* Указывает, что элемент недоступен для взаимодействия */
    opacity: 0.6; /* Уменьшает непрозрачность */
}

🟠Псевдокласса :disabled
Этот селектор выбирает все элементы, которые находятся в состоянии disabled.

button:disabled {
    background-color: gray;
    color: white;
    border: 1px solid #ccc;
    cursor: not-allowed;
    opacity: 0.6;
}

🚩Полные примеры

С HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Disabled Button Styling</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <button>Active Button</button>
    <button disabled>Disabled Button</button>
</body>
</html>

С CSS

/* Стили для активных кнопок */
button {
    background-color: blue;
    color: white;
    border: 1px solid #000;
    padding: 10px 20px;
    cursor: pointer;
}

/* Стили для кнопок с атрибутом disabled */
button[disabled] {
    background-color: gray;
    color: white;
    border: 1px solid #ccc;
    cursor: not-allowed;
    opacity: 0.6;
}

/* Альтернативный способ с использованием псевдокласса :disabled */
button:disabled {
    background-color: gray;
    color: white;
    border: 1px solid #ccc;
    cursor: not-allowed;
    opacity: 0.6;
}

🟠Комбинированный подход
Вы можете комбинировать селекторы атрибутов с другими селекторами для более точного применения стилей.

/* Стили для кнопок с классом .special, которые имеют атрибут disabled */
button.special[disabled] {
    background-color: darkgray;
    color: black;
    border: 1px dashed #999;
    cursor: not-allowed;
    opacity: 0.7;
}

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

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

`forEach` выполняет функцию для каждого элемента массива, не возвращая нового массива, тогда как `map` создает новый массив, заполняя его результатами выполнения функции для каждого элемента исходного массива. `forEach` обычно используется для выполнения побочных эффектов, таких как изменение существующих данных или вызов внешних функций. `map` удобен для преобразования массива в новый массив с изменёнными данными. Если требуется создать новый массив, предпочтительнее использовать `map`.

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

🤔 Как изменить стили для элемента span?

Для изменения стилей элемента <span> в CSS можно использовать селекторы классов, идентификаторов, селекторы по атрибутам или селекторы по типу элемента.

🚩Как стилизовать <span> элемент

🟠Селекторов классов
Если элементу <span> присвоен класс, вы можете использовать класс-селектор для его стилизации.

HTML

<span class="highlight">Этот текст будет выделен.</span>

CSS

.highlight {
    color: red;
    font-weight: bold;
    background-color: yellow;
}

🟠Селекторов идентификаторов
Если элементу <span> присвоен идентификатор, вы можете использовать идентификатор-селектор для его стилизации.

HTML

<span id="unique-span">Этот текст уникален.</span>

CSS

#unique-span {
    color: blue;
    font-style: italic;
    background-color: lightgray;
}

🟠Селекторов по атрибутам
Вы можете использовать селекторы атрибутов для стилизации элементов <span>, основанных на наличии определенного атрибута или его значения.

HTML

<span data-custom="example">Этот текст имеет пользовательский атрибут.</span>

CSS

span[data-custom="example"] {
    color: green;
    text-decoration: underline;
}

🟠Селекторов по типу элемента
Вы можете использовать селектор по типу элемента для стилизации всех элементов <span> на странице. Однако будьте осторожны с этим подходом, так как он затронет все <span> элементы.

HTML

<span>Этот текст будет стилизован.</span>
<span>И этот текст тоже.</span>

CSS

span {
    color: purple;
    font-size: 18px;
}

🟠Комбинированные селекторы
Вы можете комбинировать различные типы селекторов для более точной стилизации.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Styled Span Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <span class="highlight">Этот текст будет выделен.</span>
    <span id="unique-span">Этот текст уникален.</span>
    <span data-custom="example">Этот текст имеет пользовательский атрибут.</span>
    <p>Текст с <span class="highlight">выделением</span> внутри абзаца.</p>
    <p id="unique-paragraph">Абзац с <span class="highlight">выделением</span> и уникальным идентификатором.</p>
</body>
</html>

CSS

/* Стили для класса */
.highlight {
    color: red;
    font-weight: bold;
    background-color: yellow;
}

/* Стили для идентификатора */
#unique-span {
    color: blue;
    font-style: italic;
    background-color: lightgray;
}

/* Стили для пользовательского атрибута */
span[data-custom="example"] {
    color: green;
    text-decoration: underline;
}

/* Стили для всех span */
span {
    color: purple;
    font-size: 18px;
}

/* Комбинированные стили */
p span.highlight {
    color: red;
    font-weight: bold;
}

#unique-paragraph span.highlight {
    color: blue;
    background-color: yellow;
}

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

🤔 Что такое дженерик?

Дженерики (generics) в программировании позволяют создавать функции и классы с параметризованными типами, которые могут работать с любыми типами данных. В JavaScript, несмотря на отсутствие встроенной поддержки дженериков, концепция реализуется через использование универсальных функций, которые принимают аргументы любого типа. В TypeScript дженерики активно используются для обеспечения типобезопасности при работе с обобщёнными структурами данных. Дженерики делают код более гибким и многоразовым.

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

🤔 Что происходит при схлопывании границ?

Это процесс в CSS, когда вертикальные внешние отступы (margins) двух или более блоков объединяются в один. Это поведение касается только вертикальных отступов (margin-top и margin-bottom) и не касается горизонтальных (margin-left и margin-right).

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

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

🚩Как это работает?

Если у одного блока снизу есть margin-bottom, а у другого блока сверху есть margin-top, то итоговый отступ между этими блоками будет равен большему из двух значений, а не их сумме. Если у элемента задан margin-top и он находится первым в контейнере, его верхний отступ может схлопнуться с верхним отступом контейнера. Если у элемента установлен margin-bottom и он является последним в контейнере, его нижний отступ может схлопнуться с нижним отступом контейнера. В этом примере между блоками будет отступ не 50px (20px + 30px), а 30px, потому что сработает схлопывание границ и возьмется большее значение.

<!DOCTYPE html>
<html>
<head>
    <style>
        .block1 {
            margin-bottom: 20px;
            background-color: lightblue;
        }
        .block2 {
            margin-top: 30px;
            background-color: lightcoral;
        }
    </style>
</head>
<body>
    <div class="block1">Блок 1</div>
    <div class="block2">Блок 2</div>
</body>
</html>

🚩Когда схлопывание границ не происходит

🟠Если элементы имеют display:flex или display:grid.
🟠Если между элементами есть элемент с padding или border.
🟠Если у одного из элементов установлено свойство overflow со значением отличным от visible.
🟠Если один из элементов плавающий (float).

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

🤔 Для чего нужен eventloop в js?

Event Loop (цикл событий) в JavaScript управляет выполнением асинхронного кода, следя за очередями задач и выполняя их последовательно. Когда в основной поток попадает асинхронная задача, такая как таймер или сетевой запрос, она добавляется в очередь событий. После завершения текущего блока кода Event Loop проверяет, есть ли готовые задачи в очереди, и запускает их. Это позволяет JavaScript быть однопоточным языком с поддержкой асинхронных операций без блокировки основного потока.

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

🤔 Что возвращает map?

Используется для создания нового массива, содержащего результаты вызова переданной функции для каждого элемента исходного массива. Этот метод не изменяет оригинальный массив, а возвращает новый.

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

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

🚩Как это используется?

Метод map принимает одну функцию в качестве аргумента. Эта функция будет выполнена для каждого элемента массива, и результат выполнения этой функции будет добавлен в новый массив, который в итоге возвращается методом map. В этом примере каждый элемент массива numbers умножается на 2, и результат сохраняется в новом массиве doubled.

const numbers = [1, 2, 3, 4, 5];

// Используем метод map для умножения каждого элемента на 2
const doubled = numbers.map(function(num) {
  return num * 2;
});

console.log(doubled); // [2, 4, 6, 8, 10]

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

const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8, 10]

🚩Дополнительные параметры

Функция, переданная в map, может принимать до трех аргументов:

🟠Текущий элемент массива.
🟠Индекс текущего элемента.
🟠Сам исходный массив.

Пример с использованием всех трех аргументов:

const numbers = [1, 2, 3, 4, 5];

const detailed = numbers.map((num, index, array) => {
  return `Элемент ${num} находится на индексе ${index} в массиве [${array}]`;
});

console.log(detailed);
/*
[
  'Элемент 1 находится на индексе 0 в массиве [1,2,3,4,5]',
  'Элемент 2 находится на индексе 1 в массиве [1,2,3,4,5]',
  'Элемент 3 находится на индексе 2 в массиве [1,2,3,4,5]',
  'Элемент 4 находится на индексе 3 в массиве [1,2,3,4,5]',
  'Элемент 5 находится на индексе 4 в массиве [1,2,3,4,5]'
]
*/

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

🤔 Какие бывают значения у свойства position?

Свойство `position` в CSS имеет следующие значения: `static` (по умолчанию, элемент расположен в нормальном потоке документа), `relative` (элемент перемещается относительно своего нормального положения), `absolute` (элемент позиционируется относительно ближайшего предка с позиционированием), `fixed` (элемент фиксируется относительно окна браузера) и `sticky` (элемент перемещается до определённой границы и остаётся закреплённым). Эти значения позволяют управлять расположением элементов на странице в зависимости от требований верстки.

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

🤔 Чем html отличается от jsx?

HTML и JSX имеют сходства и различия, которые важно понимать при разработке веб-приложений, особенно в контексте работы с библиотекой React.

🚩HTML

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

<!DOCTYPE html>
<html>
<head>
  <title>Пример HTML</title>
</head>
<body>
  <h1>Заголовок</h1>
  <p>Это абзац.</p>
</body>
</html>

🚩JSX

Это синтаксическое расширение для JavaScript, которое используется в React для описания того, как пользовательский интерфейс должен выглядеть. JSX позволяет писать HTML-подобный код внутри JavaScript, который затем транспилируется в вызовы JavaScript-функций. Этот код выглядит как HTML, но на самом деле он является JavaScript-кодом, который будет компилироваться в вызовы React.createElement.

const element = (
  <div>
    <h1>Заголовок</h1>
    <p>Это абзац.</p>
  </div>
);

🚩Ключевые отличия

🟠Синтаксис и семантика
HTML использует стандартные HTML-теги и атрибуты. JSX использует JavaScript-выражения внутри фигурных скобок {}, и некоторые атрибуты имеют другие названия (например, className вместо class, htmlFor вместо for).
🟠Логика и данные
В HTML нельзя напрямую писать JavaScript-код, можно лишь использовать его через теги <script>. В JSX можно использовать любые JavaScript-выражения, что позволяет динамически формировать разметку.
🟠Транспиляция
HTML непосредственно интерпретируется браузером. JSX нужно транспилировать (с помощью Babel или другого транспилера) в обычный JavaScript, чтобы браузер мог его понять.
🟠Расширенные возможности
HTML не поддерживает логику напрямую, все изменения в DOM происходят через JavaScript. JSX позволяет интегрировать логику непосредственно в разметку, что делает код более декларативным и удобным для работы в рамках React.

Пример использования динамического контента

const name = "Мир";
const element = <h1>Привет, {name}!</h1>;

Этот JSX-код будет транспилирован

const element = React.createElement('h1', null, 'Привет, ', name, '!');

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