Functions
As we start to add more code
we want to make sure that it doesn’t get messy and hard to read. So as it all
languages we’ll going to break apart large element in JavaScript into smaller
reusable modular pieces. All we doing is taking several statements, wrapping
them up and giving them a name, and that means we are creating functions. To
make one we take the code that we want to enclose, no matter the size of the
script. We surround with a curly braces to create a code block to say where
this function starts and ends. We use the word function, we also give it a
name. You decide what to be the name, but you have to remember but you can’t
start the name of your function with number
Example:
<html>
<head>
<title>Untitled
Document</title>
</head>
<body>
<script>
function anyFunction() {
console.log("This is
function example.");
}
</script>
</body>
</html>
After the function is
declared, we can call it.
We can use the name of the
function with the opening and closing parentheses ( always use open and closing parentheses when you declare function ),
semi-colon because it is a full statement. And all the code inside the function
will be executed. Now note that as soon as you put your code in a function it
won’t execute, it won’t run unless you explicitly call it.
Its good practice to define
your functions before you calls them.
Example:
<html>
<head>
<title>Untitled
Document</title>
</head>
<body>
<script>
function anyFunction() {
console.log("This is
function example.");
}
anyFunction();
</script>
</body>
</html>
Functions with parameters
When you call a function you can pass values to it
named arguments or parameters.
We can create 2 types of arguments – single and
multiple which is separated with comas.
function myFunction(parameterX, parameterY, parameterZ)
{
// code to be executed
}
Example:
<html>
<head>
<title>Untitled Document</title>
</head>
<body>
<script>
function anyFunction( x, y, z) {
var calc = x-y+z ;
console.log(calc);
}
anyFunction(20, 10, 5);
anyFunction(40, 27, 4);
</script>
</body>
</html>
When the function is called it receives values called
arguments.
The parameters and the
arguments must be in the same order:
var a = myFunction(x, y,
z);
You can use the arguments as local variable when they
are placed inside the function.
Often the arguments
are used to compute a return value.
JavaScript return
We can optionally return values. Not only can a
function accept information, but we can also send some back. If you want to
return information all you need to do is to use the word return, and then pass
back a variable, string, number, it’s up to you.
Example:
<html>
<head>
<title>Untitled Document</title>
</head>
<body>
<script>
function myFunction( x, y, z) {
var calc = x-y+z ;
console.log(calc);
// we can return values
return calc;
}
myFunction(20, 10, 5);
myFunction(40, 27, 2);
</script>
</body>
</html>
Parameter Mismatch
One of the usual issues with the functions to take
parameters is what happens if you get something wrong with them. For example if
you pass the wrong amount of information in them.
In the below example we add an extra information, and
when the code is executed the value 200 would be ignored by JavaScript.
Example:
<html>
<head>
<title>Untitled Document</title>
</head>
<body>
<script>
function myFunction( x, y, z) {
var calc = x-y+z ;
console.log(calc);
}
myFunction(20, 10, 5, 333);
</script>
</body>
</html>
But what happened if I pass in only 2 values and we
have 3 parameters?
And what will happen is that the missing one will be
passes as undefined. The variable z will be the undefined one.
Example:
<html>
<head>
<title>Untitled Document</title>
</head>
<body>
<script>
function myFunction( x, y, z) {
console.log( x + y + z);
}
myFunction("Hello ","World ");
</script>
</body>
</html>
variable scope/ Local variable
Variable
scope means where this variable is visible, what part of your code can see it,
and what part can use it.
Example:
<html>
<head>
<title>Untitled
Document</title>
</head>
<body>
<script>
function
myFunction() {
var
x = 500;
console.log(x);
}
myFunction();
console.log(x);
</script>
</body>
</html>
In
the above example in function myFunction() we create a variable named x and we
call it, and then it will input 500. But if we try to use this variable outside
of the function the result will be undefined, x doesn’t exist outside the
function. In this case the variable x is called Local variable, because we use
the word var inside the function.
But
if we want to create a variable that is visible for the entire file of code
what you have to do is to define the variable x outside any function. And then
the variable becomes a Global Variable.
