Best Way of Using JavaScript Functions in Your Code

It is impossible to write JavaScript code without using functions. JavaScript functions can be defined as procedures set to perform specific tasks.

Most functions are written according to a set standard. It states that the name of the function should be identified along with its parameters that are put in parentheses. If statements are used in the function, they should be put in curly brackets.

In this tutorial, you will learn how JavaScript functions can be created. You will also read about JavaScript function declaration and function expressions, which includes hoisting as well.

JavaScript Functions: Main Tips

• A keyword function is used for function definition.
• You can define a function via either function declaration or expression.
• Function declarations are hoisted, while function expressions are not.
• Functions can also be defined with a function constructor Function().
• Functions can be self-invoking.

Function Declaration vs. Expression

In our previous lesson we described the syntax that should be followed when declaring a function. As you do that, the function does not start running instantly: you create it for later use. For the function to be executed, it should be invoked.

function sampleFunction(a, b) {
    return a * b;
}

Note: Semicolons are used to separate executable JavaScript statements.
Since JavaScript function declaration is not an executable statement, it is not common to end it with a semicolon.

Function expression stands for a function which is stored in a variable:

var a = function (b, c) {return b * c}

Later on, the same variable is used as a function. The example below contains an anonymous function. As it does not have a name, it is called by the variable:

var a = function (b, c) {return b * c};
document.getElementById("test").innerHTML = a(4, 3);

Hoisting

JavaScript moves declarations to the top of the code in the browser by default. This is called hoisting.

What this means is, if you are using function declarations, you can invoke the function both before and after you declare it. In the example below, you can see that the function works whether you invoke it before or after it is declared. That is because function declarations are hoisted:

// Function is invoked before it is declared:
var a = sampleFunction(5, 10);
document.getElementById("test").innerHTML = a; // this works

function sampleFunction(a, b) {
    return a * b;
}

// Function is invoked after it has been declared
var b = sampleFunction(5, 10);
document.getElementById("test2").innerHTML = b; // this works too

It's not the case if you are using function expressions though: you must first define the function before you invoke it.

Take a look at our next example. You can see that the function is executed properly only when it is invoked after it has been defined. This is because function expressions are not hoisted:

// Function is invoked after it has been declared:
var a = function (b, c) {return b * c};
document.getElementById("test").innerHTML = a(4, 3); // this works

// Function is invoked before it is declared:
document.getElementById("test2").innerHTML = b(4, 3); // this does not work. Console logs "Uncaught TypeError: b is not a function".
var b = function (b, c) {return b * c};

Self-Invoking Functions

Functions can also be self-invoking. By using a specific syntax, which includes extra parentheses, you can create a function that doesn't need to be invoked elsewhere but rather invokes itself:

(function () {
    document.getElementById("test").innerHTML = "Good day!";
})();

In the example above, you see an anonymous self-invoking function. However, self-invoking functions don't have to be anonymous: you can name them as well.

Using a Constructor

As you already know, we use the function keyword to define a JavaScript function. Yet, you can also do it by using an integrated JavaScript function constructor Function():

var sampleFunction = new Function("b", "c", "return b * c");
document.getElementById("test").innerHTML = sampleFunction(5, 6);

However, this is not common practice. The example above can easily be rewritten as a regular function without the constructor:

var sampleFunction = function (b, c) {return b * c}
document.getElementById("test").innerHTML = sampleFunction(5, 6);

Objects, Values, Expressions

If we use the typeof operator on a function, it will return that it is a function. However, in JavaScript, functions are function objects, since they have properties and methods.

In the example below, we use the arguments.length property to find out how many arguments this function receives:

function sampleFunction(x, y) {
    return arguments.length;
}

In our next example, we use the toString() method as a JavaScript return function to present a string, representing a function's source code:

function sampleFunction(x, y) {
    return x * y;
}
document.getElementById("test").innerHTML = sampleFunction.toString();

JavaScript functions can also be used as values:

function sampleFunction(a, b) {
    return a * b;
}
var c = sampleFunction(5, 6);

You can use JavaScript functions in expressions, too:

function sampleFunction(x, y) {
    return x * y;
}
var z = sampleFunction(5, 6) + 34;

JavaScript Functions: Summary

• You can define a function via function declaration, which is hoisted.
• You can define a function via function expression, which is not hoisted.
• Functions can be defined with a function constructor.
• Functions can be self-invoking using appropriate syntax.
• JavaScript functions are function objects, which have properties and methods.
• Functions can be used as values.