JS: Function Argument Destructure (Pattern Matching)

What is Function Argument Destructure

Function Argument Destructure is a syntax for function parameters. It is convenient when you have a parameter that is array, and you want to bind array elements as parameter names. Or, when you have a parameter that is a object, and you want to bind property names as parameter names.

// argument destructure

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

// code using 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 JS: ECMAScript 2018. 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

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 ]

Missing Value Gets Undefined

// if an arg is missing, it gets undefined
const f = ([x, y]) => [x, y];
console.log(f([3]));
// [ 3, undefined ]

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 ]