[2] Variables and Functions

Important note before we start:

You do not have to be a mathematician to program!

We will however express some concepts for programing using concepts of math to start out with.

a^2 + b^2 = c^2

This is the Pythagorean Theorem. Just like in all formulas we may remember from high school maths we are expressing a mathematical operation with letters as stand ins for actual numerical values. In this formula, a, b, and c are our variables while the value of squared (or 2) is a static value.

Declaring and Defining Variables

Variables in programming, just as in math, hold data for us to use in our own operations. Let's start by learning how to declare and define variables in JavaScript (JS).

var a = 3

Here we declare the variable that we have named a and we have defined its value as the numeral 3.

The keyword var tell JavaScript "HEY! We are making a new variable and we are going to name it what ever is to the right of the var keyword"

The single = (equal) sign in JavaScript is a symbol we use to assign a value to a variable. Make note here that the single = sign is different than a double == or triple === sign. More on that later. The = always takes the value on the right of it and assigns it to the variable to the left of it.

let b = 5

The let keyword is another way to declare a variable in JavaScript. In most cases the let keyword works the same way as the `var` keyword. `let` is newer to the language then var so you will see it more often in code written recently. you will also see us using let in the stead of var moving forward.

let c

You will often find it useful to declare a variable in your code with out defining it. That is to say, you make create a variable in your code early on and not assign a value to it until later. In this example we have declared c without defining it.

Basic Operations

So far we have made some data. Let's actually do things with it. We are going to learn about operators  in our pursuit of our Pythagorean Theorem software.

Let's start by squaring our values. To square a value all we need to do is multiply it by itself.

let a = 3
let aSquared = a * a

Here aSquared will have the value of 9.

Let's stop for a moment. Even though we have only added one new line of code, we have discovered a few things to consider.

In that second line, we defined the variable aSquared. Does the name of that matter to the code? Well, no. We can name variables anything we want. Just because the Pythagorean Theorem has a variable named a doesn't mean we had to name our first variable a. We just did that because it was easier to understand for the software we are writing. So, aSquared is the name we chose because it makes the most since to us, the developer reading it.

The next thing to note is this new symbol: * (star). This is the multiplication operator. When writing normal math by hand we would see an X instead. An operator is a a symbol that can perform operations for us that are built into the programming language. We have actually already seen this with the = sign. The = sign the assignment operator. There are man of these in JavaScript. We will have resources on operators linked in the "further reading" of this section.

Another new concept here is that we wrote a * a instead of 3 * 3. We can use variables, and values of operations on variables, to assign values to other variables. Here we assign the value we get from the operation of the variable a times itself, to the new variable aSquared.

Lastly, why did we not just say let aSquared = 3 * 3 or for that matter let aSquared = 9? Well we will address that in a second.

Moving forward, let's make sure to get the square of b as well.

let a = 3
let aSquared = a * a

let b = 5
let bSquared = b * b

Functions

Now I want to talk about functions. Functions are a way of grouping a set of processes together in a generic or abstract way. These process we decide to run are usually to get a new value called a return or to make something happen somewhere in the system, such as making text appear on a screen or navigating a user to a new webpage.

Let's start simple.

let a = 3
function getASquared () {
    return a * a
}

Let's break down the syntax here before we explain what is going on.

First we have a new keyword: function. This tells JavaScript that we are about to declare and define a function.

Second, we have the name of the function getASquared. Just like with variables, we can name functions what ever we like when we define them. You may notice the way this is capitalized. In JavaScript, the standard style that the community has decided on how to capitalize variable and functions is called camel case. This is where the first full word in the name starts with a lower case character and the following words start as capitalized. This is how we can write very clear names that are easy to read. Another example would be like: camelCase.

Thirdly, we have the set of () parenthesis. This is where we could pass values (referred to as arguments or parameters) into the function is we so chose. this is valuable to be able to use data that function may not have access to otherwise. We do not want to pass any parameters into this function so we will leave the () empty.

