🤔 Как отслеживать и обрабатывать ошибки в javascript?

🟠Использование try...catch
Оператор try...catch позволяет обрабатывать ошибки, возникающие в блоке try. Если возникает ошибка, выполнение кода переходит к блоку catch.

try {
    // Код, который может вызвать ошибку
    let result = riskyOperation();
    console.log(result);
} catch (error) {
    // Обработка ошибки
    console.error('Произошла ошибка:', error.message);
}

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

function riskyOperation() {
    throw new Error('Что-то пошло не так');
}

try {
    riskyOperation();
} catch (error) {
    console.error('Произошла ошибка:', error.message); // Произошла ошибка: Что-то пошло не так
}

🟠Использование блока finally
Блок finally выполняется после того, как были выполнены блоки try и catch. Он выполняется независимо от того, произошла ли ошибка.

try {
    let result = riskyOperation();
    console.log(result);
} catch (error) {
    console.error('Произошла ошибка:', error.message);
} finally {
    console.log('Этот блок выполнится в любом случае');
}

🟠Обработка ошибок в асинхронных функциях
Для обработки ошибок в асинхронных функциях, использующих async/await, также можно использовать try...catch.

async function fetchData() {
    try {
        let response = await fetch('https://api.example.com/data');
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        let data = await response.json();
        console.log(data);
    } catch (error) {
        console.error('Произошла ошибка при получении данных:', error.message);
    }
}

fetchData();

🟠Использование промисов
При работе с промисами можно использовать методы catch и finally для обработки ошибок.

fetch('https://api.example.com/data')
    .then(response => {
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        return response.json();
    })
    .then(data => {
        console.log(data);
    })
    .catch(error => {
        console.error('Произошла ошибка при получении данных:', error.message);
    })
    .finally(() => {
        console.log('Запрос завершен');
    });

🟠Глобальная обработка ошибок
Для глобальной обработки ошибок можно использовать обработчики событий window.onerror и window.onunhandledrejection. Обработка ошибок выполнения

window.onerror = function(message, source, lineno, colno, error) {
    console.error('Произошла глобальная ошибка:', message);
    return true; // предотвращает вывод ошибки в консоль браузера
};

Обработка неотловленных промисов

window.onunhandledrejection = function(event) {
    console.error('Неотловленный отказ в промисе:', event.reason);
};

🟠Пользовательские ошибки
Можно создавать собственные ошибки с помощью класса Error.

class CustomError extends Error {
    constructor(message) {
        super(message);
        this.name = 'CustomError';
    }
}

try {
    throw new CustomError('Это пользовательская ошибка');
} catch (error) {
    console.error(error.name + ': ' + error.message); // CustomError: Это пользовательская ошибка
}

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

🤔 Что такое Git-flow?

Git-flow — это модель ветвления в Git для управления разработкой, предложенная Винсентом Дриссеном. Она включает основные ветки (`main`, `develop`) и временные ветки (`feature`, `release`, `hotfix`) для разработки, тестирования и исправления ошибок. Git-flow делает процесс разработки структурированным, но может быть избыточным для небольших или быстрых проектов.

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

🤔 Как получить свойство объекта?

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

const person = {
    name: 'Alice',
    age: 25
};

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

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

const person = {
    'first name': 'Alice',
    age: 25
};

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

const propertyName = 'age';
console.log(person[propertyName]); // 25

🟠Деструктуризация объектов
Деструктуризация позволяет извлекать свойства из объекта и присваивать их переменным. Это особенно полезно для извлечения нескольких свойств одновременно.

const person = {
    name: 'Alice',
    age: 25
};

const { name, age } = person;

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

🟠Использование Object.keys, Object.values и Object.entries
Эти методы позволяют получать массивы ключей, значений или пар ключ-значение соответственно.
Object.keys: Возвращает массив ключей объекта.

    const person = {
        name: 'Alice',
        age: 25
    };

    const keys = Object.keys(person);
    console.log(keys); // ['name', 'age']
    

Object.values: Возвращает массив значений объекта.

    const person = {
        name: 'Alice',
        age: 25
    };

    const values = Object.values(person);
    console.log(values); // ['Alice', 25]
    

