🤔 Что такое IIFE?

IIFE (Immediately Invoked Function Expression) — это функция в JavaScript, которая вызывается сразу после определения. Она используется для создания изолированного пространства имён, чтобы избежать конфликтов в глобальной области видимости.

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

🤔 Какие основные реакт хуки знаешь и используешь?

React предоставляет несколько основных хуков (hooks), которые позволяют использовать состояние и другие возможности React в функциональных компонентах.

🟠useState
useState позволяет добавить состояние в функциональный компонент.

import React, { useState } from 'react';
const Counter = () => {
    const [count, setCount] = useState(0);
    return (
        <div>
            <p>Count: {count}</p>
            <button onClick={() => setCount(count + 1)}>Increment</button>
        </div>
    );
};
export default Counter;

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

import React, { useContext } from 'react';
const ThemeContext = React.createContext('light');
const ThemedComponent = () => {
    const theme = useContext(ThemeContext);
    return <div style={{ background: theme === 'light' ? '#fff' : '#333', color: theme === 'light' ? '#000' : '#fff' }}>
        The current theme is {theme}
    </div>;
};
const App = () => {
    return (
        <ThemeContext.Provider value="dark">
            <ThemedComponent />
        </ThemeContext.Provider>
    );
};
export default App;

🟠useReducer
useReducer — это альтернатива useState для управления более сложным состоянием в компоненте.

import React, { useReducer } from 'react';
const initialState = { count: 0 };
function reducer(state, action) {
    switch (action.type) {
        case 'increment':
            return { count: state.count + 1 };
        case 'decrement':
            return { count: state.count - 1 };
        default:
            throw new Error();
    }
}
const Counter = () => {
    const [state, dispatch] = useReducer(reducer, initialState);
    return (
        <div>
            <p>Count: {state.count}</p>
            <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
            <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
        </div>
    );
};
export default Counter;

🟠useRef
useRef возвращает изменяемый объект-реф, который сохраняется при повторных рендерах компонента. Это часто используется для доступа к DOM-элементам или для сохранения переменных, которые не вызывают повторный рендер при изменении.

import React, { useRef } from 'react';
const TextInputWithFocusButton = () => {
    const inputEl = useRef(null);
    const onButtonClick = () => {
        // "current" указывает на смонтированный элемент input
        inputEl.current.focus();
    };
    return (
        <div>
            <input ref={inputEl} type="text" />
            <button onClick={onButtonClick}>Focus the input</button>
        </div>
    );
};
export default TextInputWithFocusButton;

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

🤔 Что такое псевдоэлемент?

Псевдоэлемент — это CSS-конструкция, которая позволяет стилизовать определённые части элемента, например, ::before для добавления контента перед элементом или ::after для добавления после. Это удобно для оформления, не изменяя HTML-структуру.

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

🤔 Как отследить демонтирование функционального компонента?

В функциональных компонентах React можно отслеживать демонтирование компонента с помощью хука useEffect. Когда компонент демонтируется, React вызывает функцию очистки, которую можно определить внутри useEffect.

🚩Использование `useEffect` для отслеживания демонтирования

Хук useEffect позволяет выполнять побочные эффекты в функциональных компонентах. Функция очистки, возвращаемая из useEffect, выполняется при демонтировании компонента.

import React, { useEffect } from 'react';

const MyComponent = () => {
    useEffect(() => {
        console.log('Component mounted');

        // Функция очистки вызывается при демонтировании компонента
        return () => {
            console.log('Component will unmount');
        };
    }, []); // Пустой массив зависимостей означает, что эффект выполнится только при монтировании и демонтировании

    return (
        <div>
            <p>My Component</p>
        </div>
    );
};

export default MyComponent;

Хук useEffect

   useEffect(() => {
       console.log('Component mounted');

       return () => {
           console.log('Component will unmount');
       };
   }, []);
   

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

import React, { useEffect, useState } from 'react';

const WebSocketComponent = () => {
    const [messages, setMessages] = useState([]);

    useEffect(() => {
        const socket = new WebSocket('ws://example.com/socket');

        socket.onmessage = (event) => {
            setMessages((prevMessages) => [...prevMessages, event.data]);
        };

        console.log('WebSocket connection opened');

        return () => {
            socket.close();
            console.log('WebSocket connection closed');
        };
    }, []);

    return (
        <div>
            <h1>WebSocket Messages</h1>
            <ul>
                {messages.map((message, index) => (
                    <li key={index}>{message}</li>
                ))}
            </ul>
        </div>
    );
};

