JavaScript Functions Quickly Explained

A function is a recipe. You make a function which does a few tasks. Then each time you call that function, it will execute these tasks.

How do you a make a lemonade?

1. You pour water in a glass
2. Then mix 2–3 spoons of sugar
3. Squeeze 1–2 slices of lemon
4. Stir it with the spoon for a minute

And you have it!

Now when you want me to make a lemonade for you, what do you say?

Do you tell me all the steps above again?

1. You pour water in a glass..

…

Or assume I already know the steps, you just tell me to make a lemonade.

That’s it!

In JavaScript or any other programming language, a function is like a recipe of certain tasks.

This makes the life of a programmer much more easier.

In JS we define a function like this:

function makeLemonade() {
  let lemonade = 2 sugar + 2 lemon;
  return lemonade;
}

And the next time I need a lemonade, I just call the function like this:

makeLemonade();

Obviously, it’s just a made up function, and don’t just type it into your computer and wonder, why it’s not working. It’s just to illustrate the concept.

Function Parameters

We have a slight problem with the lemonade function above. It will always return the same kind of lemonade.

If I have hard coded the function to have 2 spoons of sugar and 2 slices of lemon, then every time I call makeLemonade() I will get the same type of lemonade.

What if I want to have extra sugar, or less slices of lemon to make it less sour?

We can make use of function parameters:

function makeLemonade(sugar, lemon) {
  let lemonade = sugar + lemon 
  return lemonade;
}

The parameters will go inside the first parentheses ()

Because we are passing 2 parameters, they are separated with commas ,

The two custom parameters called sugar and lemon (could be anything) will be two numbers we will pass in to the function to control the sweet and sourness of our lemonade.

So the next time I call the function, I have to pass in the parameters like this:

makeLemonade(3,1);

When the program runs, it will be like this internally:

let lemonade = 3 + 1
return lemonade;

I can go super crazy on this and ask for:

makeLemonade(20,10);

The computer doesn’t care, it will put in 20 spoons of sugar and squeeze 10 slices of lemon in it, even if the lemonade tastes shit.

Unless we tell the computer not to go overboard with it! That could be the topic for another article, so let’s just close it off by keeping things simple.

Hint: You can put if else blocks inside your function to return a lemonade only when there are realistic amount of ingredients.

A programmer’s job is to be prepared for every situation that could come up, please refer to this meme:

Different ways you can make a function in JavaScript

You saw the classic way of making functions:

function doSomething() {
  return something;
}

You can make an anonymous function:

function() {
  return something;
}

You can put the value of this function to a variable: (this is also called functional programming)

const doSomething = function() {
  return something;
}

So now you can call it like this: doSomething();

You can also make a function by using the new keyword: (Function constructor)

const doSomething = new Function()

And finally there is a much simpler and cleaner way to make a function:

const doSomething = () => {
  return doSomething;
}

This is called an arrow function, which I absolutely love!

Found this post helpful? Please give it a CLAP!

You may also read:

• JavaScript Objects Quickly Explained
• Creating the Infinity Gauntlet of Thanos with JS Objects
• I love the Arrow Functions

Check out my blog where I share what I am building on the web >> TamalWeb.com