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
function myFunction(a, b) {return a * b}
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
let x = myFunction(4, 3);
function myFunction(a, b) {
return a * b;
}
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.
Example
const x = function (a, b) {return a * b};
After a function expression has been stored in a variable, the variable can be used as a function:
Example
const x = function (a, b) {return a * b};
let z = x(4, 3);
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
const sum = add(2, 3); // Will work
function add(a, b) {return a + b;}
Key Differences
| Col 1 | Col 2 |
|---|---|
| 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:
Example
function myFunction(a, b) {
return a * b;
}
let x = myFunction(4, 3);
JavaScript functions can be used in expressions:
Example
function myFunction(a, b) {
return a * b;
}
let x = myFunction(4, 3) * 2;
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);
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);
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);
The toString() method returns the function as a string:
Example
function multiply(a, b) {
return a * b;
}
let text = multiply.toString();