export default WebSocketComponent;

Открытие WebSocket соединения

const socket = new WebSocket('ws://example.com/socket');   

Обработка входящих сообщений

   socket.onmessage = (event) => {
       setMessages((prevMessages) => [...prevMessages, event.data]);
   };
   

Закрытие WebSocket соединения при демонтировании

   return () => {
       socket.close();
       console.log('WebSocket connection closed');
   };
   

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

🤔 Что такое редьюсер, и какие параметры он принимает?

В контексте JavaScript, редьюсер (reducer) — это функция, которая принимает текущее состояние и действие, а затем возвращает новое состояние. Редьюсеры широко используются в библиотеке Redux для управления состоянием приложения.

🚩Основная концепция

1⃣Принимает два аргумента
Текущее состояние (state)
Действие (action)
2⃣Возвращает новое состояние.

const reducer = (state, action) => {
    switch (action.type) {
        case 'ACTION_TYPE':
            // Возвращаем новое состояние
            return {
                ...state,
                // Обновляем определенные свойства
            };
        default:
            return state;
    }
};

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

Инициализация состояния

const initialState = {
    count: 0
};

Определение редьюсера

const counterReducer = (state = initialState, action) => {
    switch (action.type) {
        case 'INCREMENT':
            return {
                ...state,
                count: state.count + 1
            };
        case 'DECREMENT':
            return {
                ...state,
                count: state.count - 1
            };
        default:
            return state;
    }
};

🚩Использование редьюсера с useReducer в React

React предоставляет хук useReducer для управления состоянием с помощью редьюсера в функциональных компонентах.

import React, { useReducer } from 'react';

const initialState = { count: 0 };

const counterReducer = (state, action) => {
    switch (action.type) {
        case 'INCREMENT':
            return { count: state.count + 1 };
        case 'DECREMENT':
            return { count: state.count - 1 };
        default:
            return state;
    }
};

const Counter = () => {
    const [state, dispatch] = useReducer(counterReducer, initialState);

    return (
        <div>
            <p>Count: {state.count}</p>
            <button onClick={() => dispatch({ type: 'INCREMENT' })}>Increment</button>
            <button onClick={() => dispatch({ type: 'DECREMENT' })}>Decrement</button>
        </div>
    );
};

export default Counter;

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

🤔 Какими способами можно скрыть элемент?

1. display: none; — элемент удаляется из визуального потока страницы.
2. visibility: hidden; — элемент остаётся на странице, но становится невидимым.
3. opacity: 0; — элемент остаётся видимым для событий, но становится прозрачным.
4. С помощью JavaScript: удаление элемента (removeChild) или добавление атрибута hidden.

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

🤔 Что такое экшн, и как изменить состояние?

Это объект, который отправляется в хранилище (store) и содержит информацию о том, что произошло. Экшны являются единственным источником информации для хранилища, которое использует их для определения, как изменить текущее состояние.

🚩Структура экшна

Это простой объект JavaScript, который должен содержать, по крайней мере, одно свойство type, указывающее тип экшна. Дополнительно могут быть добавлены другие свойства для передачи данных.

const incrementAction = {
    type: 'INCREMENT'
};
const addTodoAction = {
    type: 'ADD_TODO',
    payload: {
        id: 1,
        text: 'Learn Redux'
    }
};

🚩Создатели экшнов (Action Creators)

Это функции, которые создают экшны. Это полезно для создания экшнов динамически и обеспечения единообразия.

const increment = () => {
    return {
        type: 'INCREMENT'
    };
};
const addTodo = (id, text) => {
    return {
        type: 'ADD_TODO',
        payload: {
            id,
            text
        }
    };
};

🚩Изменение состояния с помощью редьюсера

Чтобы изменить состояние в Redux, используется редьюсер. Редьюсер — это функция, которая принимает текущее состояние и экшн, а затем возвращает новое состояние.

const initialState = {
    count: 0,
    todos: []
};

const rootReducer = (state = initialState, action) => {
    switch (action.type) {
        case 'INCREMENT':
            return {
                ...state,
                count: state.count + 1
            };
        case 'ADD_TODO':
            return {
                ...state,
                todos: [...state.todos, action.payload]
            };
        default:
            return state;
    }
};

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

