JavaScript Functions: A Beginner’s Guide

JavaScript functions are one of my favourite inventions, and chances are — you’ll love them too. In other programming languages functions are called procedures, methods, among other things, but they serve the same purpose in those languages — organizing your code into easily accessible modules that save time.

JavaScript functions perform a task every time you call or invoke them. For example, that task could be to print ‘Hello world’ to the screen or to calculate something. Functions make it easy for you to execute complex mathematical formulas without manually typing them every single time you need them.

For example, you could use a function to convert celsius to fahrenheit, as shown below (you can try out the code and experiment in a JavaScript code interpreter). To highlight the parameters and their corresponding variables, I made them red.

function convertToFahrenheit(celsius) { //Function declaration
    var fahrenheit;
    fahrenheit = (celsius * 9) / 5 + 32;
    console.log(fahrenheit + " degrees Fahrenheit.");
}

convertToFahrenheit(25); //The function call or invocation.

The ‘celsius‘ that you see in parenthesis (brackets) right after convertToFahrenheit function declaration is a variable declaration (learn how variables work), it just doesn’t need the var statement in this case. It contains the temperature figure that we converted to fahrenheit, which we passed to it as a parameter. Parameters are sometimes called arguments in other programming languages. A call to a function will only execute the code in the two braces/curly (these: { }) brackets following the function declaration.

We invoke or call the function by simply typing its name and entering the parameters it requires in the parenthesis. In the last line, we enter a parameter in degrees celsius (25), and it passes that to the function so it can convert it to fahrenheit.

We can also enter more than one parameter in JavaScript functions, as shown below. Bear in mind that parameters must be typed in the exact same position as the variable declarations to avoid errors, as shown below.

function addNumbers(parameter1, parameter2, parameter3) {
    var sum = parameter1 + parameter2 + parameter3;
    console.log(sum);
}

addNumbers(10, 20, 30);

If you haven’t already guessed, ‘parameter1’ is 10, ‘parameter2’ is 20, ‘parameter3’ is 30. If you wanted to pass the number 50 to ‘parameter2’ instead of 20, you would write the function call like this:

addNumbers(10, 50, 30);

Passing Objects As Parameters To JavaScript Functions

In JavaScript, functions can be passed objects as parameters, so you’re not limited to numbers or strings! For example, a JSON object can be passed to a JavaScript function in the same way as we did above, as shown below.

var myObject = {Genus: "bombus", CommonName: "bumblebee"};

function passMeAnObject(sampleObject) {
    console.log("Genus: " + sampleObject.Genus + ".");
}

passMeAnObject(myObject);

In the example above, ‘myObject’ is being passed as a parameter to the function ‘passMeAnObject’. Once it has been passed, you can do whatever you want with it, which is why programmers do this. This feature of JavaScript functions enables you to make objects and other variables accessible to multiple, specific classes without declaring them globally.

If you wish, brief functions can be written on one line to save a little space, as shown below.

function myFunction() { console.log("Hello.") }

myFunction();

You can also declare a JavaScript function like a variable, as shown below. The following example demonstrates how you can make a variable that acts as a calculator!

var functionVariable = function(firstnumber, secondnumber) {
    return firstnumber + secondnumber;
}

console.log(functionVariable(10, 20));

To be frank, this just places the result of 10 + 20 in functionVariable. You can use it just like a variable (because it is a variable), but you’ll have to include the parenthesis and pass it parameters. The rules that apply to the functions shown above it apply to this as well.

Facebook Comments

comments