Javascript などで、() や {} がたくさんあってよくわからなくなったら

Unexpected token

Javascript を書いていると、よくこんなコードにお目にかかります。

someArray.map((item, index) => {
  console.log(item)
  console.log(index)
});

この手の処理はよく書くので、いずれ苦もなく使えるようになるでしょう。
ただ、初学者のうちはきっと「=> ってなんだ？」「最後の閉じ括弧 }) ってどこと対応してるの？」と思うことが多いのではないでしょうか。

私も Javascript を始めたての頃は、よく「Unexpected token」のエラーが出て、括弧の数を数えていました。

() や {} が多くてよくわからなくなったら、分解して一つずつ理解していきましょう

上記の処理でいうと、まずは一番外側の関数 map() に注目しましょう。
一番外側なので、閉じ括弧は一番最後です。
その内側の処理をまるごと x と置き換えてみます。

someArray.map(x);

こうすると何をしているかは一目瞭然ですね。
最初のコードは単なる関数 map() の呼び出しで、引数に x を渡しています。

では、つぎは x で置き換えた部分の処理だけ抽出してみます。

(item, index) => {
  console.log(item)
  console.log(index)
}

これは、アロー関数という書き方で、通常の function を使った書き方より簡潔に書くことができます。

function (){}

() => {}

最初の丸括弧には（あれば）引数を、次の波括弧には具体的な処理を書きます。

function (param){ someProcess }

(param) => { someProcess }

この抽出したコードの処理は、引数に item と index をとり、その値を console.log() で出力している、ということになりますね。
以下に再掲します。

(item, index) => {
  console.log(item)
  console.log(index)
}

部分的に理解できたら戻してみましょう

someArray.map((item, index) => {
  console.log(item)
  console.log(index)
});

関数 map() は配列の各要素に対して、引数で渡された関数を実行します。
その関数の引数には配列の各要素が渡されてきます。
ちなみに、第二引数には現在処理中のインデックス番号が渡されてきます。

Array.prototype.map() - JavaScript | MDN

複雑な処理に出会っても、ひるまない

一番大事なのは、目の前に複雑な処理が立ちはだかってもひるまないことだと思います。
よくわからない処理があっても急がず焦らず一つずつ理解していけば、必ず問題は解けます。