⭐destructuring assignment

JS ⟩ operator ⟩ assignment ⟩ destructuring

⭐️ ES6 (2015)

in a destructuring assignment,

right-hand side： an array / object (a “structured” value)
left-hand side： specifies one or more variable names using a syntax that mimics array / object literal syntax.

// destructuring assignment
let {a} = {a: 1, b: 2};
let [a, b=0, , ...rest] = iterable;

// ⭐ array destructuring
let [
    a,
    b = 0,                   // default value
    ,                        // ignore element
    ...rest                  // rest elements as an "array"
] = array

// ⭐ object destructuring
let {
    a,
    b = 0,                    // default value
    c: newPropName,           // new variable name
    ...rest                   // rest properties as an "object"
} = object

// ⭐ smart function parameters
function f(a, b, {
    c,
    d: newPropName = 0,       // new parameter name (with default value)
    ...rest
} = {}){ 
    // do something with: a, b, c, newPropName, rest
}

Previousassignment Nextdestructuring array

Last updated 3 years ago

Was this helpful?