Function Expressions & Declarations
Tags: beginners
Published: 2020-07-18 22:00:49

There are subtle differences between function declarations and expressions which are rarely understood by JavaScript beginners. This article will review their differences and suggest when to use each. First, an example of each:

#### Function declaration:
```javascript
function helloWorld() {
  console.log('Hello world!');
}
```
#### Function expression:
```javascript
var helloWorld = function() {
   console.log('Hello world!');
};
```
### Function declarations
First, we'll review the simpler/more straightforward of the two options: function declarations. They resemble function definitions in other languages. Declarations start with the `function` keyword, followed by the required function name (in the above, `helloWorld`), and the function body.

Declarations are ideal when writing a function that will be called throughout the global scope of the program. One handy feature of function declaration is that declared functions are "hoisted", meaning that the definition is moved to the top of the program scope before the program is executed. This essentially means that the function can be called above its own declaration. For example:
```javascript
helloWorldDeclared(); // => Hello world!
helloWorldExpressed(); // => TypeError: helloWorldExpressed is not a function

var helloWorldExpressed = function() {
   console.log('Hello world!');
};

function helloWorldDeclared() {
  console.log('Hello world!');
}
```

### Function expressions
While neither expressions nor declarations are better, function expressions do offer more possibilities. Here are some cases where expressions come in handy:
#### Conditional function creation
Conditionally declared functions are not consistently implemented across browsers, so for production-quality code, expressions are better.
#### Immediately invoked function expressions (IIFEs)
IIFEs are primarily used because they allow for private member variables. As the name implies, IIFEs are expressions which are invoked upon definition. By defining functions within IIFEs, we can create variables which are no longer accessible in the outer function scope. For example:
```javascript
var HelloWorld = (function() {
    var greetee = "world";

    var HelloWorldInner = function() {
        this.getGreetee = function() {
            return greetee;
        };

        this.setGreetee = function(value) {
            name = greetee;    
        };    
    };

    return HelloWorldInner;
})();
var hw = new HelloWorld();
hw.greetee = "Max";
hw.getGreetee(); // => world
```
#### Callback functions
While functions defined via declaration can be passed into callback functions, expressions are sometimes preferable because the passed-in function isn't used outside of the callback. So the unnamed function expression can be passed directly into the callback call.
#### Anonymous function creation
While function declarations require that a name be assigned to the function, expressions do not have that requirement. If a function expression is assigned to a variable, it adopts the name of the variable.
#### Arrow expressions
Like lambda functions in other languages, arrow expressions offer a succinct format for function definition. For example:
```javascript
var adder = (a, b) => a + b;
console.log(adder(1,2)); // => 3
```
### Using the `Function` constructor
Using the `Function` constructor explicitly is seldom your best option; according to [MDN docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/Function), it *"suffers from security and similar (but far less significant) performance issues to `eval`"*. While I don't recommend using the `Function` constructor I wanted to call it out as a lesser known option. Example:
```javascript
const helloWorld = new Function('console.log("Hello world!")');
helloWorld(); // => Hello world!
```

## Resources
1. Function expressions - [MDN docs](https://developer.mozilla.org/en-US/docs/web/JavaScript/Reference/Operators/function)
2. Function declarations - [MDN docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function)
3. Callback functions - [MDN docs](https://developer.mozilla.org/en-US/docs/Glossary/Callback_function)
4. Arrow functions - [MDN docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions)
5. Example of IIFE - [Coderwall](https://coderwall.com/p/ta4caw/using-iife-to-create-private-members-in-javascript)