Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 986 of the free egghead.io lessons, plus get JavaScript content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Default Values for Function Parameters in ES6

2:16 JavaScript lesson by

With ECMAscript 6 we get the luxury of default parameters for our functions.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

With ECMAscript 6 we get the luxury of default parameters for our functions.

Avatar
Roman Ganchenko

Is there any specific reason why you are NOT recommending using arrow function new syntax?

In reply to egghead.io
Avatar
Alan

There's no general reason not to use arrow functions. But arrow functions are anonymous functions, so everything that applies to anonymous functions also applies to arrow functions.

You should generally avoid anonymous functions except for very trivial code. Anonymous functions leave less helpful stack traces and it's more difficult to understand their intent.

Additionally arrow functions are always bound to the current this, so they may not actually do what you want. For example, when defining an ES5-style "class" (i.e. constructor function with a prototype property), you explicitly want this to be unbound, so arrow functions won't give you what you want.

In my opinion, arrow functions are useful where-ever you would normally use anonymous functions and either don't care about this or would otherwise use Function.prototype.bind or a local variable.

In reply to Roman Ganchenko
Avatar
Haitao.Huang

I run the code , but there is SyntaxError:

/usr/local/Cellar/node/5.6.0/bin/node --use-strict /Users/huanghaitao/WebstormProjects/es6/default.js
/Users/huanghaitao/WebstormProjects/es6/default.js:5
let receive = (complete = () => console.log("complete")) => complete()
^

SyntaxError: Unexpected token =
at exports.runInThisContext (vm.js:53:16)
at Module.compile (module.js:387:25)
at Object.Module.
extensions..js (module.js:422:10)
at Module.load (module.js:357:32)
at Function.Module._load (module.js:314:12)
at Function.Module.runMain (module.js:447:10)
at startup (node.js:140:18)
at node.js:1001:3

Process finished with exit code 1

the config not right?

Avatar
Mher

you don't have es6 enabled.

In reply to Haitao.Huang
Avatar
Mike

Love the one liner at the end.

Avatar
Venkata

Could you please tell me how you are running app.js in the built in terminal? Thanks

Avatar
Sina

Press the green "play" button, or Shift+F10 ( in case of webStorm)

In reply to Venkata

Default arguments in ES6 allow you to assign some defaults to these guys. If I run this right now you'll see I'll get undefined, undefined because nothing was passed in for greeting or names, so when they get logged out they're both undefined.

function greet(greeting, name){
  console.log(greeting + ", " + name);
}

greet();

If I want his name to at least default to John, if I don't pass anything in, I can get undefined to John. I didn't pass anything in here, but I said the name should at least be John so it logs out the name as John.

If I pass in Hello here, and then run this, you can see I get Hello, John. Hello comes through the greeting, logged out here as Hello and the name still defaults to John, and then is logged out here.

function greet(greeting, name = "John"){
  console.log(greeting + ", " + name);
}

greet("Hello");

If I say Hello, Bill, the default will be overridden and I'll get Bill instead of John, because the default was John, but I said explicitly to say Bill.

function greet(greeting, name = "John"){
  console.log(greeting + ", " + name);
}

greet("Hello", "Bill");

Where this gets a little bit crazier is when you assign a default function to one of the arguments. Right now, complete is undefined, so it will say undefined is not a function when I try to invoke it.

function receive(complete){
  complete();
}

receive();

But, if I pass in a function and say log complete, and I run this, you can see it logs complete out, because it invokes it when it's passed in.

function receive(complete){
  complete();
}

receive(function(){
  console.log("complete");
});

But, I can take this function, I'll cut it out of here and then assign that as the default function and then I'll rerun it and you'll see I still get complete.

function receive(complete = function(){
  console.log("complete");
}){
  complete();
}

receive();

We can make this a little bit shorter using the arrow syntax that I've covered before. If I do that and then get rid of the braces and then bring everything up to the same line, you can see that I can assign a default function, all within that same line, run it again, and I still get complete.

function receive(complete = () => console.log("complete")){
  complete();
}

If you want to go completely crazy with arrow functions, which I don't recommend, you could go let receive and I'll assign it to an arrow function, delete these braces, pull everything up to the same line, and then just invoke it this way. It still runs and this just doesn't look like JavaScript.

let receive = (complete = () => console.log("complete")) => complete();

It's not a JavaScript you'd write, but it's very unfamiliar with the new syntax, with the arrow functions and the default assignments all working on the same line.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?