Welcome to a new coding lesson. In this lesson we will learn about expressions and variables.

Print this article. Coding is best learned typing yourself the commands using a physical keyboard. We highly recommend to print this article, and anytime you see a code block, just type it yourself. Do not be tempted to copy and paste from the online version.

As always, the JavaScript code editor that we are using in our lessons is available online at: https://codeguppy.com/code.html

A small house

Let’s start our exploration by drawing a small house in the middle of the screen. For this we will use the ‘rect ’ and ‘line’ instructions introduced in previous lessons.

Go ahead and type this in the code editor. Take your time when you type. Make sure you type all characters exactly as you see below:

rect(350, 250, 100, 100)
line(350, 250, 400, 200)
line(400, 200, 450, 250)

A quick refresher: 400 and 300 are coordinates of the middle of the screen. The mini house coordinates have been calculated around these middle screen values.

After you finish typing press the ‘Play’ button to test your code.

Don’t get discouraged if you got and error. Check carefully your code against the example, correct if necessary, and Play again.

Solution

We are hoping that you typed correctly the mini house code on the previous page. If your code is still not working check carefully what you typed. It is very common for beginners to forget punctuation signs or parenthesis or invent new capitalization for JavaScript commands.

With enough focus, we believe you can fix the errors and your program runs successfully.

Now, take a few minutes and analyze the code. Can you tell how we came up with 350 and 250 as coordinates for the rectangle corner?

Calculations

Our original intent was to draw a small house in the middle of the screen.

The solution we selected consists in drawing a square 100 pixels wide by 100 pixels height in the canvas’ center.

Since the canvas center is 400, 300... the coordinates of the top left corner of the square are:

(350, 250)

• 400 - 100 / 2 = 350
• 300 - 100 / 2 = 250

In the same way, we calculated the coordinates of the lines that makeup the roof:

(400, 200)

300 – 100 / 2 – 100 / 2 = 200 (we made the roof half the height of the house)

(450, 250)

400 + 100 / 2 = 450
300 – 100 / 2 = 250

Let the computer calculate

These calculations are pretty simple… but why calculate them ourselves when we have a powerful computer at our disposal?
Let’s put those calculations in our code and let the computer do the hard work for us:

In the code editor, try to replace:

350 with 400 - 100 /2
250 with 300 - 100 / 2

and

450 with 400 + 100 / 2
200 with 300 – 100 / 2 – 100 / 2

When you believe you finish the replacement, press Play to see the result. It should be the same as before.
Take your time and try to do this exercise before moving forward. It is a good practice.

Code with calculations

Now try to compare your solution with our code. Should look the same. If you still couldn’t figure out how to do the replacements, just clear your editor and carefully type the following program:

Press ‘Play’ and see the code drawing the same mini-house.

A bigger house

Let’s suppose we changed our mind and we have to draw a bigger house. Instead of 100 pixels wide by 100 pixels height, our main square should be 200 by 200 pixels.

Since our code contains the expressions that do the calculations, we only need to replace 100 with 200 wherever is needed.

Go ahead and change the code on the right. When done press ‘Play’ to see the result. If you don’t get the expected result, check the code carefully.

Solution for a bigger house

This is the solution. Press ‘Play’ to see the bigger house.

rect(400 – 200 / 2, 300 – 200 / 2, 200, 200);
line(400 – 200 / 2, 300 – 200 / 2, 400, 300 – 200 /2 – 200 / 2);
line(400, 300 – 200 / 2 – 200 / 2, 400 + 200 / 2, 300 – 200 / 2);

As you can see the expressions included in the code helped us a quite a bit when we had to change our code to draw a bigger house. We didn’t have to recalculate the new coordinates. Instead we had to do about 12 replacements in the code.

If there is one thing in coding that coders don’t like is “repeating” themselves. In the next chapter, we’ll see how to eliminate even these replacement activities next time we’ll be asked to change the size of our house.

Introducing variables

JavaScript allows to define “variables”. A variable is a name that contains a value or expression. Each time you use that name in your code, the computer will actually use the value represented by that name.
Sounds complicated but let’s see this concept through an example. In our code, we can define the height of the house as a variable. Let’s name this variable h. The proper way to let the computer know that we need to define a variable and assign a value to it is like this:

let h = 100;

let keyword instructs the computer to define the variable with the specified name.

Note: You can use any letter or even combinations of letters and numbers for the name of the variable. As long as the variable name is not starting with a number or is not identical with a reserved JavaScript language keyword / instruction, you’re good to go.

