JavaScript Function Definitions
Function Definitions vs Function Declarations
Function definition is a general term for defining a function.
Function declaration is one specific way to define a function.
Examples of function definitions include:
- Function declarations
- Function expressions
- Arrow functions
Example
// Function Declaration
function myFunction(x, y) {
return x * y;
}
// Function Expression (Named)
const myFunction = function name(x, y) {
return x * y;
};
// Function Expression (Anonymous)
const myFunction = function (x, y) {
return x * y;
};
// Arrow Function
const myFunction = (x, y) => x * y;
// Function Constructor
const myFunction = new Function("x", "y", "return x * y");
// Object Method
const obj = {
myFunction(x, y) {
return x * y;
},
};
Function Declarations
Earlier in this tutorial, you learned that functions are declared with the following syntax:
function functionName(parameters) {
// code to be executed
}
A function declaration uses the function keyword and a function name.
Examples
A One Liner:
function myFunction(a, b) {return a * b}
Try it Yourself »
More Common:
function myFunction(a, b) {
return a * b;
}
Try it Yourself »
Declared functions are not executed immediately. They are "saved for later use", and will be executed later, when they are invoked (called upon).
You can call a function before or after it is declared in the code.
Examples
Before:
let x = myFunction(4, 3);
function myFunction(a, b) {
return a * b;
}
Try it Yourself »
After:
function myFunction(a, b) {
return a * b;
}
let x = myFunction(4, 3);
Try it Yourself »
Function Expressions
A function expression stores a function inside a variable.
The function can be anonymous (without a name).
Function expressions are executed only when the code reaches them.
After a function expression has been stored in a variable, the variable can be used as a function:
Hoisting
Function declarations are hoisted to the top of their scope.
Function expressions are not hoisted in the same way.
Function declarations can be called before they are defined.
Function expressions can not be called before they are defined.
Examples
Function declarations can be called before they are defined:
const sum = add(2, 3); // Will work
function add(a, b) {return a + b;}
Function expressions can not be called before they are defined:
const sum = add(2, 3); // ⛔ Will generate error
const add = function (a, b) {return a + b;};
Key Differences
| Function Declaration | Function Expression |
|---|---|
| Syntax: A statement starting with the function keyword, followed by a required name. |
Syntax: A part of an expression or assignment, and can be anonymous (without a name). |
| Hoisting: The function is moved to the top of its scope before code execution, allowing you to call it from anywhere within that code scope, even before its definition. |
Hoisting: The variable holding the function might be hoisted (depending on var, let, or const), but the function assignment itself is not. You can only call it after it has been defined in the code scope. |
| Flexibility: Primarily used for general-purpose functions that need to be available globally or in a specific scope. |
Flexibility: Can be used in various contexts, such as arguments to other functions (callbacks), immediately invoked function expressions, and assigned to object properties. |
Functions Stored in Variables
A function stored in a variable can be used like any other value:
JavaScript functions can be used in expressions:
The Function() Constructor
Functions can also be defined with the JavaScript Function() constructor, but this is rarely used.
Example
const myFunction = new Function("a", "b", "return a * b");
let x = myFunction(4, 3);
Try it Yourself »
You actually don't have to use the function constructor. The example above is the same as writing:
Example
const myFunction = function (a, b) {return a * b};
let x = myFunction(4, 3);
Try it Yourself »
Note
Most of the time, you can avoid using the new keyword in JavaScript.
Functions are Objects
The typeof operator in JavaScript returns function for
functions.
But, JavaScript functions can best be described as objects.
JavaScript functions have both properties and methods.
The arguments.length property returns the number of arguments received
by the function:
Example
function multiply(a, b) {
return arguments.length;
}
// Returns 0
multiply();
// Returns 2
multiply(a, b);
Try it Yourself »
The toString() method returns the function as a string:
