Understanding functions, their usage and all you need to know about functions in JavaScript

Introduction. What are functions?

Functions are one of the most essential concepts in JavaScript. It is the fundamental building block of the programming language.
Let’s assume you have a machine that requires water and makes an amazing tea. Thinking about this machine we can say that the water it requires is the input that we give and the tea is the output that we get. This example explains correctly what functions do as well.
We give some data to the function and the language processes that data inside the function. We can do anything with that data inside the function and after all this, it outputs something or returns some data.
Functions are very useful as with them programmers do not need to write the code several times and waste their time. Once they create a function, they can reuse it whenever they want.
Let’s create function ourselves!

As you can see the structure of the function is very simple. Firstly there is the declaration of the function which is the first-word “function”. Then we give a name to a function which is “fullName” in our case. After that is the console.log denotation which is the toll giving the output we want.
This is the simplest way to use functions and as I mentioned before functions allow us not to use the same code several times. We can give different inputs(values) every time and it will correctly give us the desired output(result). In other words we can easily play with functions.

How we can play with functions

There are three ways we can introduce functions.
The first way is Function Declaration: Function Declaration is the traditional way to define a function. It is somehow similar to the way we define a function in other programming languages. We start declaring using the keyword “function”. Then we write the function name and the parameters.
Here you can see an example of it.

The second example is function expression: Function Expression is another way to define a function in JavaScript. Here we define a function using a variable and store the returned value in that variable.
Below is an example that illustrates the use of Function Expression.

Finally the last, Arrow Functions: Arrow functions are been introduced in the ES6 version of JavaScript. It is used to shorten the code. Here we do not use the “function” keyword and use the arrow symbol.

This is the shortest and easiest way of introducing functions.

The visibility scope of functions

Scope determines the visibility or accessibility of a variable or other resource in the area of your code. 2 main types of scopes are available in JavaScript, Global and Local

Global scope
There’s only one global scope in the JavaScript document. The area outside all the functions is considered the global scope and the variables defined inside the global scope can be accessed and altered from any other scopes.
Local scope
When we create a block-like function, if-else/switch conditional, for/while loops we are using the curly brackets {…}. The area inside the curly brackets {…} is the local scope. Variables declared within the local scope are not accessible outside the scope.

Here is the end of this theme. Hope you understood each of the topics. See you!