JavaScript Functions

July 9, 2021 · 3 min read

If you have any questions, feel free to comment below. Click the block can copy the code.
And if you think it's helpful to you, just click on the ads which can support this site. Thanks!

Declaration (Definition) #

Declaring (defining) a complete function involves five parts: the keyword, function name, formal parameters, function body, and return value.

Calling #

A declared (defined) function must be called to actually run; use () to call a function.

  <script>
    // Declare (define) the simplest function, with neither formal parameters nor a return value
    function sayHi() {
      console.log('Hi~')
    }
    // Call the function to run the code in its body
    // functionName()

    sayHi()
    // It can be called repeatedly, as many times as needed
    sayHi()
  </script>

Parameters #

There is no limit on the number of formal parameters when declaring (defining) a function; separate multiple parameters with ,.
Arguments passed when calling a function must follow the order of the formal parameters.

Formal Parameters and Arguments #

Formal parameters: the parameters written in parentheses after the function name when declaring a function. Arguments: the actual values written in parentheses after the function name when calling a function.

    // Declare (define) a function that calculates the sum of any two numbers
    // Formal parameters x and y represent any two numbers; they are variables
    function count(x, y) {
      console.log(x + y);
    }
    // Call the function with two specific numbers as arguments
    // Here, 10 is assigned to formal parameter x
    // Here, 5 is assigned to formal parameter y
    count(10, 5); // The result is 15

Return Values #

The return keyword passes an internal result to the outside of a function. The result passed out is the return value. Summary:

Using the return keyword in a function body makes an internal result available outside the function.
A function can have only one return, and code on the next line after return will not run, so do not put the value after return on a new line.
return immediately ends the current function.
A function can omit return; in that case its return value is undefined by default.

Scope #

Generally, names used in a program are not always valid or available everywhere. The range of code in which a name is available is its scope.

Global Scope #

Global scope covers the environment in which all code runs (the entire script tag) or a standalone JS file. Variables in global scope are called global variables. Variables declared with let outside a function are global variables; they can be accessed and modified anywhere.

Local Scope #

The code environment inside a function is local scope. Because it relates to a function, it is also called function scope. Variables in local scope are called local variables. Variables declared with let inside a function can be accessed and modified only within that function.

If a variable is assigned directly inside a function without being declared, it is treated as a global variable, but this is strongly discouraged. A function’s formal parameters can also be regarded as local variables.

Anonymous Functions #

Functions can be divided into named functions and anonymous functions. An anonymous function has no name and cannot be used directly.

Function Expressions #

// Declare
let fn = function() {
   console.log('Function expression')
}
// Call
fn()

Assigning an anonymous function to a variable and calling it by the variable’s name is called a function expression. Its formal parameters and arguments are used in the same way as those of a named function.

This will be used later with web APIs:

Immediately Invoked Function Expressions #

Prevent global variables from interfering with one another.

(function(){ xxxx  })();
(function(){ xxxx }());

No separate call is needed: it runs immediately because it has already been called.
Separate multiple immediately invoked functions with semicolons.

When looking up a variable, check the accessible local scope first; if it is not there, look in global scope.

Quiz: https://ks.wjx.top/vj/wV1PSkl.aspx^[1]

References

https://ks.wjx.top/vj/wV1PSkl.aspx ↩︎