JavaScript Function Definitions

❮ Previous Next ❯

JavaScript functions are defined using the keyword function.

You have two options to create a function: either use a function declaration or a function expression.

Function Declarations

In the previous part of this guide, you discovered that functions are declared the following syntax:

function functionName(parameters) {
// code to be executed
}

Functions that are declared are not executed right away. Instead, they are "saved for later use" and will be executed later when they are called upon.

Semicolons are like separators for JavaScript commands that can be executed.
When you create a function using a declaration, it's not a command that gets executed immediately. So, it's not usual to finish it with a semicolon.

Function Expressions

You can create a JavaScript function using an expression.

You can save a function expression in a variable.

Once a function expression is saved in a variable, you can use that variable as if it were a function.

The code snippet you see represents an anonymous function, which is essentially a function without a name.

Functions kept in variables can be called without using function names. Simply use the variable name to invoke (call) the function.

The function in the code finishes with a semicolon because it's a crucial part of a statement that can be executed.

The Function() Constructor

In the earlier examples, we showed that JavaScript functions are created using the function keyword.

You can create functions in JavaScript using a built-in function constructor known as Function().

You don't need to utilize the function constructor. The provided example is equivalent to this alternative approach:

Usually, in JavaScript, you don't need to use the new keyword.

Function Hoisting

In the previous part of this guide, you gained knowledge about "hoisting" (refer to JavaScript Hoisting).

In JavaScript, hoisting is the automatic action of bringing declarations to the top of the current scope by default.

Hoisting works for both variable and function declarations in JavaScript.

Due to this, JavaScript functions can be used even if they are not declared beforehand.

myFunction(5);

function myFunction(y) {
return y * y;
}

Functions created using an expression are not hoisted.

Self-Invoking Functions

You can make function expressions "self-invoking."

A self-invoking expression starts on its own without needing to be manually called or invoked.

Function expressions run on their own when the expression is followed by ().

You can't automatically call a function declaration by itself.

Enclose the function with parentheses to show that it is a function expression.

The code snippet you see is a special kind of function known as an anonymous self-invoking function, which means it's a function without a name.

Functions Can Be Used as Values

JavaScript functions can be employed as values.

JavaScript functions are applicable in expressions.

Functions are Objects

The JavaScript typeof operator gives "function" as the result when used with functions.

JavaScript functions are essentially like objects.

JavaScript functions come with both properties and methods.

The arguments.length property tells you how many arguments were given to a function when it was called.

The toString() function changes the function into a string.

A method is a function that belongs to an object. It's like a special job that the object can do.
An object constructor is a function made to create brand new objects. It's like a builder for objects.

Arrow Functions

Arrow functions make it easier to write function expressions using a concise syntax.

You can skip using the function and return keywords, as well as the curly brackets.

Arrow functions don't possess their own this. They're not the best for defining object methods.

Arrow functions are not hoisted during the code execution. You need to define them before using them.

Prefer using const over var for safety. This is because a function expression remains a constant value.

If your function consists of only one statement, you can skip using the return keyword and curly brackets. However, it's a good practice to include them for consistency.

IE11 and earlier versions do not support arrow functions.

<!DOCTYPE html>
<html>
  <body>
    <h1>JavaScript Functions</h1>
    <p>Call a function which performs a calculation and returns the result:</p>
    <p id="demo"></p>
    <script>
      let x = myFunction(4, 3);
      document.getElementById("demo").innerHTML = x;

      function myFunction(a, b) {
        return a * b;
      }
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h2>JavaScript Functions</h2>
    <p>A function can be stored in a variable:</p>
    <p id="demo"></p>
    <script>
      const x = function(a, b) {
        return a * b
      };
      document.getElementById("demo").innerHTML = x;
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h2>JavaScript Functions</h2>
    <p>Once a function is saved in a variable, you can use that variable as if it were the function itself.</p>
    <p id="demo"></p>
    <script>
      const x = function(a, b) {
        return a * b
      };
      document.getElementById("demo").innerHTML = x(4, 3);
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h2>JavaScript Functions</h2>
    <p>JavaScript has an built-in function constructor.</p>
    <p id="demo"></p>
    <script>
      const myFunction = new Function("a", "b", "return a * b");
      document.getElementById("demo").innerHTML = myFunction(4, 3);
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h2>JavaScript Functions</h2>
    <p id="demo"></p>
    <script>
      const myFunction = function(a, b) {
        return a * b
      }
      document.getElementById("demo").innerHTML = myFunction(4, 3);
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <p>Functions can run by themselves without needing someone to specifically tell them to do so.</p>
    <p id="demo"></p>
    <script>
      (function() {
        document.getElementById("demo").innerHTML = "Hello! I called myself";
      })();
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h2>JavaScript Functions</h2>
    <p>Functions can be treated as values:</p>
    <p>x = myFunction(4,3) or x = 12</p>
    <p>In both cases, x becomes a number with the value of 12.</p>
    <p id="demo"></p>
    <script>
      function myFunction(a, b) {
        return a * b;
      }
      let x = myFunction(4, 3);
      document.getElementById("demo").innerHTML = x;
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h2>JavaScript Functions</h2>
    <p>Functions can be used in expressions.</p>
    <p id="demo"></p>
    <script>
      function myFunction(a, b) {
        return a * b;
      }
      let x = myFunction(4, 3) * 2;
      document.getElementById("demo").innerHTML = x;
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <p>The `arguments.length` property tells us how many arguments a function has received.</p>
    <p id="demo"></p>
    <script>
      function myFunction(a, b) {
        return arguments.length;
      }
      document.getElementById("demo").innerHTML = myFunction(4, 3);
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h1>JavaScript Functions</h1>
    <h2>The toString() Method</h2>
    <p>The toString() function changes the function into a string.</p>
    <p id="demo"></p>
    <script>
      function myFunction(a, b) {
        return a * b;
      }
      document.getElementById("demo").innerHTML = myFunction.toString();
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h2>JavaScript Arrow Functions</h2>
    <p>Using arrow functions makes writing code simpler. You don't need to use the "function" and "return" keywords, or curly brackets.</p>
    <p>Arrow functions are not supported in IE11 or earlier.</p>
    <p id="demo"></p>
    <script>
      const x = (x, y) => x * y;
      document.getElementById("demo").innerHTML = x(5, 5);
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h2>JavaScript Arrow Functions</h2>
    <p>Arrow functions are not supported in IE11 or earlier.</p>
    <p id="demo"></p>
    <script>
      const x = (x, y) => {
        return x * y
      };
      document.getElementById("demo").innerHTML = x(5, 5);
    </script>
  </body>
</html>

❮ Previous Next ❯

JavaScript Tutorial

JS Math

JS Versions

JS Objects

JS Functions

JS Classes

JS Async

JS HTML DOM

JS Browser BOM

JS Web APIs

JS AJAX

JS JSON

JS vs jQuery

JS Graphics