JavaScript Function Expressions vs Declarations
Tags: javascript, programming, beginners, codenewbie
Published: 2022-03-19 18:01:55

One of the beauties of JavaScript is its flexibility - there is multiple ways to do just about everything.  Working with functions is no exception.  There are two primary ways to write functions in JavaScript - function expressions and function declarations.  I am going to look at both and discussion what I feel are the similarities and differences of each, and why I choose one style over the other.

## Definitions
### Function Expression
A function expression is a type of JavaScript expression that once resolved, assigns its value to a variable. It typically looks like this:
```javascript
const add = function (x, y) {
  return x + y;
}

console.log(add(1, 2));
// expected output: 3
```
or this:
```javascript
const add = (x, y) => {
  return x + y;
}

console.log(add(1, 2));
// expected output: 3
```
The value in the variable is the function and can be called like a function declaration.

### Function Declaration
A function declaration is a JavaScript statement.  It is declared with the `function` keyword, like this:
```javascript
function add (x, y) {
  return x + y;
}

console.log(add(1, 2));
// expected output: 3
```

## Similarities
Both function declarations and function expressions have the same syntax: `name`, `parameter`, and `statements`.
```javascript
// function declaration
function name (parameter, parameter, ...ect) {
  statements
}

// function expression
const variable = function name (parameter, parameter, ...ect) {
  statements
}
```
Both styles of functions are considered higher-order functions.

## Differences
There are some significant differences between the two styles.
### Syntax
Where both styles use the same syntax - `name`, `parameter`, and `statements` - function expressions consider all three to be optional, and function declarations require `name`.  This means that function expressions can be anonymous functions.
### Hoisting
Function declarations are hoisted, and function expressions are not.  This means that you cannot use a function expression before you create it.  The variable that the function expression is assigned to will be hoisted but not the value.  This has to do with how JavaScript parses a file, and a topic for a later post.

## My Preference
In my code I prefer to use function declarations.  There are several reasons for this (all completely subjective):
1. **Readability** - I find function declarations to be easier to read and lead to cleaner code.
2. **Debugging** - I find functions with a name to be easier to debug, and function declarations enforce the naming of functions.
3. **Hoisting** - Since function declarations are hoisted, I can write my procedural logic at the top of my file or module and declare the functions that are used later.  This leads to cleaner, easier to follow code.
4. **Laziness** - Why type `const blah = function` when I can just write `function`.

## Conclusion
Using function expressions versus function declarations is going to be a personal style choice.  Knowing the pros and cons of each style will help you choose which style will work best with the code you are writing.

Until next time!

## Resources
[JavaScript Expressions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#expressions)
[JavaScript Statements](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements)
[JavaScript Function Expression](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/function)
[JavaScript Function Declaration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function)