Frontend | Вопросы собесов

🤔 Вычисляемые свойства, что такое, как использовать? Это функция в 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' }

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

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

🤔 Что такое экшн, и как изменить состояние? Это объект, который отправляется в хранилище (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;
       }
   };

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

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

🤔 Что такое редьюсер, и какие параметры он принимает? В контексте 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;

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

📌 Как отследить демонтирование функционального компонента? 💬 Спрашивают в 6% собеседований В функциональных компонентах 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;

🤔 Объяснение 1️⃣ Хук `useEffect`:

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

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

- Первый аргумент: Функция, которая выполняется после рендеринга компонента. Если эта функция возвращает другую функцию, она будет вызвана при демонтировании компонента. - Второй аргумент: Массив зависимостей. Если массив пуст, эффект будет выполнен только при монтировании и демонтировании компонента. 🤔 Пример с реальным использованием Рассмотрим пример, где мы используем WebSocket и хотим закрыть соединение при демонтировании компонента.

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;

🤔 Объяснение 1️⃣ Открытие WebSocket соединения:

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

Соединение открывается при монтировании компонента. 2️⃣ Обработка входящих сообщений:

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

Входящие сообщения добавляются в состояние компонента. 3️⃣ Закрытие WebSocket соединения при демонтировании:

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

Соединение закрывается при демонтировании компонента, что предотвращает утечки памяти и другие потенциальные проблемы. 🤔 Итог Для отслеживания демонтирования функционального компонента в React используйте функцию очистки внутри хука useEffect. Это полезно для выполнения операций очистки, таких как закрытие соединений, отмена подписок или освобождение ресурсов. Короче говоря: Используйте хук useEffect с функцией очистки, чтобы отслеживать демонтирование функционального компонента и выполнять необходимые операции очистки. 🔥 ТОП ВОПРОСОВ С СОБЕСОВ 🔒 База собесов | 🔒 База тестовых

🤔 Что такое псевдоэлемент? Псевдоэлемент — это CSS-конструкция, которая позволяет стилизовать определённые части элемента, например, ::before для добавления контента перед элементом или ::after для добавления после. Это удобно для оформления, не изменяя HTML-структуру. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Какие основные реакт хуки знаешь и используешь? 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;

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

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

🤔 В чём отличие между контролируемыми и неконтролируемыми объектами? В 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 в любой момент времени, что делает управление состоянием менее очевидным. Ставь 👍 и забирай 📚 Базу знаний

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

📺 Уникальная база записей IT собеседований 300+ записей реальных собеседований на программиста, тестировщика, аналитика и прочие IT профы. Записи собесов от ведущих компаний: Сбер, Яндекс, ВТБ, Тинькофф, Озон, Wildberries и т.д. 🎯 Переходи по ссылке и присоединяйся к базе, чтобы прокачать свои шансы на успешное трудоустройство! У тебя есть запись собеседования? Мы готовы ее купить и заплатим до 3000 руб. за каждую

Миграция в облако? Это легко! Собственная инфраструктура устарела или не справляется с нагрузками? Используйте облачные ресурсы! Эксперты Yandex Cloud помогут перейти в облако быстро, легко и безопасно. ✅ Мы полностью сопровождаем процесс. ✅ От вас — только инженер с доступом к инфраструктуре. ✅ Архитектура под ваши задачи, миграция и поддержка на каждом шагу — всё включено. ⚡Переходите в Yandex Cloud и забудьте о старом железе. А если успеете подать заявку до 31 декабря, мы покроем расходы на инженеров и тестовую инфраструктуру. Подать заявку #реклама 16+ yandex.cloud О рекламодателе Реклама на Яндексе

🤔 Как отрисовать массив элементов? В 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: 'alice@example.com' },
    { id: 2, name: 'Bob', age: 30, email: 'bob@example.com' },
    { id: 3, name: 'Charlie', age: 35, email: 'charlie@example.com' }
];

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} />
))}   

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

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

Надежная IT-инфраструктура для бизнеса от Selectel. Комплексные IaaS-решения для всех уровней бизнеса. - Выделенные серверы - Облачные серверы - Объектное хранилище - Мобильная ферма - DBaaS и Managed Kubernetes - 1С в облаке Перейти на сайт #реклама 16+ selectel.ru О рекламодателе

🤔 Что делает 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() используется только в компонентах-классах. Ставь 👍 и забирай 📚 Базу знаний

Цены на все Серверы онлайн! Удобный конфигуратор! Серверы STSS Flagman✅ Огромный выбор решений 👍 Консультации лучших экспертов 👌 Непревзойденный сервис ❤️ Получить предложение #реклама stss.ru О рекламодателе

🤔 Как получить свойство объекта? 🟠Доступ через точечную нотацию Точечная нотация является наиболее распространенным способом доступа к свойствам объекта. Она проста и удобна для использования, когда имя свойства известно и является допустимым идентификатором 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
    

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