js strange behavior Array Destructuring

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

Why does the first function test throw error "Cannot set property '2' of undefined"?

If you want to omit semicolons and [let them be automatically inserted](https://stackoverflow.com/q/2846283/1048572) where ever ~~possible~~ needed, you will [need to put one at the *begin*](https://web.archive.org/web/20201206065632/http://inimino.org/~inimino/blog/javascript_semicolons) of every line that starts with `(`, `[`, `/`, `+`, `-` or `\``. — Bergi, Aug 15 '21 at 17:34

CertainPerformance · Accepted Answer · 2018-05-23T06:42:15.893

The issue here doesn't have anything to do with destructuring. In the first snippet, because the second line after console.log begins with an opening bracket, it considers the lines as part of the same statement.

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

Note that in bracket notation, [arr[0], arr[1]] will resolve to [arr[1]] - that's the comma operator. So, it's attempting to assign to the [arr[1]] = [2] property of the result of calling console.log("any strings"). To the interpreter, it's identical to this snippet:

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

test()

Same as:

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

test()

Of course, console.log returns undefined; it has no such property [2]. Always use semicolons when in doubt.

js strange behavior Array Destructuring

1 Answers1