Object.entries: Возвращает массив пар ключ-значение.

    const person = {
        name: 'Alice',
        age: 25
    };

    const entries = Object.entries(person);
    console.log(entries); // [['name', 'Alice'], ['age', 25]]
    

🟠Проверка наличия свойств
Перед доступом к свойству можно проверить его наличие с помощью оператора in или метода hasOwnProperty.
Оператор in

    const person = {
        name: 'Alice',
        age: 25
    };

    console.log('name' in person); // true
    console.log('gender' in person); // false
    

Метод hasOwnProperty

    const person = {
        name: 'Alice',
        age: 25
    };

    console.log(person.hasOwnProperty('name')); // true
    console.log(person.hasOwnProperty('gender')); // false
    

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

🤔 Что делает setstate()?

Это метод в React, который используется для обновления состояния компонента. Когда состояние компонента изменяется, React запускает процесс обновления (рендеринга) компонента и всех его дочерних компонентов, чтобы отобразить актуальные данные.

🚩Основные концепции

🟠АсинхронностьВызов setState() может быть асинхронным. Это означает, что состояние компонента не обязательно будет обновлено сразу после вызова setState(). Вместо этого, React может сгруппировать несколько вызовов setState() для оптимизации производительности.
🟠Мерджинг состояния
При вызове setState() React сливает (мерджит) новый объект состояния с текущим состоянием. Это позволяет обновлять только те части состояния, которые изменились, без перезаписи всего состояния.

🚩Синтаксис

🟠Первый аргумент
Может быть объектом или функцией. Объект: Новый фрагмент состояния, который нужно объединить с текущим состоянием Функция: Функция, которая принимает текущее состояние и пропсы и возвращает новый фрагмент состояния.

🟠Второй аргумент (необязательный)
Колбэк-функция, которая будет вызвана после того, как состояние обновится и компонент перерисуется.

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

Объект как аргумент

class MyComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            count: 0
        };
    }
    incrementCount = () => {
        this.setState({ count: this.state.count + 1 });
    }
    render() {
        return (
            <div>
                <p>Count: {this.state.count}</p>
                <button onClick={this.incrementCount}>Increment</button>
            </div>
        );
    }
}

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

class MyComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            count: 0
        };
    }
    incrementCount = () => {
        this.setState((prevState, props) => ({
            count: prevState.count + 1
        }));
    }
    render() {
        return (
            <div>
                <p>Count: {this.state.count}</p>
                <button onClick={this.incrementCount}>Increment</button>
            </div>
        );
    }
}

🟠Колбэк-функция
Второй аргумент setState() — это колбэк, который вызывается после того, как состояние было обновлено и компонент перерисован.

class MyComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            count: 0
        };
    }
    incrementCount = () => {
        this.setState({ count: this.state.count + 1 }, () => {
            console.log('Состояние обновлено:', this.state.count);
        });
    }
    render() {
        return (
            <div>
                <p>Count: {this.state.count}</p>
                <button onClick={this.incrementCount}>Increment</button>
            </div>
        );
    }
}

🚩Важные замечания

🟠Не изменяйте состояние напрямую
Изменение состояния напрямую (например, this.state.count = 1) не вызовет перерисовку компонента. Всегда используйте setState().
🟠Batching (группировка)
React может группировать несколько вызовов setState() для повышения производительности. Поэтому состояние может быть обновлено асинхронно.
🟠Компоненты-классы и хуки
В функциональных компонентах для управления состоянием используются хуки, такие как useState. setState() используется только в компонентах-классах.

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

🤔 Что такое семантика в веб-разработке

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

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

🤔 Как отрисовать массив элементов?

В React для отрисовки массива элементов используется метод map(), который позволяет перебрать массив и вернуть JSX для каждого элемента. Это удобный и декларативный способ создания списков элементов.

🚩Пример использования `map()` для отрисовки массива

import React from 'react';

const users = [
    { id: 1, name: 'Alice', age: 25 },
    { id: 2, name: 'Bob', age: 30 },
    { id: 3, name: 'Charlie', age: 35 }
];