1⃣Установка Redux
Сначала установим необходимые пакеты

npm install redux react-redux

2⃣Создание хранилища (store)

import { createStore } from 'redux';
import rootReducer from './reducers';
const store = createStore(rootReducer);

3⃣Подключение React к Redux

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import App from './App';
import store from './store';
ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>,
    document.getElementById('root')
);

🚩Объяснение

1⃣Создание экшнов

   const incrementAction = { type: 'INCREMENT' };
   const addTodoAction = {
       type: 'ADD_TODO',
       payload: { id: 1, text: 'Learn Redux' }
   };

2⃣Создатели экшнов

   const increment = () => ({ type: 'INCREMENT' });
   const addTodo = (id, text) => ({
       type: 'ADD_TODO',
       payload: { id, text }
   });

3⃣Редьюсер

   const rootReducer = (state = initialState, action) => {
       switch (action.type) {
           case 'INCREMENT':
               return { ...state, count: state.count + 1 };
           case 'ADD_TODO':
               return { ...state, todos: [...state.todos, action.payload] };
           default:
               return state;
       }
   };

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

🤔 Что такое CORS?

CORS (Cross-Origin Resource Sharing) — это механизм безопасности, который позволяет или запрещает доступ к ресурсам с одного домена другим доменам. Он необходим, чтобы браузеры контролировали запросы, отправляемые с одного источника (origin) на другой, и защищали приложения от нежелательного обмена данными.

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

🤔 Вычисляемые свойства, что такое, как использовать?

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

🚩Синтаксис

Вычисляемые свойства в объектных литералах задаются в квадратных скобках [].

let propName = 'name';
let person = {
    [propName]: 'Alice'
};
console.log(person.name); // 'Alice'

🚩Использование вычисляемых свойств

1⃣Динамическое имя свойства на основе переменной

let key = 'age';
let person = {
    name: 'Alice',
    [key]: 25
};

console.log(person.name); // 'Alice'
console.log(person.age);  // 25

2⃣Использование выражений в качестве имен свойств

let i = 0;
let obj = {
    ['prop_' + ++i]: i,
    ['prop_' + ++i]: i,
    ['prop_' + ++i]: i
};

console.log(obj); // { prop_1: 1, prop_2: 2, prop_3: 3 }

3⃣Вложенные вычисляемые свойства

let prefix = 'user';
let index = 1;
let users = {
    [prefix + index]: { name: 'Alice' },
    [prefix + (index + 1)]: { name: 'Bob' }
};

console.log(users.user1.name); // 'Alice'
console.log(users.user2.name); // 'Bob'

4⃣Использование функции для вычисления имен свойств

function createKey(base, index) {
    return base + index;
}

let obj = {
    [createKey('key', 1)]: 'value1',
    [createKey('key', 2)]: 'value2'
};

console.log(obj.key1); // 'value1'
console.log(obj.key2); // 'value2'

🚩Применение в реальных сценариях

🟠Создание объекта с динамическими ключами
Предположим, вам нужно создать объект для хранения оценок студентов, где ключи представляют собой имена студентов, а значения — их оценки.

let studentName1 = 'Alice';
let studentName2 = 'Bob';

let grades = {
    [studentName1]: 85,
    [studentName2]: 92
};

console.log(grades.Alice); // 85
console.log(grades.Bob);   // 92

🟠Использование вычисляемых свойств для формирования запросов
Допустим, у вас есть объект, представляющий параметры фильтра для поиска, и вы хотите динамически создавать ключи на основе выбранных фильтров.

function getFilterKey(filterName) {
    return `filter_${filterName}`;
}

let filters = {};
filters[getFilterKey('age')] = 25;
filters[getFilterKey('location')] = 'New York';

console.log(filters); // { filter_age: 25, filter_location: 'New York' }

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

🤔 Зачем нам нужен менеджер состояния?

Менеджер состояния используется для централизованного управления данными в приложении. Это упрощает обмен данными между компонентами, делает состояние приложения предсказуемым и упрощает отладку. Например, Vuex или Redux помогают управлять состоянием в сложных приложениях.

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

🤔 Отслеживаемые свойства, что такое, как использовать?

В контексте разработки приложений, отслеживаемые свойства (observable properties) относятся к свойствам объектов, изменения которых можно отслеживать. Это полезно для автоматического обновления пользовательского интерфейса или выполнения других действий при изменении данных. В JavaScript для реализации отслеживаемых свойств часто используются библиотеки, такие как MobX, или встроенные механизмы, такие как Proxy.

