Functions and Variables

Math.random();

I guess I need to explain this if we are going to get anywhere. Math.random() gives us a random decimal between 0 and 1. Got it? Great.

  // log a random decimal to the console
console.log(Math.random());

The above code would log a random decimal between 0 and 1 to the console.

Storing Variables

We can extract our random decimal out and store it as a variable.

  // Math.random() as variable
var random_decimal = Math.random();

We can then log the variable to the console and use it like any decimal. In this case, let’s multiply it by itself.

  // log random_decimal * random_decimal to the console
console.log(random_decimal * random_decimal);

This would not return the product of two different random decimals, but the product of the same random decimal. Math.random() is only called one time while defining the variable, so it is the same value when it is multiplied and then logged to the console.

Now, what if we wanted to multiply two different random decimals together? We could define two different variables:

  // two Math.random() variables
var random_decimal_1 = Math.random(),
    random_decimal_2 = Math.random();
// log random_decimal_1 * random_decimal_2 to the console
console.log(random_decimal_1 * random_decimal_2);

This is okay in theory, but a better choice would be to use a function.

Functions

A function can handle our multiplication for us.

  // Math.random() wrapped in a function
function random_decimal() {
    return Math.random() * Math.random();
}
// log random_decimal() to the console
console.log(random_decimal());

This would return the product of two different random decimals. Notice the () at the end of random_decimal() when we run it. This is because we want to run the function. If we wrote console.log(random_decimal); it would not run the function, instead it would spit out the code for the function.

  function random_decimal() {
    return Math.random() * Math.random();
}

console.log(random_decimal());
0.12345678 // a random decimal

console.log(random_decimal);
"function random_decimal() { return Math.random() * Math.random(); }" // a string of code

Function or variable?

Now, you could write the function in two ways.

  // a named function
function random_decimal() {
    return Math.random() * Math.random();
}
// an unnamed function stored in a variable
var random_decimal = function() {
    return Math.random() * Math.random();
}

“What’s the diff?”, you might ask. Well, a lot. They achieve the same end, but are actually two very different things. Our first is a named function. The second is an unnamed function stored inside a variable.

Javascript is evaluated by a browser on load. The way that evaluation works is two-fold. On load, the browser first evaluates declarations. Our first named function is a declaration. After evaluating the declarations, the browser steps through the code character by character. Our second unnamed function is an expression and evaluated at that time. This isn’t just a nerdy thing to know. In fact, the two have very different purposes.

  // calling the function first
console.log(random_decimal());
// expressing the function second
var random_decimal = function() {
    return Math.random() * Math.random();
}

This would return the following error undefined is not a function because the function has not yet been defined at the time it is called in the console.log(). It is evaluated afterwards as the browser steps through the code. For you sass nerds, this is the same thing as defining a variable after using it.

  // calling the function first
console.log(random_decimal());
// declaring the function second
function random_decimal() {
    return Math.random() * Math.random();
}

This would succeed, because the function is evaluated prior to stepping through the code even though it is defined after it is called.

“So why the hell would I store it in a variable?” Great question.

Let’s say for whatever reason, you had a case where you wanted your function to be one of two different things depending on a context. In this case, I will use a variable called cheating. If cheating is true, we will secretly return a “fake” random number instead of a truly random one.

  var cheating = true;
if (cheating) {
  var random_decimal = function() {
    return 0.123456789;
  }
} else {
  var random_decimal = function() {
    return Math.random() * Math.random();
  }
}
console.log(random_decimal());

As you can see, cheating is being defined as true which sets the random_decimal variable as the first function instead of the second;

Simplification

We could achieve the same result in a more condensed form by putting the if condition inside of a function.

  var cheating = true;
function random_decimal() {
  if (cheating) {
    return 0.123456789;
  } else {
    return Math.random() * Math.random();
  }
}
console.log(random_decimal());

This works, but could be much better. The problem here is that we are referring to our cheating variable inside of our function and it is defined outside of our function. This is a bad idea because we want our function to be modular and run independently of any external data. So to fix it, we will pass a variable into the function.

  var cheating = true;
function random_decimal(c) {
  // if cheating
  if (c) {
    return 0.123456789;
  // if not cheating
  } else {
    return Math.random() * Math.random();
  }
}
console.log(random_decimal(cheating));

Here we are passing the cheating variable into our function where it is used inside of the function as c. The function now handles the condition for us.

Using a function instead of conditionally defining a variable is super efficient, but either approach can be appropriate depending on the implementation. If the function is going to be called many times and with different cheating cases throughout your script, you will want to go with the code above. If you are only calling the function one time on load and your cheating condition is permanently defined once, assigning the function to a variable inside of an if condition makes more sense.

Cleaning Up

We can make our random_decimal() even cleaner by using an inline if condition.

  var cheating = true;
function random_decimal(c) {
  return (c) ? 0.123456789 : Math.random() * Math.random();
}
console.log(random_decimal(cheating));

Inside of the () is our condition, c. The ? indicates that we are running an if condition. If c is true, it will return the value 0.123456789. If c is false or undefined, the value after the : will be returned. In this case, that value would be Math.random() * Math.random().

Before and After

We started with three lines of code that could multiply two random decimals one time:

  var random_decimal_1 = Math.random(),
    random_decimal_2 = Math.random();
return random_decimal_1 * random_decimal_2;

Now we have created a function in just as much code that can do the same thing infinitely, plus take a parameter that changes its output in a certain condition:

  function random_decimal(c) {
  return (c) ? 0.123456789 : Math.random() * Math.random();
}
return random_decimal(false);

Fun stuff, right? Keep learning! The sky is the limit!


I am Jake Albaugh and am going to write this bio in first person. These days, I write on CodePen because I care more about it and you than I do about my personal site. Read more articles via my CodePen blog page. View my work on my CodePen profile. If you’re a hip millennial, “get at me” on my twitter @jake_albaugh.