Variables - buckets of fun
Imagine for a moment your program is a bit like a kid on a beach making a sandcastle. The kid is going to need lots of raw materials to make that castle, sand, little shiny rocks, pebbles, flags, water from the sea. This kid isn’t like the other children see? This kid is ambitious.
The kid is going to need somewhere to keep all of those raw materials. He’s going to need some buckets. Probably a whole bunch of buckets.
let greeting = "Hi there!"; alert(greeting);
We have put the string “Hi there!” inside a variable (bucket) called greeting. Then we have alerted greeting. What does this do?
Changing the value of a variable
We can change the value of a variable any time, just by assigning a new value to it, so we could write:
let name; name = "Dave"; alert(name); name = "Susan"; alert(name);
The variable called name contains first the string “Dave”, and then the string “Susan”. Dave is now renamed Susan. Hopefully he is OK with this.
Variables are containers
Imagine I have a basket full of kittens, now when I hand you that basket, I’m actually handing you a bunch of kittens. This is probably a pleasant experience for you.
We can codify this snuggly basket like so:
let basket = "kittens";
Now the basket can stand in wherever we previously needed kittens. For example, I could write:
or I could write
Either way I would alert some kittens.
Variables are pointers
We can also think of variables as pointers (actually this is more accurate). If I stand pointing at a basket of awsome kittens all happy and soft, and say look at this, you’re probably going to look at the kittens rather than my finger. The variable stands in for the data.
The data exists in a physical location on the memory chips inside your computer. The variable points at that location, and the computer is clever enough to ge fetch the information and substitute it for the variable.
Variables are a bit like maths, but also not
In maths, if I say x = 12, I’m stating something that is true, immutable and forever. When I write x, I actually mean 12. x + x is the same as 12 + 12 which is 24.
Variables in code are a bit different, we can change their value, because they are just pointers to some data, and in code we can change our data any time.
I can say:
let x = 12;
then later I can say:
x = 13;
This is totally fine, we’re yous storing some different data in the variable.
I can say:
x = x + 1;
Now x = 14. None of this is allowed in maths, but in code it’s no problem. The values of variables are just numbers in a big memory chip full of numbers. We can change them to anything we like and no one will stop us.
Variables can be called almost anything you like. Hamster, pie or cheeseOnToast are all perfectly sound variable names. The one restriction is that you can’t have any spaces or maths characters in them. You can’t have a variable called
cheese on toast for instance, or a variable called
Don’t worry about giving your variables long and descriptive names. This is encouraged as it makes your code easy to read. Too long though and you’ll spend a lot of time typing. It’s a balancing act.
Although we can call our variables anything we like, it makes our lives easier if we give them sensible English names or common abbreviations.
The Let Keyword
Please note that when we first create a variable we must always remember to use the let keyword. If we forget it, bad things will happen. More on this when we get to Scope. For now, just remember to put them in.
Variables are like little buckets in which we can store any information we like. Let’s pop a string in one, and then pop it out in an alert box.
- Pop your farewell variable up in an alert box.
To answer this question, first we create a variable, lets call it greeting, and assign a value of “Thanks for all the fish” to it. The variable greeting is a bucket that contains the string. We can now use it in place of the string, and alert it.
let greeting = "Thanks for all the fish"; alert(greeting);
Exercise: What’s for dinner…
- Create a variable called question. Give it a value of “What’s for dinner?”
- Create a variable called answer. Give it a value of “Fish”
- Add the two variables together and put the result in an alert box.
Variables are buckets. We can use variables in place of the things they represent, so:
let question = "What's for dinner?"; let answer = "Fish"; alert(question + answer);
If we’d like to improve the output slightly we can separate the two with a space:
alert(question + " " + answer);