const UserList = () => {
    return (
        <div>
            <h1>User List</h1>
            <ul>
                {users.map(user => (
                    <li key={user.id}>
                        {user.name} - {user.age} years old
                    </li>
                ))}
            </ul>
        </div>
    );
};

export default UserList;

1⃣Использование map()

{users.map(user => (
    <li key={user.id}>
        {user.name} - {user.age} years old
    </li>
))}   

2⃣Атрибут key

<li key={user.id}>   

🚩Отрисовка сложных компонентов

Если каждый элемент массива представляет собой более сложный компонент, можно создать отдельный компонент для каждого элемента и использовать его внутри map().

import React from 'react';

const users = [
    { id: 1, name: 'Alice', age: 25, email: '[email protected]' },
    { id: 2, name: 'Bob', age: 30, email: '[email protected]' },
    { id: 3, name: 'Charlie', age: 35, email: '[email protected]' }
];

const UserItem = ({ user }) => {
    return (
        <div className="user-item">
            <h2>{user.name}</h2>
            <p>Age: {user.age}</p>
            <p>Email: {user.email}</p>
        </div>
    );
};

const UserList = () => {
    return (
        <div>
            <h1>User List</h1>
            {users.map(user => (
                <UserItem key={user.id} user={user} />
            ))}
        </div>
    );
};

export default UserList;

1⃣Создание компонента для элемента списка

const UserItem = ({ user }) => {
    return (
        <div className="user-item">
            <h2>{user.name}</h2>
            <p>Age: {user.age}</p>
            <p>Email: {user.email}</p>
        </div>
    );
};   

2⃣Использование компонента внутри map()

{users.map(user => (
    <UserItem key={user.id} user={user} />
))}   

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

🤔 Использование хука useEffect в React

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

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

🤔 В чём отличие между контролируемыми и неконтролируемыми объектами?

В React различают два типа компонентов для обработки пользовательского ввода: контролируемые (controlled) и неконтролируемые (uncontrolled) компоненты. Понимание их различий важно для выбора подходящего способа управления состоянием формы.

🚩Контролируемые компоненты

Контролируемый компонент управляет своим состоянием через React. Это означает, что состояние элемента формы (например, значение текстового поля) хранится в состоянии (state) компонента и обновляется через React.

import React, { useState } from 'react';

const ControlledComponent = () => {
    const [inputValue, setInputValue] = useState('');

    const handleChange = (event) => {
        setInputValue(event.target.value);
    };

    return (
        <div>
            <label>
                Name:
                <input type="text" value={inputValue} onChange={handleChange} />
            </label>
            <p>Current value: {inputValue}</p>
        </div>
    );
};

export default ControlledComponent;

🚩Особенности контролируемых компонентов

🟠Состояние в React
Значение элемента формы хранится в состоянии компонента.
🟠Обработка событий
Все изменения отслеживаются через события (например, onChange) и обновляют состояние компонента.
🟠Односторонний поток данных
Данные идут от состояния компонента к элементу формы, обеспечивая контроль над значением.

🚩Неконтролируемые компоненты

Неконтролируемый компонент управляет своим состоянием через DOM. Значение элемента формы извлекается непосредственно из DOM, а не из состояния компонента.

import React, { useRef } from 'react';

const UncontrolledComponent = () => {
    const inputRef = useRef(null);

    const handleSubmit = (event) => {
        event.preventDefault();
        alert('Submitted value: ' + inputRef.current.value);
    };

    return (
        <form onSubmit={handleSubmit}>
            <label>
                Name:
                <input type="text" ref={inputRef} />
            </label>
            <button type="submit">Submit</button>
        </form>
    );
};

export default UncontrolledComponent;

🚩Особенности неконтролируемых компонентов

🟠Состояние в DOM
Значение элемента формы хранится в самом DOM-элементе.
🟠Использование рефов
Для доступа к значению элемента используется реф (например, через useRef).
🟠Двусторонний поток данных
Данные могут быть извлечены из DOM в любой момент времени, что делает управление состоянием менее очевидным.

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

🤔 Что такое 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) и платформенно-зависимые компоненты. Они развёртываются как нативные приложения, но используют встроенные браузеры для отображения веб-контента. Такие приложения легче разрабатывать, но их производительность может быть ниже, чем у нативных.

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