Function
Tags: javascript, beginners
Published: 2020-04-15 12:27:37

---
title: Function
published: true
description: Function the base
tags: javascript, beginners
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/3tumwg0cudoe465rt4hz.jpg
---
#Declaring Function
We may declare a function in this way:
```javascript
 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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Keywords).

#Using Function
After declaring a function:
```javascript
 function greating(){
console.log("Hello There!!!")
}
```
We may (Invoke, use, call, execute) our function:
```javascript
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:
```javascript 
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.
```javascript
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:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/67mbe1pjtpmguhqq0yr0.png)
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:
```javascript
function greating = {
  console.log("Hello")
}
greating() // call after declaration
``` 
or:
``` javascript
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.
<mark>Is important call function after the decalration Don't rely on hoisting</mark>
#Declaring a Function with Function Expression
This is a function expression:
```javascript
/* 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.