Почему это работает?

Question

[Андрей Иванов]

Есть метод класса, он меняет состояние important.

onToggleImportant = (id) => {
        this.setState(({todoData}) => {
            return {
                todoData: this.toggleProperty(todoData, id, 'important')
            };
        });
    };

А есть метод который обрабатывает аргументы и возвращает массив

toggleProperty(arr, id, propName) {
        const index = arr.findIndex((el) => el.id === id);
        const oldItem = arr[index];
        const newItem = {...oldItem, [propName]: !oldItem[propName]};
        return [
            ...arr.slice(0, index),
            newItem,
            ...arr.slice(index + 1),
        ];
    }

Я вот не пойму почему работает деструктурирование для массива в

const newItem = {...oldItem, [propName]: !oldItem[propName]};

Comments

[Андрей Иванов]

Или это вообще не деструктурирование, почему в квадратных скобках написано, как это работает ?

[0xD34F]

https://learn.javascript.ru/es-object#vychislyaemy...

Answer 1

[Андрей Охотников]

Это свойство объекта. в JS можно обратиться к свойству либо через точку либо через квадратные скобки. В квадратных скобках используют вычисляемое значение, например если заранее неизвестно к какому свойству будем обращаться - как в вашем случае

Например

const obj = {
value: 1
}

obj.value = 2

obj['value'] = 3

Вот варианты как обратиться и изменить значение

Comments

[Андрей Иванов]

Спасибо !