30 Days Of JavaScript

Day 8: Consolidation 2

Lesson 2: Functions Part 1

Functions let us take chunks of code, wrap them up and make them reusable.

1function myCoolFunction() {
2  console.log("Hello!");

We broke this day up into 5 so we will do the same here:

No Input, No Return

A function that takes no inputs and has no return isn't actually useless. It's just unusual in the JavaScript world as we tend to want to know what our functions are doing, not have them going off and changing things without our knowledge. As such we would rather have them explicitly return something that we can do something with.

Input, No Return

This is more like it, a function that takes a value and uses it internally. The name you give the argument when you declare the function (so the function logTemperature(temperature) bit) is what you will use to refer to the value inside the function. It doesn't matter what it's called externally.

In the example below I create a variable called reading and then pass it into the logTemperature function which has one argument called temperature, inside the function I don't use reading anymore, I use temperature instead.

1function logTemperature(temperature) {
2  console.log("The temperature is: " + temperature);
5let reading = 22;

Input, Return

In the example above we can convert how many cups of coffee you've had into your expected level of productivity.

The function takes one input cupsOfCoffee, has two internal constants coffeeFactor and productivity and then returns a string of productivity + "% productive".

JavaScript is very loose with types and how it automatically tries to convert them for you. It basically tries to work out what you want to do as best it can, the results can be odd.

Above I am using the + operator to add a string to a number. This of course doesn't make any sense, you can't add a string to a number. So JavaScript realises this and goes to the next best thing. It converts the number to a string and then concatenates them into one string.

So the + operator is really add or concatenate.

Outside the function above we create a variable that is passed into the function and then the result is printed.

We can return any value we want from a function, much like we can pass any value in.

Multiple Inputs

In our new example above we are being more drink inclusive. We take a number of cups and the drinkType and then work out the productivity based on those two factors. Everyone knows that tea, coffee and energy drinks create the most productivity, so they get their own factors and get included in the if statements.

If a different drink type is passed in like water then we leave the default productivity of 4.

In the example above add an alcoholic drink type with two productivity factors. 3 and under give it a productivity factor of 20, over 3 give it a 1 🤣

Multiple Returns

In JavaScript functions can only return one value and only execute one return statement. So, let's rewrite our drink productivity example.

This is pretty much the same as the code before, however now it uses return statements to exit the function when the appropriate condition has been met.

If you wanted to return a bit more information, for example the productivity factor used, then you would need to return an object instead of a single value.


Go Pro?

If you upgraded to pro, sign in here

  • About
  • Blog
  • Privacy
Looking to email me? You can get me on my first name at allthecode.co