2.7 - Variables

Review

At this point we can:

  • Make content with HTML

  • Style that content with CSS

  • Do some basic maths and output to the console

Today's Lesson: 2.7 - Variables

Doing a quick calculation is easy. But what if we wanted to hold on to a value to be used later? Perhaps we want to hold a lot of values like the locations of items in a 3D space, a list of colours, phone numbers, or financials.

Variables talk directly to the memory in the computer. We reserve a block of space by asking for one, just like in math class:

Let w represent the number of watermelons
Let
apple represent the number of apples
w = 2
apples = 7
Let
shoppingList = w + apples

Q. In the example above, what is the value of "shoppingList"?


Variables in JavaScript are very similar:

let w = 2;

let apples = 7;

let myList = w + apples; // sets the variable "myList" to 9

(Tutorial on variables) (w3schools reference)

Live demo space below:

Very important: the single equal sign (=) is used to assign a value not check it. It is called "left-hand assignment".

Notes & Resources:

  • No matter what you read online, declare your variables using let and not var.

  • You must declare your variables. JavaScript allows you to be sloppy - don't be.

  • Semicolons at the end of each line (replit can help with that)

Great reading on the subject (shameless plug):

Today's Task(s) / Homework

  • Go to REPLIT and look for the 2.7 - Variables project. Follow the instructions.

Extra

  • There is a special kind of variable called a constant. These are used when you know you won't be changing the value (like colours, for example). It is declared using the keyword const
    const BLUE = "#0000FF";

  • If you're looking to get real nerdy, this is a fantastic chapter on variables.