[JavaScript]forEachで配列に入ったオブジェクト操作

Question

前提・実現したいこと

某チュートリアル中の疑問を解決したい

発生している問題・エラーメッセージ

配列の中のオブジェクトのusernameプロパティに"!"を全部つけるというのを
forEachを使って解けという問題です。

ソース１がお手本

ソースコードの機能はわかるんですが、ソース１の３行目
let { username }
の使い方がよくわからなくて、自分で書いたソース２との違いが上手くのみこめてません。

該当のソースコード

//　ソース１
// arrayの中にオブジェクトが複数あってそれぞれusernameプロパティを持ってる

let newArray = []
array.forEach(user => {
	let { username } = user;
	console.log(username);
	username = username + "!";
	newArray.push(username);
})
console.log(newArray);

//　ソース２（自分で書いたもの）
let jibunArray = [];
array.forEach(function(ele){
  jibunArray.push(ele.username = ele.username + "!");
})
console.log(m1Array);

試したこと

補足情報（FW/ツールのバージョンなど）

特になし

Comments

[miyabi-sun]

forEachを配列に使う動機は処理なので、すなわち破壊的である事を要求しているように思えますが、
破壊・非破壊は課題の問題文に含まれていますか？

そしてコードの「ソース1」というのは模範解答のコードでしょうか？
模範解答としてはforEachの用途として微妙な気がします。

[tamamo11]

特に指定はありません。
ソース１はチュートリアルの模範解答です。
mapはこの問題の直後に同じ問題ででてきてるのでそんなに使用目的を考えたものではないと思います。

Answer 1

そもそも問題文に対してこの結果は私が想定したものとは違いますが、
これが正解なのでしょうか？

const array = [{username: "taro"}, {username: "jiro"}];

newArray = [];
array.forEach(user => {
  let { username } = user;
  username = username + "!";
  newArray.push(username);
})

console.log(newArray);
// ["taro!", "jiro!"]

上記のコードは非破壊的なコードなので
非破壊で良いのであれば、下記のようにArray.mapを使うのが適切です。

授業の順序をコントロールする為にあえてforEachでやらせているだけなのでしょうか？

const array = [{username: "taro"}, {username: "jiro"}];
const result = array.map(it => `${it.username}!`);

console.log(result);
// ["taro!", "jiro!"]

---

let { username }の使い方

オブジェクトの分割代入というテクニックです。
スプレッド構文やレスト構文と共にモダンなJavaScriptで採用された比較的新しいテクニックです。

これはlet username = user.username;と等価です。
威力で言うと2個以上の変数を一気に定義する時に使うと強力ですね。

// この分割代入は
let {username, age, score} = user;

// この3行と等価！長くなっちゃう！！
let username = user.username;
let age = user.age;
let score = user.score;

Answer 2

分割代入ですね。
オブジェクトの分割代入 | 分割代入 - JavaScript | MDN

let username = user.username;

とだいたい同義です。