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.
Latest comments (3)
Thank you so much for your feedback 🙏
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