# JS Basics 1: Functions and Variables

# 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.