ā¹ļø Skipped - page is already crawled
| Filter | Status | Condition | Details |
|---|---|---|---|
| HTTP status | PASS | download_http_code = 200 | HTTP 200 |
| Age cutoff | PASS | download_stamp > now() - 6 MONTH | 0.1 months ago |
| History drop | PASS | isNull(history_drop_reason) | No drop reason |
| Spam/ban | PASS | fh_dont_index != 1 AND ml_spam_score = 0 | ml_spam_score=0 |
| Canonical | PASS | meta_canonical IS NULL OR = '' OR = src_unparsed | Not set |
| Property | Value |
|---|---|
| URL | https://dmitripavlutin.com/javascript-function-expressions-and-declarations/ |
| Last Crawled | 2026-04-09 06:27:40 (1 day ago) |
| First Indexed | 2021-05-04 08:13:31 (4 years ago) |
| HTTP Status Code | 200 |
| Meta Title | Don't Confuse Function Expressions and Function Declarations in JavaScript |
| Meta Description | What are the differences between function declarations and function expressions in JavaScript. |
| Meta Canonical | null |
| Boilerpipe Text | In JavaScript, the
function
keyword does a simple job: creates a function. However, the way you define a function using the keyword can create functions with different properties.
In this post, you'll find how using the
function
keyword you can write function declarations and function expressions, and what are the differences between the 2 types of functions.
Table of Contents
1. Function expressions vs function declarations
2. The function declaration
2.1 Dos and don'ts of the function declaration
3. The function expression
3.1 Dos and don'ts of the function expression
4. Summary
1. Function expressions vs function declarations
Function declarations and function expressions are 2 ways to create functions using the
function
keyword.
Let's pick an example to demonstrate the difference ā let's create 2 versions of a function that sums numbers:
function
sumA
(
a
,
b
) {
return
a
+
b
;
}
(
function
sumB
(
a
,
b
) {
return
a
+
b
;
});
sumA
(
1
,
2
);
// ???
sumB
(
1
,
2
);
// ???
Open the demo.
In one case, you define the function as usual (the
sumA
function). In the other case, the function is placed into a pair of parentheses (the
sumB
function).
What would happen if you invoke
sumA(1, 2)
and
sumB(1, 2)
?
As expected,
sumA(1, 2)
simply returns the sum of
1
and
2
numbers ā
3
.
However, invoking
sumB(1, 2)
throws an error
Uncaught ReferenceError: sumB is not defined
.
The explanation is that
sumA
was created using a function declaration, which creates a
function variable
(with the same name as the function name) in the current scope. But
sumB
was created using a function expression (it is wrapped into parentheses), which
doesn't create a function variable
in the current scope.
If you want to access the function created using a function expression, then save the function object into a variable:
// Works!
const
sum
=
(
function
sumB
(
a
,
b
) {
return
a
+
b
;
});
sum
(
1
,
2
);
// => 3
Here's a simple hint on how to distinguish a function declaration from a function expression:
If the statement starts with the
function
keyword, then it's a
function declaration
, otherwise it's a
function expression
.
// Function declaration: STARTS with `function` keyword
function
sumA
(
a
,
b
) {
return
a
+
b
;
}
// Function expression: DOES NOT START with `function` keyword
const
mySum
=
(
function
sumB
(
a
,
b
) {
return
a
+
b
;
});
// Function expression: DOES NOT START with `function` keyword
[
1
,
2
,
3
].
reduce
(
function
sum3
(
acc
,
number
) {
return
acc
+
number
});
From a higher point of view, function declarations are useful to create standalone functions, but function expressions are good as callbacks.
Now, let's dive more into the behavior of the function declarations and function expressions.
2. The function declaration
As you already saw in the previous example,
sumA
is a function declaration:
// Function declaration
function
sumA
(
a
,
b
) {
return
a
+
b
;
}
sumA
(
4
,
5
);
// => 9
A
function declaration
occurs when a statement contains the
function
keyword followed by the function name, a pair of parentheses with the parameters
(param1, param2, paramN)
, and the function body enclosed into a pair of curly braces
{ }
.
The function declaration creates a
function variable
ā a variable with the same name as the function name (e.g.
sumA
from the previous example). The function variable is accessible in the current scope (
before
and
after
the function declaration) and even
inside
the function's scope itself.
The function variable is normally used to invoke the function or pass around the function object to other functions (to
higher-order functions
).
For example, let's write a function
sumArray(array)
that sums recursively items of an array (the array can contain either numbers or other arrays):
sumArray
([
10
, [
1
, [
5
]]]);
// => 16
function
sumArray
(
array
) {
let
sum
=
0
;
for
(
const
item
of
array
) {
sum
+=
Array
.
isArray
(
item
)
?
sumArray
(
item
)
:
item
;
}
return
sum
;
}
sumArray
([
1
, [
4
,
6
]]);
// => 11
Open the demo.
function sumArray(array) { ... }
is a function declaration.
The function variable
sumArray
, containing the function object, is available in the current scope: before
sumArray([10, [1, [5]]])
and after
sumArray([1, [4, 6]])
the function declaration, and also in the scope of the function itself
sumArray(item)
(allowing recursive calls).
The function variable is available before the function declaration thanks to
hoisting
.
2.1 Dos and don'ts of the function declaration
The role of the function declaration syntax is to create standalone functions. Function declarations are expected inside the global scope or the direct the scope of other functions:
// Good!
function
myFunc1
(
param1
,
param2
) {
return
param1
+
param2
;
}
function
bigFunction
(
param
) {
// Good!
function
myFunc2
(
param1
,
param2
) {
return
param1
+
param2
;
}
const
result
=
myFunc2
(
1
,
3
);
return
result
+
param
;
}
Using the same reason it is not recommended to use function declarations inside conditionals (
if
) and loops (
while
,
for
):
// Bad!
if
(
myCondition
) {
function
myFunction
(
a
,
b
) {
return
a
*
b
;
}
}
else
{
function
myFunction
(
a
,
b
) {
return
a
+
b
;
}
}
myFunction
(
2
,
3
);
Creating functions conditionally is better performed using function expressions.
3. The function expression
The function expression occurs when the
function
keyword creates a function (with or without a name) inside of an expression.
The following are examples of functions created using expressions:
// Function expressions
const
sum
=
(
function
sumB
(
a
,
b
) {
return
a
+
b
;
});
const
myObject
=
{
myMethod
:
function
() {
return
42
;
}
};
const
numbers
=
[
4
,
1
,
6
];
numbers
.
forEach
(
function
callback
(
number
) {
console
.
log
(
number
);
// logs 4
// logs 1
// logs 1
});
There are 2 kinds of functions created inside a function expression:
If the function inside the expression doesn't have a name, e.g.
function() { return 42 }
, then that's an
anonymous function expression
If the function has a name, e.g.
sumB
and
callback
in the previous example, then that's a
named function expression
3.1 Dos and don'ts of the function expression
Function expressions fit good as callbacks or functions created by condition:
// Functions created conditionally
let
callback
;
if
(
true
) {
callback
=
function
() {
return
42
};
}
else
{
callback
=
function
() {
return
3.14
};
}
// Functions used as callbacks
[
1
,
2
,
3
].
map
(
function
increment
(
number
) {
return
number
+
1
;
});
// => [2, 3, 4]
If you've created a named function expression, note that the function variable is
available only inside the created function scope
:
const
numbers
=
[
4
];
numbers
.
forEach
(
function
callback
(
number
) {
console
.
log
(
callback
);
// logs function() { ... }
});
console
.
log
(
callback
);
// ReferenceError: callback is not defined
Open the demo.
callback
is a named function expression, thus the
callback
function variable is available only inside the
callback()
function scope, but not outside.
However, if you store the function object into a regular variable, then you can access the function object from that variable inside and outside of the function scope:
const
callback
=
function
(
number
) {
console
.
log
(
callback
);
// logs function() { ... }
};
const
numbers
=
[
4
];
numbers
.
forEach
(
callback
);
console
.
log
(
callback
);
// logs function() { ... }
Open the demo.
4. Summary
Depending on how you use the
function
keyword to create functions, you can end in 2 ways to create function: function declaration and function expression.
A function declaration happens when you start the statement with the
function
keyword:
// Function declaration
function
sumA
(
a
,
b
) {
return
a
+
b
;
}
Function declarations are useful to create standalone, general purpose, functions.
However, if a statement doesn't start with
function
keyword, then you have a function expression:
// Function expression
(
function
sumB
(
a
,
b
) {
return
a
+
b
;
});
The functions created using functions expressions are useful to create callbacks or functions by condition.
Challenge: is
function sum(a, b) { return a + b } + 1;
a function declaration or function expression? Write your explanation in a comment below! |
| Markdown | [ ](https://dmitripavlutin.com/)
[Dmitri Pavlutin](https://dmitripavlutin.com/)
I help developers understand Frontend technologies
[RSS](https://dmitripavlutin.com/rss.xml)[Search](https://dmitripavlutin.com/search/)[All posts](https://dmitripavlutin.com/all-posts/)[About](https://dmitripavlutin.com/about-me/)
# Don't Confuse Function Expressions and Function Declarations in JavaScript
Posted May 4, 2021
[javascript](https://dmitripavlutin.com/tag/javascript/)[function](https://dmitripavlutin.com/tag/function/)
[6 Comments](https://dmitripavlutin.com/javascript-function-expressions-and-declarations/#comments "Jump to comments section")
In JavaScript, the `function` keyword does a simple job: creates a function. However, the way you define a function using the keyword can create functions with different properties.
In this post, you'll find how using the `function` keyword you can write function declarations and function expressions, and what are the differences between the 2 types of functions.
### Table of Contents
- [1\. Function expressions vs function declarations](https://dmitripavlutin.com/javascript-function-expressions-and-declarations/#1-function-expressions-vs-function-declarations)
- [2\. The function declaration](https://dmitripavlutin.com/javascript-function-expressions-and-declarations/#2-the-function-declaration)
- [2\.1 Dos and don'ts of the function declaration](https://dmitripavlutin.com/javascript-function-expressions-and-declarations/#21-dos-and-donts-of-the-function-declaration)
- [3\. The function expression](https://dmitripavlutin.com/javascript-function-expressions-and-declarations/#3-the-function-expression)
- [3\.1 Dos and don'ts of the function expression](https://dmitripavlutin.com/javascript-function-expressions-and-declarations/#31-dos-and-donts-of-the-function-expression)
- [4\. Summary](https://dmitripavlutin.com/javascript-function-expressions-and-declarations/#4-summary)
## 1\. Function expressions vs function declarations
Function declarations and function expressions are 2 ways to create functions using the `function` keyword.
Let's pick an example to demonstrate the difference ā let's create 2 versions of a function that sums numbers:
`function sumA(a, b) { return a + b; } (function sumB(a, b) { return a + b; }); sumA(1, 2); // ??? sumB(1, 2); // ???`
[Open the demo.](https://jsfiddle.net/dmitri_pavlutin/8b46yokr/2/)
In one case, you define the function as usual (the `sumA` function). In the other case, the function is placed into a pair of parentheses (the `sumB` function).
What would happen if you invoke `sumA(1, 2)` and `sumB(1, 2)`?
As expected, `sumA(1, 2)` simply returns the sum of `1` and `2` numbers ā `3`. However, invoking `sumB(1, 2)` throws an error `Uncaught ReferenceError: sumB is not defined`.
The explanation is that `sumA` was created using a function declaration, which creates a *function variable* (with the same name as the function name) in the current scope. But `sumB` was created using a function expression (it is wrapped into parentheses), which *doesn't create a function variable* in the current scope.
If you want to access the function created using a function expression, then save the function object into a variable:
`// Works! const sum = (function sumB(a, b) { return a + b; }); sum(1, 2); // => 3`
Here's a simple hint on how to distinguish a function declaration from a function expression:
> If the statement starts with the `function` keyword, then it's a *function declaration*, otherwise it's a *function expression*.
``// Function declaration: STARTS with `function` keyword function sumA(a, b) { return a + b; } // Function expression: DOES NOT START with `function` keyword const mySum = (function sumB(a, b) { return a + b; }); // Function expression: DOES NOT START with `function` keyword [1, 2, 3].reduce(function sum3(acc, number) { return acc + number });``
From a higher point of view, function declarations are useful to create standalone functions, but function expressions are good as callbacks.
Now, let's dive more into the behavior of the function declarations and function expressions.
## 2\. The function declaration
As you already saw in the previous example, `sumA` is a function declaration:
`// Function declaration function sumA(a, b) { return a + b; } sumA(4, 5); // => 9`
A *function declaration* occurs when a statement contains the `function` keyword followed by the function name, a pair of parentheses with the parameters `(param1, param2, paramN)`, and the function body enclosed into a pair of curly braces `{ }`.
The function declaration creates a *function variable* ā a variable with the same name as the function name (e.g. `sumA` from the previous example). The function variable is accessible in the current scope (*before* and *after* the function declaration) and even *inside* the function's scope itself.
The function variable is normally used to invoke the function or pass around the function object to other functions (to [higher-order functions](https://dmitripavlutin.com/javascript-higher-order-functions/)).
For example, let's write a function `sumArray(array)` that sums recursively items of an array (the array can contain either numbers or other arrays):
`sumArray([10, [1, [5]]]); // => 16 function sumArray(array) { let sum = 0; for (const item of array) { sum += Array.isArray(item) ? sumArray(item) : item; } return sum; } sumArray([1, [4, 6]]); // => 11`
[Open the demo.](https://jsfiddle.net/dmitri_pavlutin/n7wcryuo/)
`function sumArray(array) { ... }` is a function declaration.
The function variable `sumArray`, containing the function object, is available in the current scope: before `sumArray([10, [1, [5]]])` and after `sumArray([1, [4, 6]])` the function declaration, and also in the scope of the function itself `sumArray(item)` (allowing recursive calls).
The function variable is available before the function declaration thanks to [hoisting](https://dmitripavlutin.com/javascript-hoisting-in-details/#hoisting-and-function-declaration).
### 2\.1 Dos and don'ts of the function declaration
The role of the function declaration syntax is to create standalone functions. Function declarations are expected inside the global scope or the direct the scope of other functions:
`// Good! function myFunc1(param1, param2) { return param1 + param2; } function bigFunction(param) { // Good! function myFunc2(param1, param2) { return param1 + param2; } const result = myFunc2(1, 3); return result + param; }`
Using the same reason it is not recommended to use function declarations inside conditionals (`if`) and loops (`while`, `for`):
`// Bad! if (myCondition) { function myFunction(a, b) { return a * b; } } else { function myFunction(a, b) { return a + b; } } myFunction(2, 3);`
Creating functions conditionally is better performed using function expressions.
## 3\. The function expression
The function expression occurs when the `function` keyword creates a function (with or without a name) inside of an expression.
The following are examples of functions created using expressions:
`// Function expressions const sum = (function sumB(a, b) { return a + b; }); const myObject = { myMethod: function() { return 42; } }; const numbers = [4, 1, 6]; numbers.forEach(function callback(number) { console.log(number); // logs 4 // logs 1 // logs 1 });`
There are 2 kinds of functions created inside a function expression:
- If the function inside the expression doesn't have a name, e.g. `function() { return 42 }`, then that's an *anonymous function expression*
- If the function has a name, e.g. `sumB` and `callback` in the previous example, then that's a *named function expression*
### 3\.1 Dos and don'ts of the function expression
Function expressions fit good as callbacks or functions created by condition:
`// Functions created conditionally let callback; if (true) { callback = function() { return 42 }; } else { callback = function() { return 3.14 }; } // Functions used as callbacks [1, 2, 3].map(function increment(number) { return number + 1; }); // => [2, 3, 4]`
If you've created a named function expression, note that the function variable is *available only inside the created function scope*:
`const numbers = [4]; numbers.forEach(function callback(number) { console.log(callback); // logs function() { ... } }); console.log(callback); // ReferenceError: callback is not defined`
[Open the demo.](https://jsfiddle.net/dmitri_pavlutin/sujwmp10/2/)
`callback` is a named function expression, thus the `callback` function variable is available only inside the `callback()` function scope, but not outside.
However, if you store the function object into a regular variable, then you can access the function object from that variable inside and outside of the function scope:
`const callback = function(number) { console.log(callback); // logs function() { ... } }; const numbers = [4]; numbers.forEach(callback); console.log(callback); // logs function() { ... }`
[Open the demo.](https://jsfiddle.net/dmitri_pavlutin/1btmrcu2/1/)
## 4\. Summary
Depending on how you use the `function` keyword to create functions, you can end in 2 ways to create function: function declaration and function expression.
A function declaration happens when you start the statement with the `function` keyword:
`// Function declaration function sumA(a, b) { return a + b; }`
Function declarations are useful to create standalone, general purpose, functions.
However, if a statement doesn't start with `function` keyword, then you have a function expression:
`// Function expression (function sumB(a, b) { return a + b; });`
The functions created using functions expressions are useful to create callbacks or functions by condition.
*Challenge: is `function sum(a, b) { return a + b } + 1;` a function declaration or function expression? Write your explanation in a comment below\!*
#### Like the post? Please share\!
[Suggest Improvement](https://github.com/panzerdp/dmitripavlutin.com/edit/master/posts/130-funct-expression-declaration/index.md)
#### About Dmitri Pavlutin
Software developer and sometimes writer. My daily routine consists of (but not limited to) drinking coffee, coding, writing, overcoming boredom š, developing [a gift boxes Shopify app](https://apps.shopify.com/boxi?utm_source=dmitripavlutin&utm_medium=referral), and [blogging about Shopify](https://boxiapps.com/blog?utm_source=dmitripavlutin&utm_medium=referral). Living in the sunny Barcelona. šŖšø
[](mailto:dmitripavlutin@gmail.com "Send an email to Dmitri Pavlutin")[](https://twitter.com/panzerdp "Dmitri Pavlutin's Twitter profile")[](https://www.facebook.com/dmitripavlutin.dev "Dmitri Pavlutin's Facebook page")[](https://www.linkedin.com/in/dmitri-pavlutin/ "Dmitri Pavlutin's Linkedin profile")
### About Dmitri Pavlutin
Software developer and sometimes writer. My daily routine consists of (but not limited to) drinking coffee, coding, writing, overcoming boredom š, developing [a gift boxes Shopify app](https://apps.shopify.com/boxi?utm_source=dmitripavlutin&utm_medium=referral), and [blogging about Shopify](https://boxiapps.com/blog?utm_source=dmitripavlutin&utm_medium=referral). Living in the sunny Barcelona. šŖšø
[](mailto:dmitripavlutin@gmail.com "Send an email to Dmitri Pavlutin")[](https://twitter.com/panzerdp "Dmitri Pavlutin's Twitter profile")[](https://www.facebook.com/dmitripavlutin.dev "Dmitri Pavlutin's Facebook page")[](https://www.linkedin.com/in/dmitri-pavlutin/ "Dmitri Pavlutin's Linkedin profile")
### Popular posts
JavaScript
React
ā [JavaScript Closure: The Beginner's Friendly Guide](https://dmitripavlutin.com/javascript-closure/)
ā [Gentle Explanation of "this" in JavaScript](https://dmitripavlutin.com/gentle-explanation-of-this-in-javascript/)
ā [5 Differences Between Arrow and Regular Functions](https://dmitripavlutin.com/differences-between-arrow-and-regular-functions/)
ā [A Simple Explanation of React.useEffect()](https://dmitripavlutin.com/react-useeffect-explanation/)
ā [Your Guide to React.useCallback()](https://dmitripavlutin.com/react-usecallback/)
ā [Use React.memo() wisely](https://dmitripavlutin.com/use-react-memo-wisely/)
Ā© 2026 Dmitri Pavlutin
Licensed under [CC BY 4.0](http://creativecommons.org/licenses/by/4.0/)
[Terms](https://dmitripavlutin.com/terms/)[Privacy](https://dmitripavlutin.com/privacy-policy/)[Contact](https://dmitripavlutin.com/contact/)[About](https://dmitripavlutin.com/about-me/) |
| Readable Markdown | In JavaScript, the `function` keyword does a simple job: creates a function. However, the way you define a function using the keyword can create functions with different properties.
In this post, you'll find how using the `function` keyword you can write function declarations and function expressions, and what are the differences between the 2 types of functions.
### Table of Contents
- [1\. Function expressions vs function declarations](https://dmitripavlutin.com/javascript-function-expressions-and-declarations/#1-function-expressions-vs-function-declarations)
- [2\. The function declaration](https://dmitripavlutin.com/javascript-function-expressions-and-declarations/#2-the-function-declaration)
- [2\.1 Dos and don'ts of the function declaration](https://dmitripavlutin.com/javascript-function-expressions-and-declarations/#21-dos-and-donts-of-the-function-declaration)
- [3\. The function expression](https://dmitripavlutin.com/javascript-function-expressions-and-declarations/#3-the-function-expression)
- [3\.1 Dos and don'ts of the function expression](https://dmitripavlutin.com/javascript-function-expressions-and-declarations/#31-dos-and-donts-of-the-function-expression)
- [4\. Summary](https://dmitripavlutin.com/javascript-function-expressions-and-declarations/#4-summary)
## 1\. Function expressions vs function declarations
Function declarations and function expressions are 2 ways to create functions using the `function` keyword.
Let's pick an example to demonstrate the difference ā let's create 2 versions of a function that sums numbers:
`function sumA(a, b) { return a + b; } (function sumB(a, b) { return a + b; }); sumA(1, 2); // ??? sumB(1, 2); // ???`
[Open the demo.](https://jsfiddle.net/dmitri_pavlutin/8b46yokr/2/)
In one case, you define the function as usual (the `sumA` function). In the other case, the function is placed into a pair of parentheses (the `sumB` function).
What would happen if you invoke `sumA(1, 2)` and `sumB(1, 2)`?
As expected, `sumA(1, 2)` simply returns the sum of `1` and `2` numbers ā `3`. However, invoking `sumB(1, 2)` throws an error `Uncaught ReferenceError: sumB is not defined`.
The explanation is that `sumA` was created using a function declaration, which creates a *function variable* (with the same name as the function name) in the current scope. But `sumB` was created using a function expression (it is wrapped into parentheses), which *doesn't create a function variable* in the current scope.
If you want to access the function created using a function expression, then save the function object into a variable:
`// Works! const sum = (function sumB(a, b) { return a + b; }); sum(1, 2); // => 3`
Here's a simple hint on how to distinguish a function declaration from a function expression:
> If the statement starts with the `function` keyword, then it's a *function declaration*, otherwise it's a *function expression*.
``// Function declaration: STARTS with `function` keyword function sumA(a, b) { return a + b; } // Function expression: DOES NOT START with `function` keyword const mySum = (function sumB(a, b) { return a + b; }); // Function expression: DOES NOT START with `function` keyword [1, 2, 3].reduce(function sum3(acc, number) { return acc + number });``
From a higher point of view, function declarations are useful to create standalone functions, but function expressions are good as callbacks.
Now, let's dive more into the behavior of the function declarations and function expressions.
## 2\. The function declaration
As you already saw in the previous example, `sumA` is a function declaration:
`// Function declaration function sumA(a, b) { return a + b; } sumA(4, 5); // => 9`
A *function declaration* occurs when a statement contains the `function` keyword followed by the function name, a pair of parentheses with the parameters `(param1, param2, paramN)`, and the function body enclosed into a pair of curly braces `{ }`.
The function declaration creates a *function variable* ā a variable with the same name as the function name (e.g. `sumA` from the previous example). The function variable is accessible in the current scope (*before* and *after* the function declaration) and even *inside* the function's scope itself.
The function variable is normally used to invoke the function or pass around the function object to other functions (to [higher-order functions](https://dmitripavlutin.com/javascript-higher-order-functions/)).
For example, let's write a function `sumArray(array)` that sums recursively items of an array (the array can contain either numbers or other arrays):
`sumArray([10, [1, [5]]]); // => 16 function sumArray(array) { let sum = 0; for (const item of array) { sum += Array.isArray(item) ? sumArray(item) : item; } return sum; } sumArray([1, [4, 6]]); // => 11`
[Open the demo.](https://jsfiddle.net/dmitri_pavlutin/n7wcryuo/)
`function sumArray(array) { ... }` is a function declaration.
The function variable `sumArray`, containing the function object, is available in the current scope: before `sumArray([10, [1, [5]]])` and after `sumArray([1, [4, 6]])` the function declaration, and also in the scope of the function itself `sumArray(item)` (allowing recursive calls).
The function variable is available before the function declaration thanks to [hoisting](https://dmitripavlutin.com/javascript-hoisting-in-details/#hoisting-and-function-declaration).
### 2\.1 Dos and don'ts of the function declaration
The role of the function declaration syntax is to create standalone functions. Function declarations are expected inside the global scope or the direct the scope of other functions:
`// Good! function myFunc1(param1, param2) { return param1 + param2; } function bigFunction(param) { // Good! function myFunc2(param1, param2) { return param1 + param2; } const result = myFunc2(1, 3); return result + param; }`
Using the same reason it is not recommended to use function declarations inside conditionals (`if`) and loops (`while`, `for`):
`// Bad! if (myCondition) { function myFunction(a, b) { return a * b; } } else { function myFunction(a, b) { return a + b; } } myFunction(2, 3);`
Creating functions conditionally is better performed using function expressions.
## 3\. The function expression
The function expression occurs when the `function` keyword creates a function (with or without a name) inside of an expression.
The following are examples of functions created using expressions:
`// Function expressions const sum = (function sumB(a, b) { return a + b; }); const myObject = { myMethod: function() { return 42; } }; const numbers = [4, 1, 6]; numbers.forEach(function callback(number) { console.log(number); // logs 4 // logs 1 // logs 1 });`
There are 2 kinds of functions created inside a function expression:
- If the function inside the expression doesn't have a name, e.g. `function() { return 42 }`, then that's an *anonymous function expression*
- If the function has a name, e.g. `sumB` and `callback` in the previous example, then that's a *named function expression*
### 3\.1 Dos and don'ts of the function expression
Function expressions fit good as callbacks or functions created by condition:
`// Functions created conditionally let callback; if (true) { callback = function() { return 42 }; } else { callback = function() { return 3.14 }; } // Functions used as callbacks [1, 2, 3].map(function increment(number) { return number + 1; }); // => [2, 3, 4]`
If you've created a named function expression, note that the function variable is *available only inside the created function scope*:
`const numbers = [4]; numbers.forEach(function callback(number) { console.log(callback); // logs function() { ... } }); console.log(callback); // ReferenceError: callback is not defined`
[Open the demo.](https://jsfiddle.net/dmitri_pavlutin/sujwmp10/2/)
`callback` is a named function expression, thus the `callback` function variable is available only inside the `callback()` function scope, but not outside.
However, if you store the function object into a regular variable, then you can access the function object from that variable inside and outside of the function scope:
`const callback = function(number) { console.log(callback); // logs function() { ... } }; const numbers = [4]; numbers.forEach(callback); console.log(callback); // logs function() { ... }`
[Open the demo.](https://jsfiddle.net/dmitri_pavlutin/1btmrcu2/1/)
## 4\. Summary
Depending on how you use the `function` keyword to create functions, you can end in 2 ways to create function: function declaration and function expression.
A function declaration happens when you start the statement with the `function` keyword:
`// Function declaration function sumA(a, b) { return a + b; }`
Function declarations are useful to create standalone, general purpose, functions.
However, if a statement doesn't start with `function` keyword, then you have a function expression:
`// Function expression (function sumB(a, b) { return a + b; });`
The functions created using functions expressions are useful to create callbacks or functions by condition.
*Challenge: is `function sum(a, b) { return a + b } + 1;` a function declaration or function expression? Write your explanation in a comment below\!* |
| Shard | 195 (laksa) |
| Root Hash | 5311222262284501795 |
| Unparsed URL | com,dmitripavlutin!/javascript-function-expressions-and-declarations/ s443 |