Proper use of const for defining functions

by

There’s no problem with what you’ve done, but you must remember the difference between function declarations and function expressions.

A function declaration, that is:

function doSomething () {}

Is hoisted entirely to the top of the scope (and like let and const they are block scoped as well).

This means that the following will work:

doSomething() // works!
function doSomething() {}

A function expression, that is:

[const | let | var] = function () {} (or () =>

Is the creation of an anonymous function (function () {}) and the creation of a variable, and then the assignment of that anonymous function to that variable.

So the usual rules around variable hoisting within a scope — block-scoped variables (let and const) do not hoist as undefined to the top of their block scope.

This means:

if (true) {
    doSomething() // will fail
    const doSomething = function () {}
}

Will fail since doSomething is not defined. (It will throw a ReferenceError)

If you switch to using var you get your hoisting of the variable, but it will be initialized to undefined so that block of code above will still not work. (This will throw a TypeError since doSomething is not a function at the time you call it)

As far as standard practices go, you should always use the proper tool for the job.

Axel Rauschmayer has a great post on scope and hoisting including es6 semantics: Variables and Scoping in ES6

More Related Contents:

  1. Are variables declared with let or const hoisted?
  2. Why can I change a constant object in javascript
  3. Can you bind ‘this’ in an arrow function?
  4. How does this object method definition work without the “function” keyword?
  5. What is the temporal dead zone?
  6. ES6 destructuring function parameter – naming root object
  7. Keyword ‘const’ does not make the value immutable. What does it mean?
  8. How to extend Function with ES6 classes?
  9. What is “function*” in JavaScript?
  10. Declaring static constants in ES6 classes?
  11. How can I access constants in the lib/constants.js file in Meteor?
  12. ECMAScript 2015: const in for loops
  13. JavaScript ES6: Test for arrow function, built-in function, regular function?
  14. Immediate function using JavaScript ES6 arrow functions
  15. Why can I not use `new` with an arrow function in JavaScript/ES6?
  16. Find all values by specific key in a deep nested object
  17. Why does .then() chained to Promise.resolve() allow const declaration to be reassigned?
  18. Why does `obj.foo = function() { };` not assign the name `foo` to the function?
  19. What do square brackets around a property name in an object literal mean?
  20. Spread Syntax vs Rest Parameter in ES2015 / ES6
  21. Adding console.log to every function automatically
  22. Can I use ES6’s arrow function syntax with generators? (arrow notation)
  23. Destructuring Nested objects in javascript | Destructure second level parent and child Objects
  24. What does calling super() in a React constructor do?
  25. Maps vs Objects in ES6, When to use?
  26. ES6 functions, arrow functions and ‘this’ in an ES6 class [duplicate]
  27. What happens if I call a function with more arguments than it is defined to accept?
  28. Passing parameters to a JQuery function
  29. set withCredentials to the new ES6 built-in HTTP request API : Fetch
  30. How does JavaScript import find the module without an extension?

Leave a Comment