Playing with Variables
This will store the number
5 into the variable
favoriteNumber as you’d expect. Press the
Run button in the Console pane.
…Nothing happened, right?
Wrong. What just happened was you stored a number into the variable, but didn’t do anything else with it that would produce a message or any visual output. It actually did what you asked.
Looking at Variables
You should notice that at the bottom of the Console pane that there is a
Go ahead and click near that marker and type in
favoriteNumber - Don’t worry about typing console.log or anything else, just put in the name of the variable you used in your code. Press enter.
The number 5 should show up on its own line and you’ll be brought back to your
This is how you inspect the state of your variables. If you tried to do it before running your code it would say
undefined because it doesn’t know anything about your program.
This works with objects, arrays, and pretty much everything else (assuming it’s simple enough to be represented in the console).
Try it out with an object:
Now click back on the Console pane by the
> marker and type
person and press enter.
You should see something like this:
You can see that it has automatically identified what we put in the
person variable as being an Object, perfect!
Digging a little bit further
So we have an object, a fairly simple one at that. But what if we don’t want to look at the whole thing, what if we just want to get a little piece of information from inside of it?
Introducing Dot Notation!
Go to the Console pane if you’re not still there.
person.name and press enter.
You should see just the name showed up! This is how you access things inside of objects.
Tip: These named attributes of an object are called ‘properties’ or ‘keys’. Whenever you hear someone say “Key-Value Pair” you can think of how you accessed the value “Brent” from the key “name”.
This works for deeply nested things too, if our object looks like this:
You could find out the country I live in by typing the following into the console:
person.location.country and then press enter.
“Canada” would be returned in this case.
What about arrays/lists?
Dot notation is wonderful, but it only works for values of Objects. If you have a list of things, say:
And you want to grab just one thing from the list, you can ask for the values by index.
An index is a numerical value that represents which ‘slot’ of the list a value sits in. These indexes start at 0, and go up from there (the last one ends up being the number of things in the array minus 1, since it all starts at 0)
To get the first item from the array, type this (in your Console pane after running the code above) and press enter:
It should spit out “Computers” in your console.
Hint: You can actually use the square bracket format for Objects too, it looks like this:
person["name"]; Just don’t forget the quotation marks!
Changing variables after they’ve been set
They’re called variables for a reason, because they can vary/change whenever you need them to.
Hit the run button, and click over to the Console pane and type
favoriteNumber and press enter. It should show
5 as you’d expect.
What if 5 isn’t our favorite number anymore? In the Console type in this:
You’ll see that it spits out the number
8 right afterwards, this means it has changed the value for you!
Note: You don’t need to put
var in front in this case, because favoriteNumber already exists and you’re just changing it.
Being a wordsmith
Numbers are one thing, but words are another! It’s really simple to build sentences and modify text.
Let’s say you have:
What if we wanted to build a simple greeting for Tom? You can add words, much like you can add numbers:
If you were to run that and type
greeting into the Console pane, you would get:
Hello Tom, welcome to my website!
as output. Now things are getting a tiny bit more exciting!
Performing math on variables
Let’s say you wanted to increase your
favoriteNumber by one, you can do that by typing in the following:
Woah, wait a sec! If you look at that, you’ll see that you’re setting the variable to itself plus 1. This is completely okay, and in fact you could set it to the value of some other variable if you wanted. In this case we just chose to use its existing value (of 8).
If you want a shorter version of this, it looks a little something like this:
If you type that in, you may notice the number being spit out in the console is always 1 behind — that’s because it’s outputting it before it makes the change. You can make it increase before it outputs the value by using this code instead:
It’s a subtle difference, but it’ll matter later on.
There are a bunch of other math operations you can do such as:
Multiply by 2:
Divide by 2:
These are some of the basics and you can use values other than 1 and 2 if you like!
Changing contents of lists and objects
Just like simple variables, you can change the values inside objects and lists.
If you have an object like this:
You could change the status by doing this:
With objects you can actually add new keys/properties to it as well!
If you have a list like this:
And you wanted to change Taupe to something better you could do this:
Remember: We use the index of 2, because the list starts at 0.
But I’m just doing this in the Console?
Mixing and Matching Variables
It’s pretty boring just adding, subtracting and doing other basic math on variables. It is however very common. But let’s get to some more interesting things.
Variables that are based on other variables
Let’s say you want to calculate how many seconds are in a year. You could break it down like this:
Now we have all of our components of time broken out into neat names (this is a sort of self-documenting form of code because it’s readable and has a clear intent)
Run in your Console then you can start typing things like this into the console:
You’ll see it spit out 60. Okay, simple enough. What if we want the number of seconds in an hour?
This will print out 3600! We just multiplied the two variables and the result got put in the console. We can keep extending this now to give us the seconds in a year:
A whopping 31536000 seconds!
Now if you press
run in the Console pane, and then type
secondsPerYear in the console, you’ll get the same result we got when calculating it before.
Thoughts: These values won’t change on planet Earth and might seem silly to store in variables, but if you wanted to calculate how many seconds were in a year on Mars, you could change each of the variables involved in the calculation separately and re-run to get your newly calculated value!
Combining Things for Mind-bending Fun
Okay.. so one of the most interesting things about programming is the fact that everything basically just takes input and produces output (that then can be input for other things). It’s so simple that we often overlook the power of it.
We discussed in this article the idea that we can ask for values using keys/properties of an object via dot notation (Ex.
person.name to get the name in this case). We also learned that we can use square brackets to ask for a specific item from a list, and we can mash variables together to make more complex things.
If I wanted to make a sentence, perhaps saying what I most enjoy, I can combine all these theories together like so:
Take a good long moment and look at the different components of that:
1) First we start with
2) Then we add another piece of text to it: “ enjoys “ - The language no longer sees
person.name, it basically sees it as the result instead, which is “Brent”. Resulting in “Brent enjoys “ at this point.
3) Then we add
person.favoriteThings - This is new, we’re kind of asking for two things here, first we ask it to find
person.favoriteThings which is a list of things. So it’ll start by grabbing that list, and then after it has the list it sees the  afterwards, meaning we want the first thing from the list. In this case it’s “computers”, now the list no longer matters, it’s found what it needed and so the result is added together with the rest to make “Brent enjoys computers”
4) The text “ and “ gets added to our string now, so we have “Brent enjoys computers and “
6) Now we just finish off the sentence with another string. The final result is:
Brent enjoys computers and 1167 is their favorite number.
In this case we stored that in a variable called
sentence. Since the value is calculated at the time you make the variable
sentence won’t magically change if you change any of the values that made it up afterwards (unless you also remake the sentence variable after doing so)
Summary: Basically you should never be afraid to play with concepts, they’re all inter-changable. You could in theory do something like this (even though you’d probably want something more manageable):
“Grab the 4th hobby of the first friend in Brent’s friend list” (assuming all that data was pre-filled out in the correct structure)
Now you know how to create variables, peek at their values, make changes to them and combine them. Slowly but surely your arsenal of tools is increasing. Pretty soon we can start building some real world applications!