Function

Declaring Function

We may declare a function in this way:

 function nameOfFunction() {
// task to do
}

"function" is a keyword that tells javascript that we are defining a function.
The function name follows the same rules of the variable name:
-Just one word.
-We may use letters, numbers or underscore.
-We can't begin with numbers.
-We can't use reserved keywords.

Using Function

After declaring a function:

 function greating(){
console.log("Hello There!!!")
}

We may (Invoke, use, call, execute) our function:

greating() // we add "()" after the name of our function

The Indentation

Everything between {...} is a block of code.
We may indent our code through tab or space in our keyboard;
It's up to us decide what is better for us, is important to be consistent.

function greeting() {
/*this space is indentation*/ console.log("Hello there!!")
}

Parameters and Arguments

Parameters and Arguments are optionals and not required:

function greeting(name /* name is a parameter */) {
  console.log("Hello " + name)
}
greeting("Iris"/* Iris is the argument */)

We may use as many parameters and arguments as we need by comma separated;
the parameter one is referring to the argument one and so on.
In the real life we use the world argument also for parameter but according to Kyle Simpson the names matters.
We may pass as parameters of arguments primitive(string,numbers, bolean) or object(function, array, object).

The Return Statement

The return statement stop the execution of the block of code in the line where we declaring it.

function greeting(name) {
  return "Hello " + name // end of the execution
  console.log("Hello I will not be executed") // never executed
}

greeting("Iris") // "Hello Iris"

If a function return is empty the result will be undefined.

JavaScript can only pass around two types of values.

Everythings that is not primitive value (string, number, boolean) or object(array, function, object), must be evaluated before.

Flow of a Function (reviewed 😎)

Now we have a look at the flow of a simple function in order to understand well what happens:

When we don't understand how a function work we may refer to the flow of that function in order to understant how it works.

Hoisting

Hoisting is simple but sometimes may be confusing.
if we call a function after its declaration or before is the same thing, because before javascript runs our script, puts every expression declaration on top of our code, so if we write:

function greating = {
  console.log("Hello")
}
greating() // call after declaration

or:

greating() // call before declaration

function greating = {
  console.log("Hello")
}

is the same thing because hoisting before running our code put all function declarations on top of our code.
Is important call function after the decalration Don't rely on hoisting

Declaring a Function with Function Expression

This is a function expression:

/* We may omit the name of a function*/
/* this is call anonymus function*/
const greeting = function() { 
console.log("Hello There")    
}

The function expression can`t be affected from hoisting so we can't call them before the declaration phase.

Comments

[Aleksandr Hovhannisyan]

This is not how function invocations work:

// First javaScript read the declaration function with name timesTwo
function timesTwo (num) {
  return num * 2
}
/*  Second read the declaration variable with name result and see that 
 the value hold is a function timesTwo */
const result = timesTwo(8)
/* Third javascript came back and replace the parameter num with the value 8  */
function timesTwo (8) {
  return 8 * 2
}
function timesTwo (8) {
  return 8 * 2 /* <= Fourth javascript run the block of code that result
   16 */
}
/*  Finally replace the expression (function) in the right side
 of the variable with our result 16 that became the value of 
our const result */
const result = 16
console.log(result) // then we log the result == 16

You might want to look into stack frames to understand what's really going on. This part is especially misleading to beginners:

/*  Second read the declaration variable with name result and see that 
 the value hold is a function timesTwo */
const result = timesTwo(8)
/* Third javascript came back and replace the parameter num with the value 8  */
function timesTwo (8) {
  return 8 * 2
}

[GiandoDev]

I am sorry I will try to write it better in the mean times for you this is better :
function myFunction(a, b) {
return a * b;
}
myFunction(10, 2); // Function invocation, will return 20

//optional parameters (es6 only)
//allow to set optional parameters

function myFunction(a, b = 10) {
return a * b;
}
myFunction(1); // Function invocation, will return 10
myFunction(1,5); // Function invocation, will return 5

[GiandoDev]

Thank you so much for your feedback 🙏