ES6 Array destructuring weirdness

by

As others have said, you’re missing semicolons. But…

Can anyone explain?

There are no semicolons automatically inserted between your lines to separate the “two” statements, because it is valid as a single statement. It is parsed (and evaluated) as

let a = undefined, b = undefined, c = undefined;
[a, b] = (['A', 'B']
[(b, c)] = ['BB', 'C']);
console.log(`a=${a} b=${b} c=${c}`);

wherein

  • [a, b] = …; is a destructuring assignment as expected
  • (… = ['BB', 'C']) is an assignment expression assigning the array to the left hand side, and evaluating to the array
  • ['A', 'B'][…] is a property reference on an array literal
  • (b, c) is using the comma operator, evaluating to c (which is undefined)

If you want to omit semicolons and let them be automatically inserted where ever possible needed, you will need to put one at the start of every line that begins with (, [, /, +, - or `.

More Related Contents:

  1. What’s the meaning of “=>” (an arrow formed from equals & greater than) in JavaScript?
  2. What is destructuring assignment and its uses?
  3. Arrow function without curly braces
  4. ES6 class variable alternatives
  5. What do square brackets around a property name in an object literal mean?
  6. What are the differences (if any) between ES6 arrow functions and functions bound with Function.prototype.bind?
  7. How do I destructure all properties into the current scope/closure in ES2015?
  8. How can I mock an ES6 module import using Jest?
  9. What do curly braces inside of function parameter lists do in es6?
  10. Fulfill (don’t resolve) promise with another promise
  11. ES6 modules in local files – The server responded with a non-JavaScript MIME type
  12. What is the difference between using constructor vs state = {} to declare state in react component?
  13. What does @@ (“at at”) mean in ES6 JavaScript?
  14. Javascript ES6 export const vs export let
  15. Can I use ES6’s arrow function syntax with generators? (arrow notation)
  16. Arrow functions and the use of parentheses () or {} or ({})
  17. ES6 tagged templates practical usability
  18. Destructuring Nested objects in javascript | Destructure second level parent and child Objects
  19. What does calling super() in a React constructor do?
  20. How to use javascript proxy for nested objects
  21. ES6 functions, arrow functions and ‘this’ in an ES6 class [duplicate]
  22. How to call another function within the same object?
  23. What is the best general practice to timeout a function in promise [closed]
  24. Wrap long template literal line to multiline without creating a new line in the string
  25. Declare a class property outside of a class method
  26. Importing javascript file for use within vue component
  27. React cannot read property map of undefined
  28. What is the technical definition of a Javascript iterable and how do you test for it?
  29. ECMA6 generators: yield promise
  30. ES6 – declare a prototype method on a class with an import statement

Leave a Comment