The Basics:

Functions are the building blocks of coding. Indeed, they have been used throughout this website.

There are different ways to "call" or operate a function:

  1. Self-declaring functions:

    2. When this page loaded, it also loaded an alert asking if you're ready to learn about functions. That alert was triggered by a self-declaring function. here is the code for it:


  2. Called functions:

Functions are reuseable blocks of code. If we have the correct <script> on my HTML page, we could reuse any of the function already created on this website.

On the Home page, we created a function to alert "Hello World!". Click the button to see it work again:

Within the HTML for the above button is this code: onclick="helloWorldAlert()" where helloWorldAlert() is the function we have called when we click the button. The same code is contained within the <button> element on the home page.


Everything depends on where the function is created. We need to tell the HTML page where to access the function. Thus, it is perhaps a good idea to put "global" functions that are available to all pages in the main .../scripts/index.js file, and those that are more "local" or specific within their own script file.


Composition of a function:

function functionName(parameter(s)) {

code to be executed;

}


Up to now on this website we have used functions without parameters.

Let's try a function with 2 parameters now:

Find the answer to Life, the Universe and Everything:

Insert a number:
Insert a number:

It is also possible to set a default value for a parameter of the function. We do this by simply assigning that parameter a value:

function functionName(a, b=7) {

code to be executed;

}

However, that default valu will be overridden upon calling the function with a diferent value, as follows:

Above, although the deafult for b is set to 7, the function will nonetheless return 2*2.

Default value are set when we want to be sure that a value is assigned to a parameter, that it will not be undefined.


Calling a function:

Unless the function is self-declaring, it needs to be called. Throughout this website, we have used buttons to call these functions. The code within these HML buttons contains the function call:

<button onclick="callFunction()">

We can tell the function what to run either within or outside of the function. But the function still needs to be called in order to run:

Result:

Above, we called the function and asked it to return(6*7); within the HTML element <span id="call1"></span>


Result:

Again, above, we called the function, but this time we used a button to do so.

In both cases, within the function itself is the code block to be executed

Note that both code blocks do the same thing (they both return 6 multipled by 7). However, since we tell the code to print the results OUTSIDE of the function in the first example, the code block and result are displayed automatically. We've made a non self declaring function self declare, as it were. Whereas, in the second example, we use the button to tell the function to run.


The return keyword:

Inserting return into the code will break the code at that point. It will run up to there, but no further:

Result:

Without the keyword return the code would have run 6*7 and 6+7. But since we asked the code to return at 6*7, it stops at that point. Use of the term is a good way to stop infinite loops from running. I wish more coders - especially those who write adverts were aware of this - I'm tired of my computer heating up because of the lack of this keyword!


()

Lets run the same piece of code, but this time let's call the function WITHOUT using the () at the end of the call:

Result:

When we call the function(), result is returned.

When we call the function, the code is returned.


Loops: Challenges
Functions: Function Expressions