Start with a working example
Destructuring is a way to assign parts of an array or object to variables. To try the examples here, use a text editor and Node.js 18 or later. Put an example in a file named practice.js, then run node practice.js in a terminal. No packages or browser setup are needed.
Consider const colors = ["red", "green", "blue"]; followed by const [first, second] = colors; and console.log(first, second);. The output is red green. The brackets on the left do not create a new array. Instead, they tell JavaScript to take values from the array on the right and assign them to two new variables. The original colors array is unchanged.
Array destructuring follows position
For arrays, the order of the variable names matters because each name receives a value at the matching position. With const sizes = ["small", "medium", "large"];, the statement const [smallest, middle] = sizes; assigns "small" to smallest and "medium" to middle. The third value remains in the array; it simply is not assigned to a variable by that statement.
You can skip a position with an empty slot: const [firstSize, , lastSize] = sizes; assigns "small" and "large". Use this sparingly, since several commas can be hard to read. If you need the remaining values, the rest syntax collects them into a new array: const [firstSize, ...otherSizes] = sizes;. Here otherSizes is ["medium", "large"]. The three dots must come before the final variable in the pattern.
If the array has fewer values than the pattern asks for, an unmatched variable receives undefined. For example, const [a, b] = [10]; gives a the value 10 and b the value undefined. This does not add an item to the source array. It is a useful distinction when you are checking whether an input contains enough values.
Object destructuring follows property names
Objects work differently: the property name, not its position, determines the value. Given const user = { name: "Ari", role: "editor" };, write const { role, name } = user;. The variables role and name receive "editor" and "Ari", even though the pattern lists them in a different order. This makes object destructuring useful when you need only a few fields from an object.
Sometimes you want a variable name that differs from the property name. Write const { name: displayName } = user;. This reads the name property and creates a variable called displayName; it does not create a variable called name. The colon can look like an object property declaration, so read it as “property name, then local variable name” when it appears inside a destructuring pattern.
A missing property also produces undefined. If you write const { nickname } = user; and then log nickname, the output is undefined because user has no nickname property. Destructuring reads values; it does not fill in missing properties or change the object.
Use defaults deliberately and check your assumptions
A default provides a value when the value being assigned is undefined. For example, const { theme = "light" } = { name: "Ari" }; assigns "light" to theme. The same pattern works with arrays: const [choice = "none"] = []; assigns "none" to choice. A default does not replace null, false, 0, or an empty string. If those values need special treatment, decide on that behavior separately rather than assuming the default will handle it.
Defaults and renaming can be combined: const { name: displayName = "Guest" } = { role: "reader" }; creates displayName with the value "Guest". Start with a short pattern like this before destructuring a larger object. If the result surprises you, log the original value and each new variable. Check array positions for array patterns and exact property names for object patterns.
Destructuring is most helpful when it makes the values you need obvious at a glance. If a pattern has many skipped positions, renamed properties, and defaults, a few separate assignments may be easier to understand. Both styles can be correct; choose the one that helps the next reader see where each value comes from.
