Frontend | Вопросы собесов on Telegram: “🤔 Вычисляемые свойства, что такое, как использо…”

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

Это функция в 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' }

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