Making functions — black boxes — Programming fundamentals

• Lesson notes
• Optional
• Lesson transcript

Lesson notes

• Functions are kind of special machines we can create that do stuff for us
• Functions can be thought of as black boxes, that take something in and spit something out
  • Function takes in arguments
  • And can return something

Define an call a function like so:

const surfaceAreaCalculator = (radius) => {
  return 4 * 3.14 * radius * radius;
}

const surfaceOfMars = surfaceAreaCalculator(3390);

Here, radius is an argument of surfaceAreaCalculator function.

You can call a function and pass another function call as an argument:

console.log(surfaceAreaCalculator(3390));

Optional

• JavaScript variable name validator
• Valid JavaScript variable names

Lesson transcript

Last time we managed to simplify our calculation with constants: we have created a constant for pi and used it when finding out the surface area of different planets. This way we have reduced the amount of code, but we still had lots of repetitions:

const surfaceOfMars    = 4 * pi * 3390 * 3390;
const surfaceOfMercury = 4 * pi * 2440 * 2440;

A line of code is called a statement, and statements in JavaScript should end with a semicolon. Here we have two statements, and we still have to repeat the whole formula in each statement. And remember — we don't want to repeat stuff in our programs.

It'd be cool if we had some sort of a separate special machine that calculates the surface area of any given sphere. So that we could do something like this:

const surfaceOfMars    = surfaceAreaCalculator(3390);
const surfaceOfMercury = surfaceAreaCalculator(2440);

Just tell it "hey, surfaceAreaCalculator, give me the surface area of a sphere of radius 3390" and it just gives you the answer.

Good news! We can actually create machines like this! They are called functions, and you can think of them as black boxes. Put something inside the box — and the box spits out something else. In this case, the surfaceAreaCalculator box would take in one number — the radius, and spit out another number — the surface area.

So, in this example

const surfaceOfMars = surfaceAreaCalculator(3390);

we are calling the surfaceAreaCalculator box, giving it 3390, and getting back the answer. This answer is then stored in the surfaceOfMars constant.

It's important to understand the difference between two things: defining a function and calling a function. What we did just now was calling — we called the surfaceAreaCalculator function, in other words, we assumed it already exists and we used it.

But it has to exist, so we have to create it before calling. We have to define the surfaceAreaCalculator function. This is the function definition:

(radius) => {
  return 4 * 3.14 * radius * radius;
}

This structure, with brackets, an arrow and curly brackets denotes a function. This radius in brackets is how the function will refer to the number we pass in. In other words, radius is the name for the number that exists inside the function when we call it. It's an argument of the function. This particular function takes in one argument, but other functions may take more arguments or take no arguments at all.

The curly brackets create a block. You'll see blocks a lot in JavaScript and other languages too. They create a group of statements, and this is how we know where the function starts and ends. This function only has one statement — it starts with return, and then you see the already familiar formula.

You probably already guessed that return makes the box spit out the result. The result of the calculation 4 * pi * radius * radius is what the function returns to us after we call it.

Now, we need to give this function some name, so that we can call it by name. I want it to be surfaceAreaCalculator, but you can give any function any name. There are certain rules, like, the name cannot have spaces in it, and you cannot use some special words like const, for example, but otherwise, you can call your functions and your constants as you like.

We already know how to give numbers a name — by creating a constant:

cosnt pi = 3.14;

It's exactly the same with functions:

const surfaceAreaCalculator = (radius) => {
  return 4 * 3.14 * radius * radius;
}

const, the name you want, the equal sign and then goes the function itself.

So, let's bring everything together:

const surfaceAreaCalculator = (radius) => {
  return 4 * 3.14 * radius * radius;
}

const surfaceOfMars = surfaceAreaCalculator(3390);

At the top there's a function definition, and then we have a function call.

Let's look inside the box — what's happening when it's called with 3390 as an argument. return wants to return the result, but it's not ready yet — calculation should happen first. The argument is used in the calculation, so first it needs to replace the name radius with the actual value that was passed in, and then do the multiplications:

4 * 3.14 * radius * radius;
4 * 3.14 * 3390 * 3390;
12.56 * 3390 * 3390;
42578.4 * 3390;
144340776;

And 144340776 is then returned. You can also imagine what happens outside when our function returns the value:

const surfaceOfMars = surfaceAreaCalculator(3390);
const surfaceOfMars = 144340776;

Now surfaceOfMars is a constant with a certain numeric value.

Let's take a look at another example:

const percentageCalculator = (number, total) => {
  return number * 100 / total;
}

This function takes two numbers and returns the percentage. If you give it 40 and 80, it will return 50, becase 40 is 50% of 80.

As you see, when there are multiple arguments, they are separated by commas.

Let's print the result onto the screen:

console.log("How much of December is gone already? ");
console.log(percentageCalculator(16, 31));

Today is December 16, and I want to know what percentage of December is already gone. Look at this second statement — there are two important points here.

First: we can put the function call in any place where we can put a string, a number or a constant. On the first line we printed a string, and on the second line we printed whatever the percentageCalculator has returned.

And the second important point: function calls can be arguments for other functions! console.log is a function — this is why we have brackets when we use it. console.log function takes an argument and prints it on the screen. We put the function call AS the argument, and it worked. Our function was called first, then the result was returned, then console.log was called with our result as an argument and it got printed.

Okay, that's it for me, it's your turn now. Continue to the exercise and write your own function.