Destructuring
Destructuring pulls values out of arrays and objects straight into separate variables.
Example
#const student = { name: 'Emma', level: 3, course: 'JavaScript' }
const { name, level } = student
const podium = ['Mia', 'Jack', 'Emma']
const [winner, second] = podium
console.log(name, level)
console.log(winner, second)Definition and usage
#Destructuring is a shorthand form of assignment. Instead of reading user.name and user.level one by one, you write const { name, level } = user and immediately have two variables. For arrays, square brackets pick up elements by position: const [first, second] = list.
For objects, property names matter, not order. You can rename a variable ({ name: userName }), give a default value for when it’s undefined ({ level = 1 }), and reach into nested objects. The ...rest syntax collects the remaining elements or properties.
Destructuring also works in function parameters and in loops. A function that takes a settings object can unpack the fields it needs right away, and for (const [key, value] of Object.entries(obj)) gives you convenient access to key-value pairs.
Syntax
#const [a, b] = array
const [first, , third] = array
const [head, ...rest] = array
const { a, b } = object
const { a: newName, b = defaultValue } = object
const { nested: { c } } = object
function fn({ a, b = 1 }) {}More examples
#const settings = { theme: 'dark', sounds: false, fontSize: 18 }
const { theme: mode, language = 'en', ...others } = settings
console.log(mode, language)
console.log(others)function createUser({ name, role = 'student', active = true }) {
return `${name}: ${role}, active: ${active}`
}
console.log(createUser({ name: 'Jack' }))
console.log(createUser({ name: 'Mia', role: 'mentor', active: false }))let first = 'HTML'
let second = 'CSS'
;[first, second] = [second, first]
console.log(first, second)The leading semicolon protects against merging with the previous statement in code written without semicolons. A line starting with [ could otherwise be read as a continuation of the previous one.
Browser support
#Widely available
Works in all modern browsers, phones included. You can use it without worry.
- Chrome
- Edge
- Firefox
- Safari
Good practices
#- Destructuring
nullorundefinedthrows aTypeError. For an optional argument, give the whole parameter a default value:function fn({ a } = {}). - The default value only applies to
undefined. If a field isnull, the variable getsnull. - Don’t overdo the nesting. Three levels of braces on one line are hard to read, it’s clearer to unpack the data in two steps.
Related entries
#- Spread (...)The spread syntax spreads an array, string, or object out into individual elements: for copying, merging, and passing arguments.
- Object.entries()Returns an array of an object’s [key, value] pairs.
- functionDeclares a named function: a block of code with parameters that you can call any number of times and that can return a result.
- for...ofWalks the successive values of an iterable object: an array, a string, a Map, a Set, and others.
- constDeclares a block-scoped constant. A variable like this can’t be assigned a new value.
- Default parametersValues a function parameter gets when the argument is not passed or is undefined.
Spotted a mistake or missing an example? Write to us.