🚩Использование Proxy для отслеживания свойств

Встроенный объект Proxy в JavaScript позволяет перехватывать и настраивать операции, выполняемые с объектом, такие как чтение и запись свойств.

const handler = {
    get(target, property) {
        console.log(`Getting value of ${property}`);
        return target[property];
    },
    set(target, property, value) {
        console.log(`Setting value of ${property} to ${value}`);
        target[property] = value;
        return true;
    }
};
const person = {
    name: 'Alice',
    age: 25
};
const proxyPerson = new Proxy(person, handler);
proxyPerson.name = 'Bob'; // Setting value of name to Bob
console.log(proxyPerson.name); // Getting value of name // Bob

🚩Использование MobX для отслеживания свойств

Это библиотека для управления состоянием, которая делает состояния наблюдаемыми и автоматически синхронизирует их с пользовательским интерфейсом.

1⃣Установка MobX

npm install mobx mobx-react

2⃣Пример использования MobX

import { observable, autorun } from 'mobx';
import { observer } from 'mobx-react';
import React from 'react';
import ReactDOM from 'react-dom';
const appState = observable({
    count: 0,
    increment() {
        this.count++;
    }
});
autorun(() => {
    console.log(`Count: ${appState.count}`);
});
appState.increment(); // Count: 1
appState.increment(); // Count: 2
const Counter = observer(() => (
    <div>
        <p>Count: {appState.count}</p>
        <button onClick={() => appState.increment()}>Increment</button>
    </div>
));
ReactDOM.render(<Counter />, document.getElementById('root'));

🚩Плюсы отслеживаемых свойств

➕Автоматическое обновление UI
Изменения данных автоматически отражаются в пользовательском интерфейсе.
➕Централизованное управление состоянием
Легче управлять состоянием и следить за его изменениями.
➕Повышенная производительность
При правильной настройке обновляются только те части интерфейса, которые зависят от измененных данных.

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

Простой счетчик с использованием Proxy

const handler = {
    set(target, property, value) {
        console.log(`Setting value of ${property} to ${value}`);
        target[property] = value;
        document.getElementById(property).innerText = value;
        return true;
    }
};
const state = {
    count: 0
};
const proxyState = new Proxy(state, handler);

document.getElementById('increment').addEventListener('click', () => {
    proxyState.count++;
});

<div>
    <p id="count">0</p>
    <button id="increment">Increment</button>
</div>
<script src="path/to/your/script.js"></script>

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

🤔 Расскажи про гибридные приложения?

Гибридные приложения сочетают элементы веб-приложений (HTML, CSS, JavaScript) и платформенно-зависимые компоненты. Они развёртываются как нативные приложения, но используют встроенные браузеры для отображения веб-контента. Такие приложения легче разрабатывать, но их производительность может быть ниже, чем у нативных.

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

🤔 Как отследить изменение поле объекта?

Чтобы отслеживать изменения свойств объекта в JavaScript, можно использовать несколько методов, каждый из которых подходит для различных случаев.

🟠Использование Proxy
Proxy является мощным и гибким способом перехвата и настройки операций с объектами, включая чтение и запись свойств.

const handler = {
    get(target, property) {
        console.log(`Getting value of ${property}`);
        return target[property];
    },
    set(target, property, value) {
        console.log(`Setting value of ${property} to ${value}`);
        target[property] = value;
        return true;
    }
};
const person = {
    name: 'Alice',
    age: 25
};
const proxyPerson = new Proxy(person, handler);
proxyPerson.name = 'Bob'; // Setting value of name to Bob
console.log(proxyPerson.name); // Getting value of name // Bob

🟠Использование Object.defineProperty
Object.defineProperty позволяет определить новое или изменить существующее свойство непосредственно на объекте, позволяя добавить геттеры и сеттеры для отслеживания изменений.

const person = {
    _name: 'Alice',
    _age: 25
};
Object.defineProperty(person, 'name', {
    get() {
        console.log('Getting name');
        return this._name;
    },
    set(value) {
        console.log(`Setting name to ${value}`);
        this._name = value;
    }
});
Object.defineProperty(person, 'age', {
    get() {
        console.log('Getting age');
        return this._age;
    },
    set(value) {
        console.log(`Setting age to ${value}`);
        this._age = value;
    }
});
person.name = 'Bob'; // Setting name to Bob
console.log(person.name); // Getting name // Bob
person.age = 30; // Setting age to 30
console.log(person.age); // Getting age // 30

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

