bugl
bugl
HomeLearnPatternsSearch
HomeLearnPatternsSearch

Loading lesson path

Learn/JavaScript/Objects, Classes, and Advanced Patterns
JavaScript•Objects, Classes, and Advanced Patterns

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}

More Common:

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

Before:

let x = myFunction(4, 3);
function myFunction(a, b) {
return a * b;
}

After:

function myFunction(a, b) {
return a * b;
}
let x = myFunction(4, 3);

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

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.

Previous

JavaScript Iterables

Next

JavaScript Object Properties