CODEWITHSUNDEEP
javascriptexpress
cocoPuffs
cocoPuffs

Reputation: 669

What does passing arguments in this way mean?

I'm learning about javascript and I see this block of code that I don't understand:

exports.configure = ({
   expressapp = null,
   userdb = null,
   path = '/myroute'
} = {}) => { 
   // handle routes
};

I'm most confused about the structure of the argument being passed in and what is going on inside there. Where can I find more information about that so I can read about it? What is it even called when you pass arguments like that? Why would you want to do it this way?

Upvotes: 4

Views: 456

Answers (3)

kng
kng

Reputation: 627

You should read this page for more info: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

Basically if we assign 

var [a,b] = [2,3];

it makes sense that we get a=2 and b=3. Think of it as a mirror.

And if we assign 

var {a: x, b: y} = {a: 3, b: 4}

it makes sense that x=3 and y=4 (because the 'a' position on {a: x, b: y} is occupied by x and the 'a' position on {a: 3, b: 4} is occupied by 3, so it would make logical sense to assign 3 to x.)

A) This can be extended to function parameters, where we can have

function myFunc({a:x, b:y}){//do stuff}

and calling myFunc({a: 3, b: 4}) would imply x = 3, y = 4

B) We now ask ourselves why we need to introduce an x and y. Instead we could just have

function myFunc({a:a, b:b}){//do stuff}

and calling myFunc({a: 3, b: 4}) would imply a = 3, b = 4

C) What if we have missing information? Then we could do

function myFunc({a:a = 1, b:b = 2}){// do stuff}

Now calling myFunc({b:4}) would imply a = 1, b = 4.
And calling myFunc({}) would imply a = 1, b = 2.
Because you can think of {} as {a: undefined, b: undefined}

D) What if the entire argument (the entire object) was missing? That's an entirely different thing altogether, and would cause an error. To answer that lets do a simpler example. 

function simple(a=3){//do stuff};

Calling simple() would trigger the default argument, implying a=3

Going back to our more complex function, we can write

function myFunc({a:a = 1, b:b = 2} = {}){// do stuff}

Similarly, calling myFunc() would trigger the default argument, implying 

{a:a = 1, b:b = 2} = {}

and you can think of that as 

{a:a = 1, b:b = 2} = {a: undefined, b: undefined}

which makes 'a' undefined, and 'b' undefined, triggering the default argument, which implies a = 1, b = 2

E) Now we introduce a shorthand where 

var {a:a} = {a:3}

is the same as

var {a} = {a: 3}

Going back to our function, we can see that 

function myFunc({a:a = 1, b:b = 2} = {}){// do stuff}

is equivalent to

function myFunc({a = 1, b = 2} = {}){// do stuff}

This doesn't add any functionality, just cleans things up

Upvotes: 3

guest271314
guest271314

Reputation: 1

The pattern is a destructuring assignment which assigns a plain object as the default parameter, to avoid TypeError if no value is passed to the function.

const exports = {};

exports.configure = ({
   expressapp = null,
   userdb = null,
   path = '/myroute'
}) => { 
   // handle routes
   console.log(expressapp)
};

try {
  exports.configure();
} catch(err) {
  console.error(err)
}

const exports = {};

exports.configure = ({
   expressapp = null,
   userdb = null,
   path = '/myroute'
} = {}) => { 
   // handle routes
   console.log(expressapp)
};

try {
  exports.configure();
} catch(err) {
  console.error(err)
}

Upvotes: 3

takinola
takinola

Reputation: 1773

This is the same as writing 

exports.configure = (argument = {}) => { 
   // handle routes
};

where argument is

{
   expressapp = null,
   userdb = null,
   path = '/myroute'
}

Upvotes: 1

Related Questions