JavaScript: Function Argument Destructure

By Xah Lee. Date: . Last updated: .

New in JS2015.

Function Argument Destructure is a convenient syntax that lets you easily extract elements of array argument or properties of a object argument, and bind those element to function's parameter. Example:

// before, without arg destructure
const drawCircle1 = ((center, radius) => {
  const x = center[0];
  const y = center[1];
  console.log("center is", x, y);
});

// after, with arg destructure
const drawCircle2 = (([x, y], radius) => {
  console.log("center is", x, y);
});

Syntax

f([x,y]){body}
Sample call f([3,4]). x is 3, y is 4.
f([x=8, y=9]){body}
with default for each slot. (if arg has less items)
f([x,y] = [8,9]){body}
with default for whole array
f([x=1,y=2] = [1,2]){body}
with default for each slot or whole array
f({a:x, b:y}){body}
Sample call: f({a:3, b:4}). x is 3, y is 4.
f({a:x=9, b:y}){body}
use default for missing keys.
f({a,b}){body}
get values of keys a b, use the same names as variables.
f({x=1, y=2}){body}
use default for missing keys.
f({x=1, y=2}={x:1, y:2}){body}
also use default for whole object if it's not given.
f({ c, ...restProps }){body}
New in JS2018. restProps is a object.

Destructure works with function defined by function (params){body} and Arrow Function .

Array Argument Examples

Here's simple destructuring of array.

// f take 1 array arg. First slot is assigned to var x, and second is y

const f = (([x,y]) => x+y);

console.log( f([3,4]) === 7); // true

Here's destructure of array with default values for each slot.

// h take 1 array arg. First slot is assigned to var x, and second is y. If the arg has length less than 2, they get default values
function h([x = 8, y = 9]) {
  console.log(x, y);
}

h([3, 4]); // 3 4
h([3]); // 3 9

Here's destructure of array with default value for the whole array.

// h2 take 1 array arg. first slot is assigned to var x, and second is y. If no arg, default to [8,9]

const h2 = (([x, y] = [8, 9]) => [x, y]);

console.log(h2()); // [ 8, 9 ]
console.log(h2([3])); // [ 3, undefined ]
console.log(h2([3, 4])); // [ 3, 4 ]

Here's destructure of array with default values for each slot and the whole array.

// h3 take 1 array arg. first slot is assigned to var x, and second is y. If the arg is not given, or If array length less than 2, they get default values 1, 2

const h3 = (([x = 1, y = 2] = [1, 2]) => [x, y]);

console.log(h3());// [ 1, 2 ]
console.log(h3([9]));// [ 9, 2 ]
console.log(h3([9, 8]));// [ 9, 8 ]

Object Argument Examples

Here's simple destructuring of object:

// g take 1 object arg, and it should have keys a and b. The value of these keys are assigned to vars x and y as param names
const g = (({ a: x, b: y }) => [x, y]);

console.log(g({ b: 3, a: 4 }));// [ 4, 3 ]

You don't have to get all keys in argument:

const g2 = (({ joe: x, mary: y }) => [x, y]);

console.log(g2({ john: 3, mary: 4, joe: 7, cat: 6 })); // [ 7, 4 ]

Give default values for missing keys:

const g3 = (({ a: x = 9, b: y }) => [x, y]);
console.log(g3({ b: 3, c: 4 })); // [ 9, 3 ]

Give default values for missing keys, and also a default object if no argument is passed at all.

// g4 take 1 object arg, and it should have keys a and b. The value of these keys are assigned to vars x and y as param names. key a b defaults to 1 2

const g4 = (({ a: x = 1, b: y = 2 } = { a: 1, b: 2 }) => [x, y]);

console.log(g4()); // [ 1, 2 ]
console.log(g4({ b: 3 })); // [ 1, 3 ]
console.log(g4({ b: 3, c: 4 })); // [ 1, 3 ]
console.log(g4({ b: 8, a: 9 })); // [ 9, 8 ]

Use key names as variable names:

const g = (({ a, b }) => [a, b]);
console.log(g({ b: 3, a: 4 })); // [ 4, 3 ]

Now with default values for missing keys:

const g2 = (({ x = 1, y = 2 }) => [x, y]);

console.log(g2({ y: 3 }));// [ 1, 3 ]
console.log(g2({ y: 3, c: 4 }));// [ 1, 3 ]
console.log(g2({ y: 8, x: 9 }));// [ 9, 8 ]

With default values for missing keys, and also provide default if no argument is given:

const g3 = (({ x = 1, y = 2 } = { x: 1, y: 2 }) => [x, y]);

console.log(g3()); // [ 1, 2 ]
console.log(g3({ y: 3 })); // [ 1, 3 ]
console.log(g3({ y: 3, c: 4 })); // [ 1, 3 ]
console.log(g3({ y: 8, x: 9 })); // [ 9, 8 ]

Capture rest properties:

const ff = (({ c, ...restProps }) => [c, restProps]);
console.log(ff({ a: 1, b: 2, c: 3 })); // [ 3, { a: 1, b: 2 } ]

Here's more complex destructuring example, with 2 object arguments.

// destructuring example, with 2 object arguments

// gx takes 2 args, each is a object.

const gx = (({ a, b }, { c = 1, d = 1 } = { c: 1, d: 1 }) => [a, b, c, d]);

// give all params
console.log(
  gx({ b: 3, a: 4 }, { c: 5, d: 6 }),
); // [ 4, 3, 5, 6 ]

// omit second param, default is {c:1,d:1}
console.log(
  gx({ b: 3, a: 4 }),
); // [ 4, 3, 1, 1 ]

// omit parts of second param. each has default of 1
console.log(
  gx({ b: 3, a: 4 }, { d: 9 }),
); // [ 4, 3, 1, 9 ]

See also: Destructuring Assignment

JavaScript Function

βˆ‘ JS in Depth
XAH Β BUY NOW

JS in Depth

JS Obj Ref

DOM


JS in Depth

Basic Syntax

Value Types

Variable

String

Function

Property

Object and Inheritance

Array

Constructor/Class

Iterable 🌟

Misc