Fourthly, we have the opening { and a closing } (curly bracket) later on. These brackets define what is called the scope of the function. The scope means everything inside of it belongs to that function itself and is not available to code outside of it. Scope is something we will learn in detail later on. Just know, that scope exists at many levels in code, and in the case of this function, the scope has access to the variable a but the code on the outside dies not have direct access to the code inside this function.

Lastly, we have another new keyword: return. As stated the code outside of the function doesn't have access to the code inside of the function. However, we can have a function return some data to where ever it has been called from. In our case, we are returning the value of a * a, which is 9.

Keep in mind, just because a function is called does not me it has been executed. We need to do that manually. Let's demonstrate:

let a = 3

function getASquared () {
    return a * a
}

let aSquared = getASquared()

When we declare aSquared here, we are defining its value to be what ever is returned from calling the function getASquared. To call a function that has already been defined, you must use the name of the function with the (). In our case we typed getASquared(). Make note, if you want to use a variable or function at any certain place in your code, you would need to have those functions or variable defined before you use them. This is why our code is ordered in such a way.

Lets write up the rest of our code to use functions:

let a = 3
let b = 5

function getASquared () {
    return a * a
}

function getBSquared () {
    return b * b
}

let aSquared = getASquared()
let bSquared = getBSquared()

So far we have written a lot more code to do the same thing as our earlier example before the functions. Well now let's explore the power of writing useful functions.

The truth is: we don't need these two functions. We can make do with just one function and start using parameters.

let a = 3
let b = 5

function getSquared (numberToSquare) {
    return numberToSquare * numberToSquare
}

let aSquared = getSquared(a)
let bSquared = getSquared(b)

Here we have defined the function getSquared. It is has a parameter called numberToSquare. A parameter is just like a temporary variable that exists through out the lifetime of a function. Just like a normal variable it can be named whatever we would like. Just like a variable, it needs to be both declared and defined. It is declared when we right our function function getSquared (numberToSquare) and its value is defined when we call the function getSquared(a).

This is still more code then before we started using functions, but stick with it, you will start to see even more usefulness.

Let's continue along getting our Pythagorean Theorem program in working order.

let a = 3
let b = 5

function getSquared (numberToSquare) {
    return numberToSquare * numberToSquare
}

let aSquared = getSquared(a)
let bSquared = getSquared(b)

let cSquared = aSquared + bSquared

Now we have the variable cSquared. To solve for c, all we have to do now is find square root of that value.

We aren't going to get into the weeds of actually understanding the process of deriving a square root of a number. We are going to use some code that already exists in the standard library of JavaScript.

let c = Math.sqrt(cSquared)

We will go into more detail about what a library is, but for now, a library is a collection of code that is already built that we can utilize. Every developer and organization relies on libraries built by other developers. Somethings you just do not need to write for yourself.

We are using the Math standard library. From is we are using a function (also called a method) called sqrt. Not the clearest name, but what it does for us is it takes in a value as a parameter, calculates the square root of that number, and returns that value to us.

Now let's get all of our code together and try running it.

let a = 3
let b = 5

function getSquared (numberToSquare) {
    return numberToSquare * numberToSquare
}

let aSquared = getSquared(a)
let bSquared = getSquared(b)
let cSquared = aSquared + bSquared
let c = Math.sqrt(cSquared)

console.log(c)

Here we use the "library" called console. We called a method/function from it that takes any data we give it and logs it out to the terminal.

If all goes well you should see the value `5.830951894845301` print out to your terminal.

Conclusion

Here we covered how to store data into variables. We learned how to define functions. We learned how to generalize a function, letting us pass in custom data and return a value based on the data we passed in. And we touched on the idea of standard libraries and how to use them in our code.

There are subsections on this lesson as nice supplementary material that I high suggest you look over. Some of what we cover in it may not be explained in great detail elsewhere in our material, but further material will assume you have gone over it.