What is a JavaScript function ?

Plainly, it is a piece of code that is used to perform an action.

As with JavaScript in general, at first can seem difficult, but you are able to get the hang of it quite quickly and can become proficient in no time.

There are many functions that come built-in into most platforms, such are go; alert; prompt or confirm, but you are also able to add your own functions if you so desire.

It is advisable to put your JavaScript at the end of your page, as it will open in sequence. This will give the allure of a faster loading time and make for a much seamless program or website. This would become quite obvious if you were to use your JavaScript in browser, which is also advisable.

Declarations:

In creating a function, we first need to create a function declaration, like this:

While a declaration is not necessary it is preferable as to create a DRY (don’t repeat yourself) code, that will not only make the script run faster, it will also require much less lines.

After the keywords function we are placing the function name (’showMessage’’ in this case) and then we can place the parameters in the brackets.

The alert action prompts an alert on the page with the message we have chosen. After this, we can easily call up the function by name showMessage().

In this case, we have called upon the function twice, which will prompt the alert action twice, without the necessity to enter the whole text multiple times. In this case, it is also possible to change the value of the text in the main line, which will change the function globally, preventing inconsistencies.

Local Variables

A local variable is simply a variable that is usable only inside the function in which it has been declared, as seen here:

Outer Variables

Outer variables are those which lie outside the function and can be used and freely modified by the function. Example:

This helps create the DRY code and to make changes if necessary in all functions. Take notice that the outer variable will be used only if there is no local variable available. A local variable will always shadow an outer one, which can create problems if we forget to use the let command.

If we use let command to assign value to an internal variable, the outer variable will not be modified.

Global variables

It is possible to declare variables outside any function, which can be used and seen in all functions and throughout the script. Global variables will not be seen if they conflict with the local variable that shadows it.

Use global variables only in cases where it is of utter importance for the variable to be seen in every part of the script. In newer codes,making a lot (or any) global variables is frowned upon as it impacts the versatility of the code (euphemism for: makes more bugs).

Parameters

Inside the brackets we can insert different instructions on what we want from the function to perform. These are called function arguments.

Here we can see how the from and text arguments figure in the function:

In this case the function has been called in lines (*) and (**), meaning that the variable has local parameters which the function uses.

The function always modifies a copy of the value (here from). Hence, the real value of the variable remains same. In this case, it remains as "Ann"

Default Values

It is possible not to provide any parameters and to leave the value as undefined.

In our previous example we can only insert one line as showMessage(˝Ann˝) what would lead to the result of Ann:Undefined. This is not an error, but as there is no text the function will presume that text=== undefined.

Only thing we need to do to add text is to insert it after the =.

Obviously, the text can be more complex than a string in this case.

Returning a Value

The easiest example of returning a value back to the calling code is a function which returns sum of two numbers:

Using return without the function will force it to exit immediately.

Function Naming

There are some agreed upon rules that make reading of the code simpler for other people.

As functions are actions, they are usually named with a verb, a short one, which explains what the function does. Examples:

This concludes our primer tutorial on JS functions. Thanks for reading!

---

Posted on Utopian.io - Rewarding Open Source Contributors

---