JavaScript Function Declaration vs. Function Expression: Key Differences & Examples
JavaScript function declaration and expression differ in terms of syntax, hoisting, naming and global scope.
A JavaScript function is a bunch of reusable statements designed to perform specific tasks.
JavaScript serves you a variety of functions and these all functions are different from each other in specific terms. This story represents the difference between function declaration and function expression.
Function Declaration vs. Function Expression
Definition
Function Declaration
The function declaration is a traditional way to define functions in JavaScript.
Function Expression
The function expression is a function that can be assigned to a variable, stored, passed as an argument to another function or returned from another function.
Syntax and name difference
Function Declaration
function function_name(parameters)
{
//Code to be executed.
return value; //optional
}
In the function declaration syntax function name is compulsory, you can’t omit the name.
Example
function multiply(a,b)
{
a * b;
return a * b;
}
const c = multiply(10,20);
console.log("Ans=",c); //output Ans=200
Function Expression
var/let/const var_nm=function (parameters)
{
//code statements
};
In function expression syntax, specifying the name of the function is optional. When you define a function without a function name it is called an anonymous function. The above syntax represents an anonymous function.
The function defined with the name in expression is called the named function.
const var_nm=function func_name(parameters)
{
//code statements
};
In short, you can define two types of functions in function expression anonymous and named .
Example
const sum=function addition(x,y)
{
x + y;
return x + y;
};
const z= sum(10,50);
console.log("Summation is",z); //output Summation is 60
You can see that when you call a function variable name is used as a function unlike function declaration.
Hoisting and global Scope difference
Function Declaration
In global scope function declarations are fully hoisted and automatically attached to global objects. You can call the function anywhere in the file,even before its actual definition.
Example
num();
function multiply(a,b)
{
a * b;
return a * b;
}
const c = multiply(10,20);
console.log("Ans=",c);
const sum=function addition(x,y)
{
x + y;
return x + y;
};
const z= sum(10,50);
console.log("Summation is",z); //output Summation is 60
function num()
{
let a=9;
let b=-10;
let c=4.5
console.log(a,b,c);
}
output
Look at the output, at the top num function’s values are printed and then the rest of the two functions results are displayed, because num function is called at beginning, no other functions are declared even function itself not declared. The function has a global scope.
Another example of global object binding
function declareg()
{
let a="hello";
}
console.log(window.declareg);
output
Here the declareg function automatically becomes the property of the global object.
Function Expression
In global scope function expressions are not hoisted and calling it before its definition results in errors. If function is assigned to var TypeError thrown and if function is assigned to let/const ReferenceError thrown.
Get Frontend Writing’s stories in your inbox
Join Medium for free to get updates from this writer.
The function expressions are loaded and executed only when they are called after its definition.
Example using var
greet();
console.log(greet);
var greet=function() {
console.log("Hello var expression!");
};
output
When you call a function expression greet before its definition a TypeError is shown using var.
example using let
hello();
console.log(hello);
let hello=function () {
console.log("Helloo!!!");
};output
example using const
js();
console.log(js);
const js=function () {
console.log("JavaScript!");
};
output
In function expression js(), the variable type is let or const,so it will throw a ReferenceError while you call the js() function before its definition.
The global object binding depends on how they are declared with variable assignment (like var,let and const).
Example using var
var expfun=function () {
conslole.log("expression");
};
console.log(window.expfun);
output
The function is attached to a global object when the function is assigned to a variable having var type.
Example using let
let funcexp = function () {
console.log("expression");
};
console.log(window.funcexp);
output
When you use let, it gives you ‘undefined’ in output. Similarly const also does not support global object binding. You can try changing the variable type to ‘const’ to see the result.
When to use function declaration vs. function expression?
The usage of function declaration and function expression depends on you, what you want from the function.
If you want flexibility and not to hoist the function then choose function expression.
If you want to function that is recursive or you want to call a function before its definition then use the function declaration.
If you want a function that is more readable and long, choose a function declaration.
If you want to call a function after its definition, use function expression.
Quick summary
Function Declaration
- Must have a function name.
- Doesn’t require assignment of functions to variables.
- Fully hoisted.
- Function can be used before or after definition.
- Function can be executed before any code in file.
Function Expression
- Name is optional.
- Require to assign a function to a variable.
- Not hoisted.
- Function Expression only executes when the interpreter reaches that line.
- Function can be used after its definition.
