Как понимать такой синтаксис?

Question

[RafGal]

const { x } = y

const {
        index, 
        axis,  
        value,  
    } = event.detail

Comments

[Rerurk]

Если у обьекта y есть свойство. x то оно присвоится константе x

[Николай]

const {
    index, 
    axis,  
    value,  
} = event.detail;

Здесь из объекта event.detail извлекаются три свойства: index, axis и value. После выполнения этой строки у вас появятся три отдельные переменные (константы) с именами index, axis и value, содержащие соответствующие значения из event.detail.

Без деструктуризации это выглядело бы так:

const index = event.detail.index;
const axis = event.detail.axis;
const value = event.detail.value;

если свойств не будет, то будет
index = undefined

Answer 1

[Михаил Р.]

Деструктуризация, а в вашем случае - это деструктуризация объекта.

Answer 2

[t_kenzhaev]

тоже что и:

const x = y.x

const index = event.detail.index
const axis = event.detail.axis
const value= event.detail.value