Function Expressions vs Function Declarations

There are two methods of defining a function in JavaScript: the function expression and function declaration. They’re similar, but there are a few important differences you should be aware of.

First, here are some things they have in common:

No Return Statement?
Functions don’t require an explicit return statement. Without one, a function returns undefined by default. Additionally, when a function does include a return statement, the specified return value is not returned until the function is called.

Parameters Are Optional
In both function declarations and function expressions, parameters (what’s inside the parentheses — this variable or expression is called a parameter when it’s a placeholder for something, but an argument something is being passed in during a function call [such as returnHello()]) are optional. A function can have up to 255 comma-separated parameters.

Function Declarations

Also known as a “function statement,” a “function declaration” is a function bound to an identifier or name. Function declarations require the keyword function, a name, and curly braces (with or without content — the function body, consisting of one or more statements).

function returnHello() {
return 'Hello!';
}
// returns undefined
returnHello(); // returns "Hello!"

You Can Call a Function Declaration before It’s Declared
When a JavaScript file (or HTML document with JavaScript in it) is loaded, function declarations are hoisted to the top of the code prior to the script being run.

Don’t End with a Semicolon
While it isn’t necessarily incorrect to place a semicolon at the end of a function declaration, doing so is pointless; if you do, it is evaluated as a separate empty statement (as Marius Schulz explains in his blog).

Function Expressions

A “function expression” is a function declaration requiring the keyword function and curly braces, with or without a function body.

const myFunction = function [name]() {
return 'Hello!';
};
// returns undefined
myFunction(); // returns "Hello!"

Resolving to a Value Enables Assignment
An “expression” is any valid unit of code that resolves to a value; function expressions return a value, which is the entire function (not to be confused with the return value of a return statement). Therefore, function expressions can be (and are commonly) assigned to variables, though in some cases they aren’t, such as when they’re used as callbacks (passed as parameters of another function). They don’t have to be assigned to a variable (but are not of much use when they aren’t being used as callbacks or some other specific cases).

Name or No Name? It’s Your Choice
The primary difference between function expressions and function declarations is that in the case of function expressions, the function name is optional (in which case it’s called “anonymous”).

// Anonymous
const myFunction = function() {
return 'Hello!';
};

// Named
const myFunction = function returnHello() {
return 'Hello!';
};

Function Expressions Aren’t Hoisted
Unlike function declarations, function expressions aren’t available until the JavaScript interpreter reaches them in the script. If you try to call a function expression before it’s declared, you’ll get a ReferenceError.

notHoisted(); //  ReferenceError: can't access lexical declaration notHoisted before initialization

const notHoisted = function() {
console.log('bar');
};

Function Expressions Enable the Use of IFFEs
Function expressions, unlike function declarations, can be immediately invoked — this JavaScript design pattern (technique), known as an immediately invoked function expression, is useful for minimizing pollution of the global namespace and creating private state (when used with a closure).

Lastly, function expressions assigned to a variable are assignment statements and thus (unlike function declarations) should end in a semicolon.

aspiring web developer | nataliecardot.com

aspiring web developer | nataliecardot.com