import { observable, autorun } from 'mobx';
const person = observable({
    name: 'Alice',
    age: 25,
    setName(name) {
        this.name = name;
    },
    setAge(age) {
        this.age = age;
    }
});
// Автоматически вызываемая функция при изменении наблюдаемого состояния
autorun(() => {
    console.log(`Name: ${person.name}, Age: ${person.age}`);
});
person.setName('Bob'); // Name: Bob, Age: 25
person.setAge(30); // Name: Bob, Age: 30

🟠Наблюдатель на изменение (MutationObserver)
Для отслеживания изменений в DOM можно использовать MutationObserver. Это не напрямую связано с объектами, но полезно для отслеживания изменений в элементах DOM.

const targetNode = document.getElementById('target');
const config = { attributes: true, childList: true, subtree: true };
const callback = function(mutationsList, observer) {
    for(let mutation of mutationsList) {
        if (mutation.type === 'childList') {
            console.log('A child node has been added or removed.');
        }
        else if (mutation.type === 'attributes') {
            console.log('The ' + mutation.attributeName + ' attribute was modified.');
        }
    }
};
const observer = new MutationObserver(callback);
observer.observe(targetNode, config);
targetNode.setAttribute('data-test', 'value');

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

🤔 Что такое контекст?

Это значение ключевого слова this, которое зависит от способа вызова функции. Он определяет, к какому объекту или окружению функция относится в момент выполнения. Контекст можно изменить с помощью методов call, apply и bind.

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

🤔 Как оптимизировать сайт?

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

🟠Оптимизация изображений
Используйте инструменты для сжатия изображений (например, TinyPNG, ImageOptim) без значительной потери качества. Используйте современные форматы изображений, такие как WebP, которые обеспечивают лучшее сжатие по сравнению с JPEG и PNG. Загружайте изображения по мере их появления в области видимости пользователя (атрибут loading="lazy" в HTML).

🟠Минификация и объединение файлов
Уменьшите размер CSS, JavaScript и HTML-файлов с помощью инструментов, таких как UglifyJS, CSSNano, HTMLMinifier. Сократите количество HTTP-запросов, объединив несколько CSS или JavaScript файлов в один.

🟠Использование CDN (Content Delivery Network)
Храните копии вашего сайта на серверах по всему миру, чтобы уменьшить время загрузки для пользователей из разных регионов.

🟠Кэширование
Настройте заголовки кэширования HTTP, чтобы браузеры могли хранить копии статических ресурсов (CSS, JavaScript, изображения). Используйте технологии, такие как Varnish или Nginx, для кэширования страниц на сервере.

🟠Оптимизация CSS и JavaScript
Используйте атрибуты async и defer для асинхронной загрузки JavaScript, чтобы не блокировать рендеринг страницы. Встраивайте критические стили прямо в HTML, чтобы ускорить начальную отрисовку страницы.

🟠Улучшение производительности сервера
Включите сжатие gzip или Brotli на сервере для уменьшения размера передаваемых данных. Переход на HTTP/2, который поддерживает мультиплексирование запросов, позволяет загружать несколько ресурсов одновременно через одно соединение.

🟠Использование современных технологий
Используйте Service Workers для создания прогрессивных веб-приложений (PWA), обеспечивающих офлайн-работу и улучшенное кэширование. Используйте техники предзагрузки (preload) и предзапросов (prefetch) для ресурсов, которые понадобятся в ближайшее время.

🟠Мониторинг и анализ
Используйте Google Lighthouse, PageSpeed Insights и WebPageTest для анализа производительности и поиска узких мест. Применяйте сервисы, такие как Google Analytics, New Relic, для отслеживания реальной производительности и пользовательского опыта.

<img src="example.jpg" loading="lazy" alt="Пример изображения">

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

🤔 Для чего нужно замыкание?

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

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

🤔 Как значения box-size влияют на размер элемента?

Значения свойства box-sizing в CSS определяют, как учитываются отступы (padding) и рамки (border) при расчете размера элемента (width и height). Это влияет на окончательные размеры и внешний вид элемента на странице.

🚩Значение content-box

