JS странное поведение массива разрушения

Question

const test = () => {
  const arr = [1, 2]
  console.log("any strings") // focus on this line
  [arr[0], arr[1]] = [arr[1], arr[0]]
}

const test1 = () => {
  const arr = [1, 2]
  console.log("any strings"); // add a semicolon will works or comment this line will works too
  [arr[0], arr[1]] = [arr[1], arr[0]]
}

test() // error

test1() // works

Почему в первом тесте функции выдается ошибка «Невозможно установить свойство« 2 »из неопределенного»?

Answer 1

Проблема здесь не имеет ничего общего с деструктуризацией.В первом фрагменте, поскольку вторая строка после console.log начинается с открывающей скобки, она рассматривает строки как часть одного и того же оператора.

console.log("any strings")[arr[0], arr[1]]

Обратите внимание, что в обозначениях в скобках [arr[0], arr[1]] разрешитсядо [arr[1]] - это оператор запятой.Таким образом, он пытается присвоить свойству [arr[1]] = [2] результат вызова console.log("any strings").Для переводчика он идентичен этому фрагменту:

const test = () => {
    const arr = [1,2]
    console.log("any strings")[arr[0], arr[1]]
      = [arr[1], arr[0]]    
} 

test()

То же, что и:

const test = () => {
    const arr = [1,2]
    console.log("any strings")[arr[1]]
      = [arr[1], arr[0]]    
} 

test()

Конечно, console.log возвращает undefined;у него нет такого свойства [2].Всегда используйте точку с запятой, если сомневаетесь.