JavaScript Function Definitions
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 »
Note
Semicolons are used to separate executable JavaScript statements.
A function declaration is not an executable statement.
It is not common to end a function declaration with a semicolon.
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 Definitions vs Function Declarations
Function definition is a general term for creating a function.
Function declaration is one specific way to define a function.
Examples of function definitions include:
- Function declarations
- Function expressions
- Arrow functions
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:
Declarations vs Expressions
The difference is when the function becomes available.
Example
add1(4, 5);
function add1(a, b) {
return a + b;
}
Example
add2(4, 5); // Error
const add2 = function(a, b) {
return a + b;
};
In the first example, the function works before it is defined.
In the second example, the function does not exist until the code reaches it.
Why This Happens (Hoisting)
Earlier in this tutorial, you learned about "hoisting" (JavaScript Hoisting).
Hoisting is JavaScript's default behavior of moving declarations to the top of the current scope.
Hoisting applies to variable declarations and to function declarations.
Because of this, JavaScript functions can be called before they are declared:
myFunction(5);
function myFunction(y) {
return y * y;
}
Function Expressions are Not Hoisted
Function declarations are hoisted to the top of their scope.
Function expressions are not hoisted in the same way.
This means:
Function declarations can be called before they are defined.
Function expressions can not be called before they are defined.
Functions Stored in Variables
Example
const myFunction = function() {
return "Hello";
};
let text = myFunction();
Functions Can Be Used as Values
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 when
the function was invoked:
The toString() method returns the function as a string:
Example
function myFunction(a, b) {
return a * b;
}
let text = myFunction.toString();
Try it Yourself »
A function defined as the property of an object, is called a method to the object.
A function designed to create new objects, is called an object constructor.
