ES6+beginner
Array Destructuring
Unpacking values from arrays into individual variables by position, including skipping elements, defaults, and swapping variables.
Array destructuring unpacks values out of an array (or any iterable) into individual variables based on position, in contrast to object destructuring's key-based matching. It shows up constantly in real code, especially for functions returning multiple values, like useState in React.
Array destructuring is like handing out lottery tickets in the order people are standing in line — position is all that matters, and you can wave someone through without a ticket (skipping an element) if you want.
Key Concepts
1
Basic array destructuring assigns values purely by position — unlike object destructuring, names have no special meaning, only order matters. Elements can be skipped by leaving a gap in the pattern, and default values apply only when the corresponding position is undefined.
2
A classic use is swapping two variables without a temporary variable: [a, b] = [b, a] works because the right-hand side array literal is fully evaluated first. Rest elements work identically to object destructuring's rest pattern, but by position.
3
Because array destructuring works on any iterable, it's the mechanism behind for (const [key, value] of Object.entries(obj)) and unpacking Map iteration results directly into named variables.