In Javascript, and in any other programing language, functions are one of the most important building blocks. Basically, you can’t do anything without them, therefore it is super important to know as much as possible about them. This article will take you into the world of Javascript functions – you will learn (almost) everything you need to know about them. Let’s get started.
1. You can declare a function with a function declaration with a keyword “function”
This one is simple – just use the keyword “function” and the function is declared. Of course, your function should have a name. If you are using the function declaration, it is important to put the function keyword the first on the line. In practice this looks like this:
function calculate(){}2. All functions are hoised
When something is hoised, it means it is prioritized or moved to the top by default. Of course this concept works in the function's scope.
In relation to the hoising concept, we can use a function before it's declared because function declarations are hoised to the top of their scope. In practice this looks like this:
calculate();
function calculate(){}3. Except for those functions that are created using function expressions
But what is a function expression? We are dealing with a function expression when the function keyword - the one we use with function declarations - is not the first on the line. One more interesting thing about function expressions - we can use a name for a function and in this case, we have a named function expression, or we can apply a function expression without a name and in this case, we have an anonymous function expression. So, with function expressions, a name of the function is not required. Perhaps it is the easiest to show with an example what function expressions look like:
var calculate = function() {};So, what's up with hoisting when working with function expressions? Hoisting doesn't work with function expressions. For this reason, you have to first declare them and afterward function expressions can be invoked. Below you will find an application of the hoisting rule with a function expression where javascript cannot access the function before it's initialized.
calculate();
//Uncaught ReferenceError: Cannot access 'calculate' before initialization
var calculate = function() {};So, a function expression first has to be defined, and then it can be invoked. These types of functions are called Immediately Invoked Function Expression (IIFE).
4. You can even create a function with an arrow syntax
In practice a creation of function with an arrow syntax aka arrow function looks like this:
var calculate = () => {};When you want to create an anonymous function expression, you can use an arrow syntax. However, it is important to remember that the same rule applies to arrow syntax as it does with a function expression - you cannot use an arrow function before it's created. Therefore, there is no hoisting concept for functions created with an arrow syntax. We can use an example from a previous paragraph (except we will use an arrow function) to show javascript cannot access an arrow function before it is initialized.
calculate();
//Uncaught ReferenceError: Cannot access 'calculate' before initialization
var calculate = () => {};4. Autoexecution is possible after the functions' expression is defined
In the third paragraph, we talked about Immediately Invoked Function Expression (IIFE), which is when a function expression is invoked but has to be defined first. Let's take a look at an example
(function calculate(){
console.log('autoexecute');
})();
//'autoexecute'5. ! operator can be used before the function to convert it into a function expression
We've said it all in the title - you can use ! operator before the keyword function and javascript will convert it into a function expression. Why would you need that? One reason could be because function expression can be auto executed, as explained in a previous paragraph.
!function calculate(){
console.log('autoexecute')
}();6. You can use functions as methods on objects and use this keyword
Let's have a look at a following example, where the calculate property, which is a method property and keeps a function.
var obj = {
calculate: function(){}
}
obj.calculate();
Let's have a shorthand syntax for an example above:
var obj = {
calculate(){}
}When we use a function as a method on an object, we need to somehow access that object. For this purpose we use the "this" keyword.
The this keyword gives access to the object where the function is used as a method.
If you want to read more about function vs method, please read the following article.
7. If you use arrow functions, you cannot use them as methods as you cannot apply this keyword
As we explained in a previous example, when we apply functions as methods, and we need the this keyword to access the properties of the object they are attached to. However, if we create arrow functions (functions that are created with arrow syntax), you cannot use them as methods.
Functions created with the arrow syntax do not have their own this, they should not be used as methods. The main purpose of arrow function is to create inline functions, which is handy when the function body has one expression. Perhaps the main advantage of arrow functions is the ability to compose short inline functions.
Here's an article that goes a bit deeper into arrow functions vs traditional functions.
8. Functions are objects in JavaScript, which means they are a dynamic collection of properties
Since functions are objects in javascript, functions also inherit properties from the Function.prototype object, and this in turn inherits from the Object.prototype object.
In JavaScript, functions are first-class objects, because they can have properties and methods just like any other object. What distinguishes them from other objects is that functions can be called.
9. You can send functions to other functions as arguments and you can also return functions from other functions
As said before functions are objects and so like other objects they can be sent to and returned from functions.
10. Functions can be closures
But what is a closure? A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment). In other words, a closure gives you access to an outer function's scope from an inner function. Thus, a function can be declared inside other function and can have access to variables from the outer functions. This is not really a beginner's topic, but if you would like to know more about it, you should read an article about closures vs function in javascript.