(click anywhere to close)

[JavaScript] Functions

category: Website | course: JavaScript | difficulty:

Now that you know a few of the great data types, and what you can do with them, it’s time to introduce functions. You’ve been using them whenever I introduced a new method, and now I will explain what is behind all of these. As you’ll move further within the world of JavaScript, functions become increasingly important.

Functions are blocks of code with a name

This means that you can execute a group of statements simply by calling its name. The most important use of this is that you only have to write a piece of code once, and are able to re-use it everywhere across your project.

Declaring Functions

To declare a function, use the function keyword. Then, you must supply the name you want to give to your function - which follows the same rules as variable naming - and (optionally) the names of the arguments.

function someName(param1, param2, param3) { statements }

If your function doesn’t need arguments, you can just leave that part empty. Opening and closing the function properly with braces ( { } ) is very necessary though!

Calling Functions

A function is only executed if it is called. We’ve seen that a variable can be accessed by just typing its name, and functions are no different. But, to tell JavaScript we’re looking for a function, and be able to supply arguments, we need to add parentheses.

someName(value1, value2, value3);

//Calls to...
function someName(param1, param2, param3) {
	/* Code block here ... */

Execution Order

When a function is called, it first executes all statements within, before it continues executing all the statements that appear after it in the script that called it.

function setX(what) {
	x = what;

var x = 5;
console.log(x); //Prints 10

But this should be no surprise to you, because we’ve been using all these methods all along, which are also executed right on the spot.

Parameters & Arguments

There’s a subtle difference between the two.

  • Arguments are the actual values passed into a function, like 2000 or “John”.
  • Parameters are the names you give to these arguments, like someNumber and username. These behave as variables that only exist within that function

The order in which you supply arguments matches the order of the parameters in the function definition, but you don’t necessarily have to provide them all. You can supply less arguments, and everything executes fine, but the parameters you didn’t set will be undefined – which can cause errors.

The return Keyword

You’re probably wondering now: what about all those methods we’ve seen that return values? Well, they are just functions that execute some code, and then at the end return the result. This is done with the return keyword.

function doSomething() {
	return 10;

console.log(doSomething()); //Prints 10

When JavaScript encounters a return statement, it returns the value and stops executing the function. If you don’t want to leave the function early, you should of course always put the return statement at the end of the function. Saving the returned value is as simple as:

function doSomething() {
	return 10;

var x = doSomething(); //x is 10

Recursive Functions

One of the most powerful features of functions, is the fact that you can use them recursively. You can call a function within a function, and do that as many times as you want. This way, for example, you can very easily create a function that computes the factorial of a number.

/* Accepts a parameter n. 
If n is greater than 1, multiply n times the factorial of (n-1)
Else, if n is 1, we've reached the bottom (as factorials don't go lower than 1), and simply return 1
function fac(n) {
	if(n > 1) {
		return n*fac(n-1);
	} else {
		return 1;

var x = fac(7); //x is 7 * 6 * 5 * 4 * 3 * 2 * 1 = 5040

Using a recursive function will often allow you to do otherwise very complex or impossible computations with only a single function. Don't worry about understanding them completely now though, because there's still a lot you haven't learned (yet).

Alternative Syntax

The way we’ve discussed functions now, they are global. They can be accessed from anywhere within the script, which is of course nice, but requires more of the computer and can cause security problems. One way of solving this, is by saving a function inside a variable. All we have to do is switch around the order of the function keyword and the name:

var x = function(a,b) {
	return a*b;

console.log(x(2,2)); //Prints 4

Such a function is called an anonymous function, as it doesn’t have a name, but can only be invoked using variables that contain it. When we look at objects, we’ll see that methods work roughly the same way – they are anonymous, assigned to property names of the object, and don’t exist outside of it.

Do you like my tutorials?
To keep this site running, donate some motivational food!
Chocolate Milk