JavaScript ES6 – Why Use `const foo = () => {}` Instead of `function foo() {}`

es6functionsjavascript

Edit added 2+ years later

I "checked" the @dandavis answer because it answers my original question, giving reasons to prefer const foo. However, I am completely convinced by the @Wayne Bloss answer that function foo() is generally superior.

Original Question here

For example, in this Redux video, the instructor always uses syntax like

const counter = (state=0, action) => {
   ... function body here
}

where I would just use the "traditional"

function counter(state=0, action) {
   ... function body here
}

Which is actually shorter and, IMO, clearer. It's easier to scan the fairly even and structured left edge of the page for the word "function" than scan the raggedy right edge for a small "=>".

Other than this, and trying to be objective, not opinion, is there some useful difference or advantage to the newfangled syntax?

Best Answer

Function statements (named functions, 2nd syntax shown) are hoisted to the top of the full lexical scope, even those behind arbitrary and control blocks, like if statements. Using const (like let) to declare a variable gives it block scope, stops the full hoisting (hoisting to mere block), and ensures it cannot be re-declared.

When concatenating scripts together, or some using other package-building tools, function hoisting can break conflicting scripts in ways that are difficult to debug as it fails silently. A re-declared const will throw an exception before the program can run, so it's much easier to debug.

Related Solutions

JavaScript Functions – Function Declaration as Var vs Function

var foo = function() {} defines a variable that references an anonymous function.

function foo() {} defines a named function foo.

Either can be passed by name as function parameters and either can be instantiated if the intended use is for OOP.

At the end of the day, which one you use is largely dictated by your specific use-case (Javascript is fun like that ;)). If you end up using the former, I would strongly suggest that you name the function:

var foo = function MY_function() {}. This naming convention helps your debugger callstack not be useless.

JavaScript – Why Use JSON.stringify Instead of JSON.serialize?

Take a closer look at the two comments you've put onto the question:

I suppose after re-reading my question, I'm seeing that in my C# example, I'm serializing the XML and THEN converting the serialized object ToString();. There inlies the rub.

and

I guess for continuity, it would be better (for me) to have a method that looks like this... JSON.serialize(obj).toString(); or jsonObject().toString();... this way it would look much like my C#... but now I'm over complicating it.

Now remember that in Javascript, an object is a hash (rather, if using Prototype or another framework, it should be qualified as a "special kind of hash" - but the simple form works for this example):

var obj = {
   foo: 1,
   bar: function() { console.log(this.foo); }
}
obj.foo; // 1
obj.bar; // function reference
obj.bar(); // function call
obj['foo']; // 1
obj['bar']; // function reference
obj['bar'](); // function call

The only reason a serialize() might be necessary in Javascript is to cut out the functions, references to other objects, etc.

So, to go back to your C# example - we've just cut out .Serialize() as unnecessary. An object is a hash, it's already serialized, further "serialization" would have to be done manually in your own code anyway. All that leaves you is .ToString().

Does .stringify() make more sense now?

Best Answer

Related Solutions

JavaScript Functions – Function Declaration as Var vs Function

JavaScript – Why Use JSON.stringify Instead of JSON.serialize?

Related Topic