All of the following are valid variable names:

a, b, c, … , A, B, a1, b1, myName, houseSize, x, y, z

People try to use meaningful letters or words for the names of the variables in order to refer to them easily at a later time. However, the computer doesn’t care if you name your variable in English or Romanian… as long as you use them identically at a later time.

let doesn’t have any visual effect.

In a new code window, type the above line. If you try to run this code, nothing will happen.

Note2: We also placed a semicolon ; at the end of the let line. Ending lines with ; is optional in JavaScript but a good practice nevertheless recommended by many people.

Variables in calculations

Since we now have the house height as a variable, we can use it inside our calculations. Type this entire program now:

let h = 100;

rect(400 – h / 2, 300 – h / 2, h, h);
line(400 – h / 2, 300 – h / 2, 400, 300 – h /2 – h / 2);
line(400, 300 – h / 2 – h / 2, 400 + h / 2, 300 – h / 2);

Notice that the code is the same, but “h” is used instead of the 100 or 200 values that we used before.
Run the code and see the effect… then modify the value of h and re-run the code.
See how simple it is now! With only 1 single change in the code, we can draw our house in different sizes!

Multiple variables

Our programs are not limited to just 1 variable. As a matter of fact, you can define practically an unlimited number of variables.

Let’s define two additional variables named x and y that will hold the coordinates where we want to draw our mini house.

let x = 400;
let y = 300

In the code editor, add the above two lines at the very beginning of the program (before the first line).

Then replace in the code all occurrences of 400 with x and all occurrences of 300 with y.

Take your time and try to do this exercise right. When done press ‘Play’ to see the effect. If the mini-house still appears on the canvas, you wrote the code correctly.

House with variables

If the code you wrote looks like the following one – you completed the exercise correctly:

let x = 400;
let y = 300;
let h = 100;

rect(x - h / 2, y - h / 2, h, h);
line(x - h / 2, y - h / 2, x, y - h /2 - h / 2);
line(x, y - h / 2 - h / 2, x + h / 2, y - h / 2);

With house size and position defined as variables, we can easily control the house drawing my doing only minor changes to our code.

Go ahead and play with the values of the variables.

Vary h between 10 and 200
Vary x between 0 and 800
Vary y between 0 and 600

After each modification, re-run the program to see the effect.
Variables can be re-assigned

Perhaps one of the most powerful features of variables is the fact that they can be re-assigned with a different value at a later time in the code. These is the reason they are called “variables” – their value can vary (e.g. change) during the execution of a program.

To re-assign a value you just use the equal sign like this:

x = 100;

Note: The ‘let’ instruction is used only when you define the variable. When you change the value of that variable you just use the equal operator. You can change the value as many times as you want.

Exercise: In the code editor, try to type the above line, after the lines that define the variables and just before the line with the ‘rect’ instruction.

House at different position

If you execute the program, you’ll notice that the mini-house is not drawn anymore in the middle of the screen, but in the left part.
This is because the variable x is reassigned with value before the drawing begins.

let x = 400;
let y = 300;
let h = 100;

x = 100;

rect(x - h / 2, y - h / 2, h, h);
line(x - h / 2, y - h / 2, x, y - h /2 - h / 2);
line(x, y - h / 2 - h / 2, x + h / 2, y - h / 2);

Remember: The computer executes your program line by line, from top to bottom.
Therefore even if x is initially assigned with 400, that value changes to 100 when the line x = 100; is reached.
Uninitialized variables

In many cases you don’t know what value to assign to a variable in the moment when you define it with let.

In that case use the let instruction to just define the variable.

Remember however to use the = operator and assign a value to that variable before you use it. Otherwise the variable will not be properly initialized with a valid value and your code may produce errors.

Notice how variables are defined and assigned in the following code:

let x;
let y;
let h;

x = 200;
y = 350;
h = 150;

rect(x - h / 2, y - h / 2, h, h);
line(x - h / 2, y - h / 2, x, y - h /2 - h / 2);
line(x, y - h / 2 - h / 2, x + h / 2, y - h / 2);

Keep playing

Our lesson is now over, but our house is still minimalistic. We challenge you to add more details to this house (such as windows, door and even chimney) by calculating their coordinates and sizes using expressions.

This article is also available in interactive version at https://codeguppy.com/code.html?t=_expressions_variables

Until next time: happy coding!