Это значение по умолчанию для всех элементов. Когда вы устанавливаете размеры элемента с box-sizing: content-box, ширина и высота элемента включают только содержимое (content), но не включают отступы и рамки.

.element {
    box-sizing: content-box; /* значение по умолчанию */
    width: 200px;
    padding: 20px;
    border: 10px solid black;
}

🚩Расчет размера

🟠Ширина
200px (содержимое) + 20px (отступ слева) + 20px (отступ справа) + 10px (рамка слева) + 10px (рамка справа) = 260px.
🟠Высота
аналогично рассчитывается с учетом отступов и рамок сверху и снизу.

🚩Значение border-box

При использовании значения border-box, размеры элемента (width и height) включают содержимое, отступы и рамки. Это делает расчет размеров более простым и предсказуемым.

.element {
    box-sizing: border-box;
    width: 200px;
    padding: 20px;
    border: 10px solid black;
}

🚩Расчет размера

🟠Ширина
200px уже включает отступы и рамки, то есть фактическая ширина содержимого будет 140px (200px - 20px (отступ слева) - 20px (отступ справа) - 10px (рамка слева) - 10px (рамка справа)).
🟠Высота
аналогично, высота включает отступы и рамки.

🚩Пример для сравнения

HTML

<div class="content-box">Content-box</div>
<div class="border-box">Border-box</div>

CSS

div {
    margin: 10px;
    padding: 20px;
    border: 10px solid black;
}

.content-box {
    box-sizing: content-box;
    width: 200px;
    height: 100px;
}

.border-box {
    box-sizing: border-box;
    width: 200px;
    height: 100px;
}

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

🤔 Что такое async/await?

Это синтаксис для работы с асинхронными операциями в JavaScript, который упрощает управление промисами. Ключевое слово async делает функцию асинхронной, а await приостанавливает её выполнение до завершения промиса. Это позволяет писать асинхронный код, похожий на синхронный.

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

🤔 Сколько есть способов что-то сделать асинхронно?

В JavaScript существует несколько способов выполнения асинхронных операций. Основные из них включают коллбеки (callbacks), промисы (promises) и async/await.

🟠Коллбеки (Callbacks)
Коллбеки были первым способом выполнения асинхронных операций в JavaScript. Это функции, которые передаются другим функциям в качестве аргументов и вызываются после завершения асинхронной операции.

function fetchData(callback) {
  setTimeout(() => {
    const data = "some data";
    callback(data);
  }, 1000);
}

fetchData((result) => {
  console.log(result);
});

Почему это нужно: Коллбеки позволяют выполнять код после завершения асинхронной задачи, например, загрузки данных с сервера. Как используется: Передаем функцию в качестве аргумента и вызываем её, когда данные готовы. Почему так: Это простой способ передать управление после завершения асинхронной операции, но может привести к "аду коллбеков" (callback hell) при множественных вложенных вызовах.

🟠Промисы (Promises)
Промисы были введены для упрощения работы с асинхронным кодом и для решения проблемы вложенности, характерной для коллбеков. Промис представляет собой объект, который может находиться в одном из трёх состояний: ожидание (pending), выполнено (fulfilled) или отклонено (rejected).

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const data = "some data";
      resolve(data);
    }, 1000);
  });
}

fetchData().then((result) => {
  console.log(result);
}).catch((error) => {
  console.error(error);
});

Почему это нужно: Промисы делают код более читаемым и управляемым, особенно при наличии цепочек асинхронных операций. Как используется: Создаем новый промис и возвращаем его из функции. Затем используем методы then и catch для обработки результата или ошибки. Почему так: Промисы позволяют избежать вложенности и обеспечивают более линейный и понятный поток выполнения.

🟠async/await
Это синтаксический сахар поверх промисов, который делает код ещё более читаемым и похожим на синхронный.

async function fetchData() {
  return new Promise((resolve) => {
    setTimeout(() => {
      const data = "some data";
      resolve(data);
    }, 1000);
  });
}

async function main() {
  try {
    const result = await fetchData();
    console.log(result);
  } catch (error) {
    console.error(error);
  }
}

main();

Почему это нужно: async/await упрощает написание и чтение асинхронного кода, устраняя необходимость использования методов then и catch. Как используется: Объявляем функцию с ключевым словом async и используем await для ожидания завершения промиса. Почему так: async/await делает асинхронный код более похожим на синхронный, улучшая его читаемость и поддержку.

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

🤔 Зачем используют Vuex?

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

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