JavaScript Basis — Functions

Functions are one of the fundamental building blocks of JavaScript.

A function is a JavaScript method.

It is a set of statement that performs a task or produces a value.

It is executed when it’s invoked(called) by something.

Function Definition

A JavaScript Function is defined or declared using the function keyword followed by:

• The name of the function
• A lost of parameter (optional) enclosed in parentheses ( ). Multiple parameters are separated by commas ( , )
• The block of codes or the statements enclosed in curly braces { }

Here is the synthax,

function function Name(parameter1, parameter 2, parameter 3) {

Codes or statements to be executed

}

Parameters act as placeholder variables inside the function.

When the function is called, the variables are assigned to the arguments(values) provided when the function is called.

// defining function
function writeText(str) {

document.getElementById("demo").innerHTML = str;
}
// calling function
writeText("Hello World!");

In the example below the function task is to add two numbers and then print the sum.

function addNumbers(num1, num2) {
var sum = num1 + num2; document.getElementById("demo").innerHTML = sum;
}
addNumbers(5, 6);

Calling A Function

Functions will only be executed when they are called or revoked.

A function can be called inside a JavaScript program, just like what we did in the previous examples.

A function can be called when an event happens,most commonly when a button is clicked.

function addNumbers(num1, num2) {
var sum = num1 + num2;
document.getElementById("demo").innerHTML = sum;
}

<p id="demo"> Sum will be printed here. </p>
<button onclick="addNumbers(2, 5)"> Add </button>

Before we move on, please be reminded that Function does not require parameters

In the example below the functions only task is to show a dialog box:

function showDialog() {

alert(“Hello World”);

}

The Return Statement

The return Statement is used in a function to stop it’s execution and return a value to the function caller.

For example, the addNumbers() function below returns the sum of it’s arguments to the functions caller.

Then, the function caller prints the return value to an element.

function addNumbers(num1, num2) {
var sum = num1 + num2;
return sum;
}

/* the function caller */
document.getElementById("demo").innerHTML =
addNumbers(2, 5);

Function Scope

Variables declared inside a function are called Local Variables

Local Variables can only be used inside the function where it was declared.

If a local Variable is used outside, the values data type is undefined.

Since local variables are only recognized inside their functions, variables with the same name can be used in different functions.

Local variables are created when a function starts, and deleted when the function is completed.

Global variables

Global variables Can be used by any function.

Global Variables are variables decleared outside a function.

For example:

The fruit Variable below is decleared outside a function. Therefore it can be used by any function.

var fruit = "apple";

function myFunc() {
document.getElementById("demo").innerHTML =
"My favorite fruit is " + fruit;
}

Why Use Functions

Functions in JavaScript are just like tools in real life. They make coding easier.

Instead of writing a code block over and over again, we can just reuse the same code many times.

BONUS

The function below converts kilometer to miles.

function toMiles(kilometer) {
var miles = kilometer * 0.62137;
return kilometer + " kilometer/s " + "equals " + miles + " miles.";
}

// we can use the function as many times as we want
alert(toMiles(3));
document.getElementById("demo").innerHTML = toMiles(10);
</script>

With this, we’ve been able to understand what JavaScript Functions are, difference between Local Variables and Global Variables and how to make good use of them.

Thanks for reading!

Remember: keep trying , you can do it!!!