JS: Function Argument Destructure

By Xah Lee. Date: .

New in ES2015.

“destructuring function argument” lets you define function to take array or object argument, assign values of the elements to variables in the function body,in a convenient way.

Function Arguments Destructure, Array to Variables

Here's simple destructuring of array.

// f take 1 array arg. First element is assigned to var x, and second is y
function f ([x,y]) { return x+y; }
let aa = [3,4];
console.log ( f(aa) ); // 7

Here's destructure of array with default values for each element.

// h take 1 array arg. First element is assigned to var x, and second is y. If the arg has length less than 2, they get default values
function h ( [ x=9, y=10]) { console.log ( x, y ); }

h([3,4]); // 3 4
h([3]); // 3 10

// h()
// TypeError: Cannot match against 'undefined' or 'null'.

Here's destructure of array with default value for the whole array.

// h2 take 1 array arg. first element is assigned to var x, and second is y. If no arg, default to [8,9]
function h2 ([x,y] = [8,9]) { console.log ( x, y ); }
h2(); // 8 9
h2([3]); // 3 undefined
h2([3,4]); // 3 4

Here's destructure of array with default values for each element and the whole array.

// h3 take 1 array arg. first element 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

function h3 ([x=1,y=2] = [1,2]) { console.log ( x, y ); }
h3(); // 1 2
h3([9]); // 9 2
h3([9,8]); // 9 8

Function Arguments Destructure, Object to Variables

Here's 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
function g ({a:x, b:y}) { console.log ( x, y ); }
g({b:3, a:4}); // 4 3

You don't have to get all keys in argument.

// g take 1 object arg, and the key name joe and mary are significant. Their values will be used as parameters, named x and y
function g ({joe:x, mary:y}) { console.log ( x, y ); }
g( {john:3, mary:4, joe:7, cat:6 }); // 7 4

Destructure Object with Default Values

// 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. If key “a” is missing, default to 9
function g ({a:x = 9, b:y}) { console.log ( x, y ); }
g({b:3, c:4}); // 9 3

Here covers the case when no argument is passed:

// 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. key a b defaults to 1 2
function g ({a:x = 1, b:y =2} = {a:1, b:2}) { console.log ( x, y ); }
g(); // 1 2
g({b:3}); // 1 3
g({b:3, c:4}); // 1 3
g({b:8, a:9}); // 9 8

Use Key Names as Variable Names

If you want the variable names to have the same names as property keys, there's a syntax shortcut.

// g take 1 object arg, and it should have keys a and b. The value of these keys are assigned to vars a b
function g ({a,b}) { console.log ( a, b ); }
g({b:3, a:4}); // 4 3

Now with default values:

// g take 1 object arg, and it should have keys x and y. The value defaults to 1 2
function g ({x = 1, y =2} = {x:1, y:2}) { console.log ( x, y ); }
g(); // 1 2
g({y:3}); // 1 3
g({y:3, c:4}); // 1 3
g({y:8, x:9}); // 9 8

Here's more complex destructuring example, with 2 object arguments.

// destructuring example, with 2 object arguments

// g takes 2 args, each is a object.
function g ({a,b}, {c = 1, d = 1} = {c:1,d:1}) { return [a, b, c, d]; }

// give all params
console.log(
    g({b:3,a:4}, {c:5,d:6})
); // [ 4, 3, 5, 6 ]

// omit second param, default is {c:1,d:1}
console.log(
    g({b:3,a:4})
); // [ 4, 3, 1, 1 ]

// omit parts of second param. each has default of 1
console.log(
    g({b:3,a:4}, {d:9})
); // [ 4, 3, 1, 9 ]

See also: JS: Destructuring Assignment

Function Topic

  1. JS: Define Function
  2. JS: Arrow Function
  3. JS: Function Parameters
  4. JS: var/function Order
  5. JS: var Name Scope
  6. JS: Function Declaration vs Function Expression
  7. JS: Closure
  8. JS: Functional Programing
  9. JS: Function Call, Apply, Bind
  10. JS: Function Argument Default Value
  11. JS: Function Rest Parameters
  12. JS: Function Argument Destructure

  1. JS: Function Object
  2. JS: Function.prototype
Like what you read? Buy JavaScript in Depth