This content originally appeared on DEV Community and was authored by sdcaulley
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:
const add = function (x, y) {
return x + y;
}
console.log(add(1, 2));
// expected output: 3
or this:
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:
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.
// 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):
- Readability - I find function declarations to be easier to read and lead to cleaner code.
- Debugging - I find functions with a name to be easier to debug, and function declarations enforce the naming of functions.
- 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.
-
Laziness - Why type
const blah = functionwhen I can just writefunction.
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
JavaScript Statements
JavaScript Function Expression
JavaScript Function Declaration
This content originally appeared on DEV Community and was authored by sdcaulley
sdcaulley | Sciencx (2022-03-19T18:01:55+00:00) JavaScript Function Expressions vs Declarations. Retrieved from https://www.scien.cx/2022/03/19/javascript-function-expressions-vs-declarations/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.