JavaScript Functions + Hoisting

Introduction

JavaScript functions are set of instructions that execute together to perform a task. A function may have one or more parameters or inputs. A function may also return a value.

Javascript provides three distinct ways of defining a function i.e. function declarations, function expressions and arrow functions.

We will take a look at how we can use these three concepts to create JavaScript functions.

Function Declarations

Let's define a function as a function declaration that accepts a single number parameter and returns a boolean.

function greaterThan100(num) {
    return num > 100
}

greaterThan100(99) // returns false
greaterThan100(101) // returns true

Function declarations consist of the function keyword, an identifier (a name), a parameter list (the parenthesis) and finally a code block.

The parameter list may be empty and the function does not have to return a value.

Function declarations are hoisted. Hoisting is done by the interpreter and it's the process of moving function declarations to the top of their scope before any code execution. This means that functions defined as declarations can be used before they are declared.

greaterThan100(99) // returns false
greaterThan100(101) // returns true

function greaterThan100(num) {
    return num > 100
}

The code above does not throw any exceptions through the magic of hoisting!

Function Expressions

Function expressions are very similar to function declarations. The main difference between a function expression and a function declaration is the name of the function. Function expressions may omit the function name when declaring the function. Functions without a name are called anonymous functions.

const greaterThanFive = function (num) {
    return num > 100
}

greaterThan100(99) // returns false
greaterThan100(101) // returns true

Function expressions do require the function keyword, a parameter list within parenthesis and a code block which may return a value.

Function expressions may be used as IIFE (Immediately Invoked Function Expressions) which, as the name suggests, execute as soon as they are defined.

(function(){
    console.log("Weeeeee!!!")
})()

Function expressions are not hoisted. A function expression must be declared before it can be executed.

Arrow Functions

Arrow functions are very similar to function expressions in that they both declare an anonymous function.

const greaterThanFive = (num) => {
    return num > 100
}

greaterThan100(99) // returns false
greaterThan100(101) // returns true

Arrow functions use the special \=> symbol. Arrow functions also have a parameter list and may return a value.

Arrow functions may also be used to build IIFE.

(() => {
    console.log("Weeeeee!!!")
})()

Arrow functions are not hoisted and thus must be declared before execution.

Conclusion

JavaScript provides a variety of ways to declare functions. Personal preference may influence your choice of function definition at times but at other times there is an appropriate choice. We will dive into this more later when we look at the use of this and how that influences your decisions.

Happy coding!!!