Understanding JavaScript Function Declarations: 'function' vs 'const'

JavaScript, as a versatile and dynamic language, offers multiple ways to define functions. Among these, 'function' declarations and 'const' function expressions stand out as two common approaches. Understanding the differences between them is crucial for writing efficient and error-free JavaScript code. In this article, we'll explore the nuances of 'function' declarations and 'const' function expressions, their implications, and best practices.

Exploring the Basics
'function' Declarations: These are traditional function definitions that are hoisted within their scope. This means you can call them before they are declared in the code.

'const' Function Expressions: When defining functions using 'const', it creates a function expression. Unlike 'function' declarations, 'const' function expressions are not hoisted and result in an error when called before declaration.

Understanding Hoisting in JavaScript
Hoisting is a JavaScript mechanism where variables and function declarations are moved to the top of their containing scope during compilation.
'function' declarations are hoisted, allowing them to be called before their declaration in the code.
Conversely, 'const' function expressions are not hoisted, and calling them before declaration will result in an error.

Practical Example

Conclusion
Understanding the differences between 'function' declarations and 'const' function expressions enables cleaner, more efficient JavaScript code. By mastering hoisting implications and choosing the right method, developers enhance code reliability and maintainability. Whether leveraging hoisting or constancy, mastering these concepts is essential for JavaScript proficiency.

Comments

[Jon Randy 🎖️]

When defining functions using 'const', it creates a function expression

You can't 'define' a function using const - the act of using const in this way merely assigns the function (defined by the function expression) to the declared variable. You could just as well use let - it would have the same effect...

// assign a function defined in a function expression to a variable - using 'const'
const add1 = function (a, b) { return a+b }

// assign a function defined in a function expression to a variable - using 'let'
let add2 = function (a, b) { return a+b }

console.log(add1(3, 4)) // ❯ 7
console.log(add2(1, 5)) // ❯ 6

A 'function expression' is an expression that has a function as its value. In the examples above, the function expressions are everything following the = in the declaration and subsequent assignment of add1 and add2.

The function keyword can be used both to create a function declaration statement, and also a function expression. If the keyword is used in a position in the code where a statement is invalid, then it will create a function expression. Conversely, if the keyword is used in a position where a statement is valid - it will be interpreted as a function declaration statement. A function declaration statement requires a name for the function. We can see evidence of the 'function' keyword being interpreted as a statement if we try to use it without a name in the console (note the use of 'function statement' in the error):

❯ function (a,b) { return a + b }

Uncaught SyntaxError: function statement requires a name

Now some examples of using the 'function' keyword in both ways:

/* 1. Using the function keyword in a position where statements are allowed - defines
      a function AND assigns it to a variable (must include a name). Function declaration */
function add(a, b) {
  return a + b
}
console.log(add)  // ❯ function add1(a, b)
console.log(typeof add)  // ❯ 'function'


/* 2. Using the function keyword in a position where a statement is invalid - defines a
      function in an expression (name is optional) - without assigning it */

// without name
console.log(function(a,b) { return a+b })  // ❯ function (a, b)
console.log(typeof function(a,b) { return a+b })  // ❯ 'function'

// with name
console.log(function add(a,b) { return a+b })  // ❯ function add(a, b)
console.log(typeof function add(a,b) { return a+b })  // ❯ 'function'
// the function is not assigned to any variable
console.log(add)  // ❯ undefined

[Moyomade]

Thank you for sharing Jon!