Coding Bytes Part 3: Javascript Functions

This is part 2 in the Coding Bytes series, earlier parts are listed below:

Part 1
Part 2

What is a Function?

A function is in fact an object designed to perform a specific task, often on a repetitive basis.

Defining a Function

There are a few ways of defining a function, but we will focus on the most basic, so arrow functions/ ES6 functions will be overlooked for now.

    function nameOfFunction (parameters) {
        statement;
    }

As seen in the example above, the function keyword is used to define a function. The keyword is followed by a name of your choosing but it is normally good practice to describe what the function does - more on this below.

After naming the function we have the parameters in parentheses ( ) followed by our statement in curly braces { }. You can have up to 255 parameters defined separated by a comma. Parameters are similar to placeholders wherein the function knows to look for these to perform its intended use. You may encounter the term arguments used inter-changeably, but there is a slight difference, which is better explained in an example.

ℹ️ If you are using Chrome, you can try following along in the console.

Example

In our example, my friend is a carpet fitter who needs to work out the area of a room so he knows how much carpet is required. We know that area = length x width, so how do we put this in a function?

function area (length, width) {
  return length * width;
}

In the example, our function is named area and the parameters are length, width. You can see a return statement which stops the execution of the function and tells the function what we are expecting to see as a response. In the statement, we are asking for the length and width to be multiplied. In short, the task of our function is to multiply the parameters.

Invoking a Function

Invoking a function is just a fancy way of 'calling' a function. To call a function we just need to reference it by its name followed by parentheses. We can refer back to our example above and invoke the area function.

area(10, 5);

As you can see, we call the area function but you will notice the 10,5 in the (). The two numbers represent the length, width we mentioned earlier, otherwise known as parameters. But here, because they are data being given to the function - we call them arguments. Hopefully it is easier to see the difference between the two now 😃 .

All we are saying in the invocation above is, run the area function and use 10,5 as arguments. As we know our function is set to multiply the two arguments, resulting in the output of 50. Congratulations 🎉 we created and invoked our first function.

Further Learning

This was just a very basic function, but you can do so much more! To practice further, think about where a function can come in handy and try to create one. There is another example below, try to understand what it may do before copying it in to your console.

function sayHello(name, age){
  console.log(name + " is " + age + " years old.");
}

You will need to research what console.log() does, and remember strings are wrapped with " ". Good Luck!

Thanks for reading. To keep up with my coding journey come say hi 👋 on twitter or on our #devNewbie Discord server where we have a friendly group of learners sharing their experiences.