JavaScript Functions

JavaScript functions are designed as code blocks to perform specific tasks.

JavaScript functions are executed when they are called by some code.

instance

function myFunction(p1, p2) {
    return p1 * p2;              // The function returns the product of p1 and p2
}

Try It Yourself

JavaScript function syntax

JavaScript functions are defined through function is defined by keywords, followed byFunction nameand parentheses ().

The function name can include letters, numbers, underscores, and dollar signs (the rules are the same as variable names).

Parentheses can include parameters separated by commas:

(Parameter 1, Parameter 2, ...)

The code executed by the function is placed inside curly braces:{}

function name(Parameter 1, Parameter 2, Parameter 3) {
    The code to be executed
}

Function parameters (Function parameters)Are the names listed in the function definition.

Function arguments (Function arguments)Is the actual value received by the function when the function is calledValue.

In a function, parameters are local variables.

In other programming languages, a function is approximately a procedure or a subroutine.

Function call

The code in the function will be executed when the function is called by other code:

  • When an event occurs (when the user clicks a button)
  • When JavaScript code is called
  • Automatic (self-invoking)

You will learn more about function calls in this tutorial.

Function returns

When JavaScript reaches return statement, the function will stop executing.

If a function is called by a statement, JavaScript will 'return' execution code after the call statement.

Functions usually calculateReturn valueThis returned value will be returned to the caller:

instance

Calculate the product of two numbers and return the result:

var x = myFunction(7, 8);        // Call the function, and the returned value is assigned to x
function myFunction(a, b) {
    return a * b;                // The function returns the product of a and b
}

The result of x will be:

56

Try It Yourself

Why use functions?

You can reuse code: once defined, the code can be used multiple times.

You can pass different parameters to the same function multiple times to produce different results.

instance

Convert Fahrenheit to Celsius:

function toCelsius(fahrenheit) {
    return (5/9) * (fahrenheit-32);
}
document.getElementById("demo").innerHTML = toCelsius(77);

Try It Yourself

() operator calls the function

Using the above example,toCelsius The reference is to the function object, while toCelsius() The reference is to the function result.

instance

Accessing a function without () returns the function definition:

function toCelsius(fahrenheit) {
    return (5/9) * (fahrenheit-32);
}
document.getElementById("demo").innerHTML = toCelsius;

Try It Yourself

Functions used as variable values

Functions can be used in the same way as variables, in all types of formulas, assignments, and calculations.

instance

Use variables to store function values:

var x = toCelsius(77);
var text = "The temperature is " + x + " Celsius";

You can use functions as variable values directly:

var text = "The temperature is " + toCelsius(77) + " Celsius";

Try It Yourself

You will learn more about functions in this tutorial.

Local variables

Variables declared within a JavaScript function become the function'sLocal variables.

Local variables can only be accessed within the function.

instance

// The code here cannot use carName
function myFunction() {
    var carName = "Volvo";
    // The code here can use carName
}
// The code here cannot use carName

Try It Yourself

Since local variables can only be recognized by their function, the same-named variables can be used in different functions.

Local variables are created at the beginning of a function and are deleted when the function is completed.

Textbook

For more information on JavaScript FunctionsFor more information on the knowledge, please read the relevant content in the Advanced JavaScript Tutorial:

ECMAScript Function Overview
This section explains the concept of functions, how ECMAScript declares and calls functions, and how functions return values.
ECMAScript arguments Object
This section introduces the basic usage of this object and then explains how to use the length property to determine the number of parameters of a function, as well as how to simulate function overloading.
ECMAScript Function Object (Class)
This section explains how to create functions using the Function class and then introduces the properties and methods of the Function object.
ECMAScript Closure (Closure)
This section explains the concept of closure (closure) and shows you two simple and slightly more complex closure examples.