Besoin d'éclairage sur la syntaxe d'une fonction

Bonjour,

J'ai un grid avec 42 case et cette fonction me permet de rendre chaque case cliquable.
J'ai suivis un tutoriel pour la réaliser, cependant il y a 1 point que je ne comprend sur la syntaxe.
Pourquoi on ouvre la fonction avec une parenthese ?

J'ai fait une version plus optimisé du même code donc c'est mieux.
Mais j'aurai bien aimé savoir d'ou viens cette syntaxe. Une ancienne version de JavaScript peut etre ?

Merci

for (var i = 0, len = squares.length; i < len; i++)

    (function(index){
        //ajoute un onClick pour chaque case du grid
        squares[i].onclick = function(){
            //Fonction pour ajouter un jeton en verifiant si la case en dessous de la case cliqué contient deja un jeton, et si la case cliqué ne contient pas de jeton.  
            if (squares[index + 7].classList.contains('taken') &&!squares[index].classList.contains('taken')) {
                if (currentPlayer === 1) {
                  squares[index].classList.add('taken')
                  squares[index].classList.add('player-one')
                  //Change de joueur
                  currentPlayer = 2
                  displayCurrentPlayer.innerHTML = currentPlayer
                } else if (currentPlayer == 2){
                  squares[index].classList.add('taken')
                  squares[index].classList.add('player-two')
                  //Change de joueur
                  currentPlayer = 1
                  displayCurrentPlayer.innerHTML = currentPlayer        
                } 

              }  
              //Créer une alerte si le jouer place le jeton dans un endroit sans jetons en dessous
              else alert('Vous ne pouvez pas jouer ici vous devez recommencer')
            } 
    })(i)

//!!!! Version Optimiser du meme code !!!!
  for (let i = 0; i < squares.length; i++) {
    squares[i].onclick = () => {

      if (squares[i + 7].classList.contains('taken') &&!squares[i].classList.contains('taken')) {
        if (currentPlayer == 1) {
          squares[i].classList.add('taken')
          squares[i].classList.add('player-one')
          currentPlayer = 2
          displayCurrentPlayer.innerHTML = currentPlayer
        } else if (currentPlayer == 2){
          squares[i].classList.add('taken')
          squares[i].classList.add('player-two')
          currentPlayer = 1
          displayCurrentPlayer.innerHTML = currentPlayer        
        } 
      } else alert('cant go here')
      checkBoard()
    }
  }