JS: Function parameters binding pattern

What is function parameter binding pattern

it is a syntax for function parameters. It lets you match parameter names to elements in argument object, by pattern matching the structure of array or object.

it works with Arrow Function and function (keyword).

// function definition without using parameter binding pattern
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 binding pattern
function draw_circle_2([x, y], radius) {
 return [x, y, radius];
}

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

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

// arrow function example

const draw_circle_3 = ([x, y], radius) => {
 return [x, y, radius];
};

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

Patterns for matching array

[e_1, e_2, etc]

match array elements.

• extra elements are ignored
• if input has not enough elements, the parameters get values of undefined

// simple parameter binding pattern of array.
const ff = ([x, y]) => [x, y];

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

// extra elements are ignored
console.log(ff([3, 4, 5]));
// [ 3, 4 ]

// if input has not enough elements, the parameters get values of undefined
console.log(ff([3]));
// [ 3, undefined ]

[e_1 , e_2 = value, etc]

with default values. (if argument has less items)

// parameter binding pattern 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

[pattern] = array

with default array if no argument is given.

// Here is parameter binding pattern 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 ]

Example. with default for each slot or no argument

// Here is parameter binding pattern 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 ]

Patterns for matching object property keys

{key_name_1, key_name_2, etc}

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

const xinput = { dog: 3, cat: 4, rabbit: 8 };

// Use object key names as parameter names.
function ff({ cat, dog }) {
 return [cat, dog];
}

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

// extra key in object are ignored

// missing key gets undefined
console.log(ff({ dog: 3}));
// [ undefined, 3 ]

{key_name_1 = value_1, key_name_2 = value_2, etc}

use default for missing keys.

const xinput = { dog: 3, rabbit: 8 };

function ff({ cat = 5, dog }) {
 return [cat, dog];
}

// cat missing. use default value.
console.log(ff(xinput));
// [ 5, 3 ]

{key_name_1: param_name_1, key_name_2: param_name_2, etc}

match keys and set their values to parameters param_name_1, param_name_2.

Patterns for property keys can be quoted like string. 'APOSTROPHE' or "QUOTATION MARK". This makes it easier to read. e.g. { "dog": x, "cat": y } .

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 ]

// patterns for property keys can be quoted like string. 'APOSTROPHE' or "QUOTATION MARK"
// this makes it easier to read.

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

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

{key_name_1: param_name_1 = value_1, key_name_2: param_name_2 = value_2, etc}

use default for missing keys.

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

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

{pattern} = obj

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

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

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

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

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

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

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

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

(new in ECMAScript 2018)

value of rest_param_name is 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 } ]