Thursday, 3 July 2014

Chapter 12: JavaScript Functions

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.