JS: Function parameters pattern matching (destructure)

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.

it works with Arrow Function and function (keyword).

// function definition without parameter pattern matching
function draw_circle_1(center, radius) {
 const x = center[0];
 const y = center[1];
 return [x, y, radius];
}

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

// s------------------------------

// function definition with parameter pattern matching
function draw_circle_2([x, y], radius) {
 return [x, y, radius];
}

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

Patterns for matching object

{key_name_1, key_name_2, etc}

get values of keys key_name_1, key_name_2, use the key names as parameter names.

// Use key names as variable names.

function ff({ a, b }) {
 return [a, b];
}

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

{key_name_1=value_1, key_name_2=value_2, etc}

use default for missing keys.

// with default values for missing keys

function ff({ x = 1, y = 2 }) {
 return [x, y];
}

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

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

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

{key_name_1:param_name1, key_name_2:param_name2, etc}

match keys and set their values to parameters param_name2, param_name2.

function ff({ dog: x, cat: y }) {
 return [x, y];
}

console.log(
 ff({ cat: 3, dog: 4 }),
);
// [ 4, 3 ]

// extra key in object are ignored
console.log(
 ff({ cat: 3, dog: 4, rat: 2, bat: 8 }),
);
// [ 4, 3 ]

{key_name_1:param_name1=value_1, key_name_2:param_name1=value_2, etc}

use default for missing keys.

function ff({ a: x = 9, b: y }) {
 return [x, y];
}

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

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

// ff 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

function ff({ a: x = 1, b: y = 2 } = { a: 1, b: 2 }) {
 return [x, y];
}

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

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

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

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

{key_name_1=value_1, key_name_2=value_2}=obj

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

function ff({ x = 1, y = 2 } = { x: 100, y: 2 }) {
 return [x, y];
}

console.log(ff());
// [ 100, 2 ]

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

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

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

{ key_name_1, key_name_2, etc, ...rest_param_name }

(new in ECMAScript 2018)

rest_param_name is received as an object.

// Capture rest properties

function ff({ bird, ...restProps }) {
 return [bird, restProps];
}
console.log(ff({ cat: 1, dog: 2, bird: 3 }));
// [ 3, { cat: 1, dog: 2 } ]

Example: object argument

Here is more complex parameter pattern matching example, with 2 object arguments.

// destructuring example, with 2 object arguments

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

function gx({ a, b }, { c = 1, d = 1 } = { c: 1, d: 1 }) {
 return [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 ]

Patterns for matching 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 ]