CODEWITHSUNDEEP
javascriptecmascript-6keyword-argument
Jesvin Jose
Jesvin Jose

Reputation: 23098

Parameter names with ES6?

I have defined a function like:

function call_api(url, callback, query = {}, body = {})

I expected a syntax where I can provide body and skip query:

call_api('/api/clients/new', function(x){console.log(x)}, body={1:2})

But I have to use this workaround:

call_api('/api/clients/new', function(x){console.log(x)}, {}, {1:2})

Even if I provide body=, it appears its appearing as the query parameter. I use Babel with Webpack. I tried the syntax in Chrome console and in Webpack source.

Is such a syntax supported by ES6? How does it work?

Upvotes: 32

Views: 13443

Answers (4)

Andrew Odri
Andrew Odri

Reputation: 9440

Seeing that the default parameter value is only used when the parameter is undefined, the only way to "skip" a parameter and fall back to the default would be to send undefined in it's place:

call_api('/api/clients/new', function(x){console.log(x)}, undefined, {1:2})

Example: Babel REPL

The value of query within the function will be {} (or whatever you set default to) in this case.

This would be somewhat similar to what Visual Basic does when you want to use the default parameter value by passing an empty value. (e.g. sub name(argument 1, , , argument 4))

Otherwise, if you wanted support for named parameters, the best compromise would be the answer supplied by @Benjamin Gruenbaum.

Update: You might find this article provides an option using the arguments keyword, or better yet, you could iterate over the ES6 ...rest parameters collection to simulate an overloaded function in Javascript.

Upvotes: 1

Benjamin Gruenbaum
Benjamin Gruenbaum

Reputation: 276406

I recommend that you work around this with passing an object and using destructuring for objects:

function callApi({url, callback, query = {}, body = {}})

And then call it as:

callAPI({url: "/api/..", callback: (x => console.log(x)), body: {a:2}})

Which would give you syntax similar to the one you want.

Named arguments have been considered and rejected for JavaScript, unlike other languages like C# and Python which sport them. Here is a recent discussion about it from the language mailing list.

Upvotes: 40

Jonathan
Jonathan

Reputation: 1241

You can't specify which parameter you assign to in your call.

call_api('/api/clients/new', function(x){console.log(x)}, body={1:2})

Is equivalent to setting a variable named body outside of the function and then passing its value in the query parameter's spot.

You could use destructuring to achieve what you want though.

function call_api(url, callback, {query = {}, body = {}} = {})

Then in your call you would do this

call_api('/api/clients/new', function(x){console.log(x)}, {body:{1:2}})

Upvotes: 2

CherryNerd
CherryNerd

Reputation: 1314

As shown on this site, the defaults are just for parameters that need a default value (like an options parameter), but not for 'skipping' parameters.

What you're trying to do is 

// function definition
function hi(a,b,c,d)

// function call
hi(a,b,d)

ES6 is still going to think that your 'd', is the defined c, regardless of your default value.
So no, ES6 does not have such syntax.

Upvotes: 3

Related Questions