JS: Function Argument Destructure

What is Function Argument Destructure

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 keyword function and Arrow Function .

Example: Array Argument

Here is 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 is 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 is 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 is 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 ]

Example: Object Argument

Here is 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 is 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 ]