Learn how to use Javascript functions to improve the usability of your website

Functions in javascript are a piece of code written in a section defined by a name, whose objective is the execution of a specific task, and sometimes repetitive. This function name is defined by the user and must be related to the task name, always described after the default name in javascript "function".
After the predefined name function, the name of the function is established followed by double parentheses, something to identify that it is a function, and then the double braces will be written, inside which the javascript code related to the task will be written.

Function example:
function say_hello(){
   console.log("hello");
}
say hello(); // Here we execute the function

Within a function you can define local variables that are only accessible within the function, or global variables that are variables defined outside the function and that can be accessed from within the function.

Example of global and local variables:

const message = 'Hello World'; //global variable
function say_hello(){
   console.log(message);
   const message_loc = 'hello loc'; //Local variable
   console.log(message_loc);
}
say_hello(); // Here we execute the function
console.log(message); //Display the value of the global variable
console.log(message_loc); //Does not show the value of the local variable as it is inside the function

Parameters in Functions

They are data introduced within the functions that have the objective of giving one, or several values, so that the function can be used in a more generalized environment. 

These data are usually entered inside the parentheses, after the name of the function, to later be used within the same function.

Example of parameters in functions:

function sum(a, b){
   console.log(a+b);
}
sum(2,5);//Execution of the sum function of the parameters 2 and 5, resulting in the sum of 2+5

The nice thing about parameters is that we can use the sum function over and over again for different values.

Example:

function say_hello(message){
   console.log(message);
}
say_hello('hello');
say_hello('hi');
say_hello('h e l l o');

You can also use the predefined word 'return' inside the function to return the desired value.

Example:

function say_hello(message = 'name'){
    return `Hello ${message}`;
}
say_hello(); //Get the value "Hello name"

Anonymous Functions

They are javascript functions without a name that are associated with a variable, to which parameters can be assigned or not.

Example:

var sayHello = function(name = 'John'){
     return 'Hello ' + name;
}
sayH();
sayH('Jesus');

In anonymous functions, a reduced syntax can be used as follows:

var sayHello = (name) => `Hello ${name}`;
console.log(sayHello('Albert'));

You can also extend the anonymous function by using braces and including "return":

var sayHello2 = (name) => { return `Hello ${name}` };
console.log(sayHello2('Albert'));

← Previous Chapter - Next Chapter →