JavaScript Fundamentals: Function Overview

Series Introduction

Often as developers we get a bit starry-eyed by the new and exciting parts of programming. For me and many others JavaScript is our language of choice and in the JS world there's always a new framework to get distracted by. Last year, frameworks like ReactJS, VueJS and Angluar dominated the headlines and firmly cemented themselves as the goto frameworks.

But, while the work all these frameworks are doing is exciting, there's one very important thing often forgotten about... The basics.

How often do you find yourself doing something, not because you understand how or why. But, because it's that's how it's done?

So, in this series of posts, I want to strip back all of the fancy frameworks, new technologies, and applications and instead look at the pure, bare-bones language and explain the concepts, methods and properties of that language, hopefully in a way everyone can understand.

First on my list is Javascript but I also want to focus on other front-end web development languages like CSS and HTML. If you have any suggestions for what areas to tackle first in there languages just comment them below or tweet them at me.

P.S. If you think I could explain something better or I have missed something out then please comment or open an issue on the GitHub page for this post and I'll be sure to revisit it.

Function can be difficult but they don't need to be

One of the biggest topics in JavaScript that is miss-understood is functions. How to define them? The different types? And, what actually makes a function, a function. So, I've decided to tackle these first with a mini-series of posts that cover the following topics on functions:

• Understanding a function (POST 1)
• The different parts of a function (POST 1)
• How to define and call functions (POST 1)

Understanding a function

Simply put a function is a block of code that can be called at any point to carry out a task that is defined within the function.

To someone who isn't a developer that may sound gobbledygook but in reality, it is quite simple. Let's take a look at an example.

1function example() {
2  console.log("I'm a function! :)";);
3}
4
5example();

Here we define a function called 'example' and inside the function we tell it to log the message "I'm a function! :)" to the console.

After the function definition, we see:

1example();

This is how we run (or, what may also be called 'invoking' or 'calling') the function. Without this line, we have defined the function using the 'function' keyword but we haven't called the function. So, whatever was put in between the '' of the function won't get processed.

It's like calling up a mechanic for a quote on a vehicle service. You have given them in the instructions on what work needs to be done but you have invoked them to start. But, once you say 'yes, please do the work', we have invoked the function and the work gets carried out.

Making a function

We briefly looked at the different parts of a function above but let's break down another example function down to better understand what really makes up a function and how we can define one.

Take a look at this function.

1function addition(x, y) {
2  return (x + y;)
3};
4
5addition(2,3);

There are 5 key aspects that make up a function, these are:

• The 'Function' Keyword
• Name
• Parameters & Arguments.
• Function Body
• Function Call

All 5 of these aspects aren't required in all scenarios but we will cover these situations when they come up.

Some of these you may be able to point out from the last section, but it pays to break them down individually and really understand what is happening.

Let's start with the function definition which consists of:

• The 'Function' Keyword
• Name
• Parameters & Arguments
• Function Body

The 'Function' Keyword

The function keyword is what begins the entire process, once we type the word 'function' the machine expects a function name, parameters and a code block follow it. Essentially, once we type 'function' the machine expects to see a function definition made.

Name

Following on from the 'function' keyword we have the 'name'. So, looking at our code example from earlier:

1function addition(x, y) {
2  return (x + y;);
3}
4
5addition(2,3);

We used the 'function' keyword to tell the machine we're going to define a function. Following this, there is the word 'addition', this is the name of the function. In reality we could call a function whatever we want as long as sticks to JavaScript casing rules (primarily camelCasing). But, it makes sense for readability to name the function a sensible name that makes sense to both yourself and anyone else who may read the code.

So, in our case we called our function 'addition' because it adds 'x' and 'y' together. But, we could have easily called it 'additionOfXAndY' or some another name, it really depends on how many functions you have and how specific you want to get with your naming conventions as to what you call your functions.

Simply, you can call your functions anything you want, but for your own sake it's best to give them a name that describes what it does.

Parameters & Arguments

Parameters are the values defined in the '()' of the function following the name, so in our example we passed in the parameters 'x' and 'y' which where then used inside the function body to perform the calculation.

Now, if you look at the bottom of the code example, at the function call, we placed 2 values inside the '()' these are known as arguments.

You will often here Parameters and Arguments used interchangeably but this isn't the case, they are actually different. Parameters are what we tell the function to expect to receive when it's called and arguments are the values we pass into the function when we call it. A small difference but a key difference that you should be aware of.

In our example, when we defined the function we gave it 2 parameters (x and y), this essentially tells the function that when we call you, you will be given two values for you to substitute into the place of 'x' and 'y'.

So when we called the function addition, we substitute the values x and y out for the passed arguments. So, in this case 'x' becomes '2' and 'y' becomes '3' so when the function body is run, it's not running 'x + y' but instead is running '2 + 3'.

This comes back to the original idea that functions are designed to be reusable, for example instead of passing 2 & 3, we could pass:

• 1 + 3
• 4 + 10
• 3 + 7

I mean, we could manually type out these calculations in the console but that isn't neither scalable or efficient. Say we needed to do this with 300 pairs, are we going to manually type them out?

No, of course not. This is where passing values into functions as arguments makes more sense.

The Body

Finally, we arrive to the function body. The function body is main part of a function, it's the code that is executed when the function is called.

In most cases this is the code located within the '', however there are cases where this isn't true such as Arrow Functions but we will look at those in Part 2. But, essentially in the vast majority of cases anything located after a function name and parameters and is contained within a pair of '' is the function body and will be executed once the function has been called.

Looking at our code example from earlier:

1function addition(x, y) {
2  return (x + y;);
3}
4
5addition(2,3);

The function body is this portion:

1{
2return (x + y;);
3}

Now, this is a very simple function with a one line function body, which isn't something you see often. If you look at any code examples, often function bodies are over multiple lines and carry out multiple tasks. But, as with the ethos of functions, it's better to only have to write it all once.

Function Calling / Invoking

The final part we need to look at for the making of a function is the calling or invoking of one.

Calling a function is exactly what it sounds like, we're calling a function that needs to execute the code stored in it's function body.

Being able to invoke functions is one reason functions are so pivotal in coding. We can call a function as many times as we want, without having to re-write any of the code saving us considerable time and effort.

For once final time in this post, let's look at our example function:

1function addition(x, y) {
2  return x + y;
3}
4
5addition(2, 3);

The function call would be:

1addition(2, 3);

With this single line, we call the function 'addition' and pass it in 2 arguments (2 & 3) and are returned an output (5). But, because we haven't hard-coded anything into our function we could pass it any two numbers and get a result. For example, we could pass it the arguments (10 & 5) and would get 15 in reply.

Referring back to the previous section on Parameters & Arguments, the function call is the final piece to making the function functional.

We pass parameters into the function definition when it's created so it allows us to re-use the function by passing arguments in the function call whenever we need to.

And, that's it for Part 1 of this mini-series, I hope you enjoyed it and found it helpful. Part 2 of this mini-series on functions will be out soon, if you're interested please follow me to get notified once the second post is available.

If you enjoyed this article, then please share this article. | It would mean a lot to me for others to be able to read this as well.

Want to discuss this article? Or, just say hi:

Twitter | Instagram