JS: Function Argument Destructure (Pattern Matching)

What is Function Argument Destructure

Function Argument Destructure is a syntax for function parameters. It lets you assign object (or array) to parameter names by pattern matching.

// normal code.
const drawCircle1 = (center, radius) => {
 const x = center[0];
 const y = center[1];
 return `circle center is (${x}, ${y}), radius is ${radius}.`;
};

console.log(drawCircle1([3, 4], 2));
// circle center is (3, 4), radius is 2.

// code using destructure
const drawCircle2 = ([x, y], radius) => {
 return `circle center is (${x}, ${y}), radius is ${radius}.`;
};

console.log(drawCircle2([3, 4], 2));
// circle center is (3, 4), radius is 2.

Syntax for object

{a:x, b:y}

• Sample call: f({a:3, b:4}).
• x is 3, y is 4.

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

// extra key in object are ignored
console.log(ff({ b: 3, a: 4, c: 2, d: 8 }));
// [ 4, 3 ]

{a:x=9, b:y}

use default for missing keys.

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

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

/*
hh 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 hh = ({ a: x = 1, b: y = 2 } = { a: 1, b: 2 }) => [x, y];

console.log(hh());
// [ 1, 2 ]

console.log(hh({ b: 3 }));
// [ 1, 3 ]

console.log(hh({ b: 3, c: 4 }));
// [ 1, 3 ]

console.log(hh({ b: 8, a: 9 }));
// [ 9, 8 ]

{a, b}

get values of keys a b, use the key names as variable names.

// Use key names as variable names.
const kk = ({ a, b }) => [a, b];
console.log(kk({ b: 3, a: 4 }));
// [ 4, 3 ]

{x=1, y=2}

use default for missing keys.

// with default values for missing keys

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

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

{x=1, y=2}={x:1, y:2}

also use default for whole object if it's not given.

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

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

console.log(fn());
// [ 1, 2 ]

console.log(fn({ y: 3 }));
// [ 1, 3 ]

console.log(fn({ y: 3, c: 4 }));
// [ 1, 3 ]

console.log(fn({ y: 8, x: 9 }));
// [ 9, 8 ]

{ c, ...restProps }

(new in ECMAScript 2018)

restProps is a object.

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

Destructure works with function defined by keyword function and Arrow Function .

Example: Object Argument

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 ]

Syntax for array

[x, y]

• Sample call f([3,4]).
• x is 3, y is 4.

// simple destructuring of array.
const ff = ([x, y]) => [x, y];
console.log(ff([3, 4]));
// [ 3, 4 ]

[x=8, y=9]

with default for each slot. (if arg has less items)

// destructure of array with default values for each slot.
// hh 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 hh([x = 8, y = 9]) {
 console.log(x, y);
}

hh([3, 4]);
// 3 4

hh([3]);
// 3 9

[x, y] = [8,9]

with default for whole array

// Here is destructure of array with default value for the whole array.

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

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

console.log(fg());
// [ 8, 9 ]

console.log(fg([3]));
// [ 3, undefined ]

console.log(fg([3, 4]));
// [ 3, 4 ]

[x=1, y=2] = [1,2]

with default for each slot or whole array

// Here is destructure of array with default values for each slot and the whole array.

// f3 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 f3 = ([x = 1, y = 2] = [1, 2]) => [x, y];

console.log(f3());
// [ 1, 2 ]

console.log(f3([9]));
// [ 9, 2 ]

console.log(f3([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 ]