Что в JS означает const { username, password } = this?

Question

[Алексей]

Встретил вот такую конструкцию:

...
methods: {
 login: function () {
   const { username, password } = this
   myLoginRoutine({ username, password }).then(() => {
     this.$router.push('/')
   })
 }
}
...

Собственно, что означает
const { username, password } = this?
В JS не силён, и не нашёл в доках.

Answer 1

[Тигран Абрамян]

Деструктуризация

Comments

[Алексей]

Спасибо, нашёл в доках. Только не пойму теперь, как это работает в указанном коде? Переменным username и password присваивается значение this, т.е. значение текущего объекта (в данном случае это экземпляр Vue)? И зачем это, если далее вызывается myLoginRoutine с параметрами username и password? Т.е. выходит, это аналогично вызову
myLoginRoutine({ this, this }).then... ?
Не понимаю, в чём смысл.

[WapSter]

Алексей, нет. Это означает, что у this есть свойства username и password. Сразу создаются две переменный со значениями этих свойств. Аналогичная запись

const username = this.username
const password = this.password

[Алексей]

Спасибо, добрый человек!
Вот за что недолюбливаю JS, так вот за эту неочевидность в формулировках. Сам бы в жизни не догадался. Ещё бы найти, где про это в доках написано)

[be_a_man]

Алексей, так вам же в этом ответе скинули доки

[Алексей]

be_a_man, да, нашёл уже, спасибо!

Answer 2

[Ростислав]

Это деструктуризация. Прежде чем лезть во фреймворки, изучите js.