Now that you have learned how to define and create a variable, it’s time to start using it.
Define our variables
In our example, we will create two variables for the x and the y position of a rectangle and assign them some values. Now we can use the variable instead of the number in our code. We use the let keyword here because we might want to change the value during the runtime of our program.
1
2
3
4
let x = 50;
let y = 100;
rect(x, y, 100, 60);
A rectangle drawn with variables
While executing our program, the computer will replace all occurrences of our variables x and y with the values the variables have at that time.
Changing variables
You can change the value of a variable at any time while your program is running. The following code draws two rectangles, and we can use the same variables and change them between drawing the rectangles to place them at different positions.
1
2
3
4
5
6
7
let x = 50;
let y = 100;
rect(x, y, 100, 60);
x = 200;
rect(x, y, 100, 60);
Two rectangles drawn with variables
As you can see, we don’t change the code of drawing the rectangle to move the second rectangle to a different x position. Instead, we change the variable.
You might notice that we are not using the let keyword when changing variables. We only need it when we define a variable for the first time.
Working with variables and numbers
You can use variables that have a number as a value to calculate with them. If we take the example above, instead of assign the variable a value of 200, we can add 150 instead to get the same result. To achieve this, we assign the current value of our variable x plus 150 to the variable. The + is used here as you know it from math. This is called an operator, in this case it is the add-operator.
1
2
3
4
5
6
7
let x = 50;
let y = 100;
rect(x, y, 100, 60);
x = x + 150;
rect(x, y, 100, 60);
Two rectangles drawn with variables
This is useful when we want to change the initial position (in this case 50) and don’t change all values that have a connection to our initial x value.
More calculations
But you can also add two variables together, as you can see in the following example:
1
2
3
4
let x = 240;
let w = 100; // used for the width
let right = x + w;
In this example, the variable right will have the result of the addition: 340.
Besides addition (+), you can also subtract (-), multiply (*) and divide (/).
Different ways of writing calculations
When seeing code from others, you will notice that there are different ways of writing calculations. They are all doing the same thing, it’s just a different way of writing it. Throughout the course, we will keep the slightly longer version, as it is a bit easier to read.
1
2
3
4
5
let someNumber = 100;
// Both lines have the same effect, they both add 200 to the variable x
someNumber = someNumber + 200;
someNumber += 200;
Print out your variables
While working on your program, it can be useful to print out values to see if something is working as expected. In JavaScript, we can use the command console.log(value);. This will print the content of value into the console in our browser. The console is just a text-output window to help you to work with your code.
Taking one of the examples above, we could print out the value of x at the time of drawing a rectangle.
1
2
3
4
5
6
7
8
9
let x = 50;
let y = 100;
console.log(x);
rect(x, y, 100, 60);
x = x + 150;
console.log(x);
rect(x, y, 100, 60);
1
2
50
200
As you can see, it will print out the values of x at the time of executing the console.log command.