クリックした要素の id を変数に入れる処理の書き方について

Question

質問させてください。
今とあるサイトのコードを見ていたところ下記のような表現がありました。

btn.addEventListener('click', e => {
  const { id: hoge } = e.target;
});

クリックした要素の id を取得して変数に入れる処理だと思うのですが、このような書き方は初めて見まして、
以下でも同じようにできるのになぜこの書き方をしているのか疑問に思い質問させていただきました。これには何か違いがあるのでしょうか…

btn.addEventListener('click', e => {
  const hoge = e.target.id;
});

もし詳しい方がいらっしゃいましたらご教授いただけると助かります。
よろしくお願いいたします。

Answer 1

これには何か違いがあるのでしょうか…

特にありません。ただし、idプロパティをid変数に入れたい場合は、同じプロパティを2回書く必要がなくなります。

const id = e.target.id;
const { id } = e.target;

Comments

[takopo]

ご回答ありがとうございます。
そうなんですね。こういう書き方もあるということが分かり1つ勉強になりました。
ありがとうございました！