30.05.2016 |

by Rich Armstrong


You’ve seen examples of variables. It goes like so:

var varName = ‘some value’;

The var keyword stands for variable and is one of a few reserved words. Next, the variable name (no quotes for a variable name) is the name you can reference later on. Variable names don’t have spaces, don’t start with numbers, and are only alphanumeric. Variables are like labelling a box and putting something inside it. Or pointing at something and saying that. Variables refer to something, point to something, or store something. The = symbol assigns what’s on the right of it to the variable name. It’s like putting something into the labelled box. And the value of the variable can be any data type. Try this out:

var age = 12;
var peter = {
 strength: 985,
 superPowers: ['flight', 'invisibility', 'kindness']
var city = 'Amsterdam';

Reuse Information
Variables allow us to reuse info without having to change it multiple times. The president, my sister, that person, my favorite food, my best friend—those are things that vary, but they’ve got a label and refer to something at a point in time. Powerful stuff. Variables allow us to make things happen without knowing exactly what the outcome will be. How about this:

var randomNumber = Math.round(Math.random() * 100);
var aMuchBiggerNumber = randomNumber * 99;
console.log('my much bigger number is: ' + aMuchBiggerNumber);

4.1 An quick introduction to JavaScript

Although the code doesn’t change, the number that is logged does.

The whitespace around the var keyword, the variable name, the = symbol, and the value of the variable don’t really matter. Developers mostly try and keep it easy to read though. Also, use camelCase for naming your variables and under_scores, because spaces don’t work (you’re welcome to try).

This Points to That Points to That Thing
Variables can also reference other variables. Like this:

var myWife = 'Chantelle';
var yourSister = myWife;
var amysBestFriends = [myWife, 'Joe', 'Sally'];
var storyTitle = myWife + "'s Epic Story.";

Global Variables
If variables are defined without the var keyword in front of them, they’re assigned to the top-most object, which (in the case of the browser) is the window object. These are called global variables. Try this out in your console:

favNumber = 99;
favNumber = 23

If you reassign a variable’s value, you don’t put the var keyword before; this can make setting global variables a little confusing, especially when there are local variables inside functions that are named the same as a global variable (more on that tomorrow).

Remember: Download Google Chrome for Desktop and Sublime Text 3 to make the most of these lessons. And remember to open up your JavaScript Console: Alt+Cmd+J (OS X) or Alt+Ctrl+J (Windows).


Recommended book

“JavaScript: The Definitive Guide: Activate Your Web Pages” by David Flanagan


Share with friends