Functions

What is a function

Functions are one of the essential building blocks in JavaScript. 

It allows you to write a piece of code that does a specific task and use it whenever needed.

Without functions, you’ll have to rewrite that piece of code every time you need to execute that task.

 

Function syntax

There are multiple ways to declare/define a function, but in this course, we’ll cover the most common one.

So to declare a function, we need to:

  • Use the function keyword.
  • The function name that will allow us to use invoke/execute the function later on.
  • The function parameter(s) separated by commas. That will be specified when invoking the function.
  • The code block, wrapped in curly brackets, is to be executed when the function is called.
  • The return statement that will output the function’s result.

And here’s the syntax:

function name(parameter1, parameter2, parameter3) {
  // block of code to be executed
}

Now let’s try some real examples:

1 – Let’s implement a function called sumOf that will take 2 numbers as parameters and return the sum of these 2 numbers.

function sumOf (num1, num2) {
  return num1 + num2;
}

2 – Let’s implement a function called averageOf that will take 3 numbers as parameters and return the average of these 3 numbers.

function averageOf (num1, num2, num3) {
  return (num1 + num2 + num3) / 3;
}

If you tried to copy and paste these 2 functions to the console, you might have noticed that nothing happened.

That’s normal. So far, we have been implementing the functions for future use.

Defining a function doesn’t execute it!

So how do we actually make our functions work?

 

Calling and executing a function

Defining a function only gives it a name and specifies what to do when the function is called.

So calling the function is what actually executes the specified code with the indicated parameters.

You can call a function simply by typing its name and specifying its parameters (if it has any).

Now let’s see how to call our sumOf and averageOf functions:

// Let's invoke our sumOf function with the parameters 2 and 3
sumOf(2,3) // you'll see the number 5 printed in your console

// Let's invoke our averageOf function with the parameters 2, 3 and 4
averageOf(2,3,4)  // you'll see the number 3 printed in your console 

Remember variables?

Guess what? You can store the function’s result directly in a variable like so: 

let mySum = sumOf(37,50)
// now type mySum in the console and check what will be the result :)

Remember conditionals?

Let’s use them in a function called weatherTips that will take a temperature (number) as a parameter and return different messages based on some logic:

function weatherTips (temp) {
  if ( temp < 10) {
    return "Brrr, It's freezing! Please wear warm clothes.";
  } else if ( temp >= 10 && temp < 20 ) {
    return "Oh it feels nice! It's time for a walk.";
  } else {
    return "We're melting here! Swimming time has come :)"
  }
}

// Try invoking/calling the function with different values and see what happens. exp.
weatherTips(50)

Remember Loops?

Let’s implement a function called printNumbers that will take a number as a parameter and print all the numbers from 0 to that number: 

function printNumbers (num) {
  for ( let i = 0; i <= num; i++ ) {
    console.log(i)
  }
  return "There you go!"
}

// Try invoking/calling the function with any given number and enjoy the Magic ^^