Functions are created to carry out various tasks. For example you might want to calculate the total cost of your shopping or write the same codes several times in different parts of your program.
It would save so much time calling on a function to carry out these tasks.
The block of codes in a function can be called from anywhere in your program.
Inside the parentheses you can have zero to a number of arguments, which are seperated by a comma. Arguments are the values of the variables.
Inside the curly brackets is the statement(s) that is going to be executed.
There are two variable scopes Local and Global.
A variable declared inside a function is only accessible to that particular function, which means the variable has local scope.
The global variables are arg1=6 and arg2=5 because they are outside the function.
The local variables are arg1=10 and num=16 because they are inside the function.
It does not matter if you declare a variable with the same name as the global variable inside your function.
The local variable arg1=10 is only accessible to that particular function.
In the example below we have a function called areaOfARectangle, which calculates the area of a rectangle. The function has two arguments called lenght and height.
Note: The variables l and h are global variables they have been declared outside the function. The values assigned to the variables l and h are passed to the arguments length and height.
Once a function has been created you then have to call the function. The function is called inside the HTML body tags. Remember! The values assigned to the variables l and h will be passed to the arguments length and height.
A function can return a value. Any statement after the return statement will not be excuted. In the example below we have created a function called squareRoot, which calculates the square root of a number. The variable x is declared outside the function, which means it has global scope. The function is called inside the html body tags.
We can even call the squareRoot(x) function with a click of a button.
Click the button to display the answer inside the text box.
In the example below, a viewer can enter the length and width of their choice. Once the button is clicked the area of a rectangle will be displayed inside the answer text box.
There are functions that allows you to convert the value of a string to a number or vice versa. Let us have a look at some:
The parseInt() function lets you convert a string to an integer. The value of the string conversion must be inside the parseInt parenthesis with quotation marks.
The parseFloat() converts a string to a decimal number.