JavaScript Programming Fundamentals: Variables & Data Types

Computers are dumb

Computer’s are not magic. In fact, there’s a running joke that a computer is really just a rock with lightning inside that we tricked into thinking. A computer will do exactly what you tell it to do, even if you didn’t mean what you said. The computer’s strength is its ability to remember and then do work on given variables extremely fast. Thats about all it’s good at.

I’ve seen intros to programming go on at length trying to explain a philosophical introduction to programming… and I wrote a few and deleted them in the place of this very paragraph. We’re going to just jump in to writing code. I just want you to remember back to your algebra days. Lets do a simple algebra problem with JavaScript.

Variables

x + 4 = 6

As a human, its obvious that x is 2. Lets write a program that can solve this problem. Clear out the code in main.js. Ready?

1
2
3
4
// main.js
var x = 6 - 4;

document.write(x + " + 4 = 6"); 

JavaScript sytax for declaring a variable is var followed by a space, and then the name of the variable. So it’s easy to see on line 2, we have declared a variable named x.

Some Quick Notes On Variables (and general programming)

Programmers use conventions to keep us from going insane. So, for example, in my above code I used essentially three lines to write my program (lines 2, 3, & 4). I could’ve written that on one line though, JavaScript only cares about the semicolon at the end of the statement, not the line breaks, so this is completely valid:

1
var x = 6 - 4;document.write(x + " + 4 = 6");

The problem is… this is really hard to read. The convention is to break up your code appropriately with new lines and indents as necessary.

CONVENTIONS:

• Camel Case - our variable here is just named x but what if it was firstNumber? this is called camel case. The first word of your variable is lowercase, then capitalize the following first letters.
• Descriptive but brief - Sure, its valid to name your variable theSquareRootOfFirstNumberAndTheResultOfPiDividedByProbability but if you have an entire program written like this, your code will become unwieldy, take forever to type, and god help the next engineer that comes along to read this greek epic.

RULES:

• Picky about first characters - you cannot start a variable with a number, 1stNumber is not valid, you will get an error. Some special characters are valid, like the underscore: _firstNumber is a legit variable name. Dont get too fancy with these, stick with regular alphabet characters.
• Reserved keywords - JavaScript has some reserved keywords that you cannot use as variable names because JavaScript uses them for its own purposes. Here’s a list of them, we’re not going to go over it, just know it exists: Reserved Keywords.
• No Spaces - you cannot have any spaces in a variable name.
• No Hyphens - you cannot have any hyphens in a variable name.

JavaScript Data Types

Remember that whole thing about computers being dumb? They think in binary, which means everything in a computer’s memory is a 0 or a 1. Turns out, if you put eight 0’s or 1’s next to each other, you get 256 possible combinations, right? (2^8 = 256 math!). 8 bits = 1 byte. A character is 1 byte, always. For example, the letter a is represented as 01100001, or 096 if you convert it to a number. So… this lesson is a lot of bytes. Not a lot for a computer, but a lot for a human.

Why am I telling you this? I want you to understand what a data type is, and why knowing them matters to the computer. A single character is just that, something like ! or z. If you string a bunch of these together you get a… String. Strings are everywhere. A Facebook comment is a string, a tweet is a string, this post is a string. In JavaScript, strings are represented by wrapping your code in either single or double quotes:

1
var myString = "Thank you for reading my string! Wowee!";

If you don’t wrap that string in quotes, your program will crash, because it is actual nonsense to the computer. The computer needs to know what to do with different kinds of data - it ends up writing it all in binary but it does work on different data types differently (good luck multiplying a string by the number 100), so you have to be explicit about what you’re writing.

Here’s a table of JavaScript Data Types

Lets Use Them

Copy this into your main.js.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
// main.js
// this is called a comment, the program skips everything after // on a single line
// its just for humans to read.

/*
this is a multiline comment
so you don't have to do the // on every line,
you can instead just wrap a long comment like this.
*/

// myNumber and aDecimal are both numbers.
var myNumber = 6 - 4;
var aDecimal = 2.4;

// fullName is a string.
var fullName = "Casey Jones";

// needsCoffee and isHungry are booleans.
var needsCoffee = true;
var isHungry = false;

// sum is undefined, could also be sum = undefined.
var sum;

// we are now setting sum equal to the sum of this equation.
sum = aDecimal + myNumber;

// lets print this out to the browser
document.write("My name is " + fullName);
document.write("<br />"); // this is just html to add a new line between these.
document.write("The sum of myNumber and aDecimal is " + sum);
document.write("<br />");
document.write("I need coffee: " + needsCoffee);
document.write(" I am hungry: " + isHungry);

Lets talk about whats going on here

First, JavaScript executes from the top down. So the code on line 12 runs before the code on line 26. Which is good, because the code on line 26 is using the code from line 12 to do its equation. Next, we need to talk about what is happening in these document.write() methods.

When you see something like this in js: "my name is " + fullName this is called string concatenation. Again, you’re seeing that + operator (we talk about operators in the next lesson) but it doesn’t mean to do math in this useage. Js does its best to guess what you want to do with the + operator, based on the DATA TYPES its being used with in context. We concatenated fullName onto our string above, so it just makes it one string, inputting the value of fullName into the string for us. Useful stuff.

Now, you might be asking yourself… “Isn’t sum a number type?” and wooo boy you’re a sharp one. When you concatenate any data type onto a string, it becomes a string as well. This is called coercion, it’s useful but also dangerous. Other languages aren’t so forgiving.

I explained what comments were in the code, and then I used comments to explain the code. So you should understand comments by now, they’re ignored by the compiler and only meant for me and you to read.

Introduction To The Console

So far, we have been using document.write() to see the results of our code. As a developer, you have much better tools to read the output of your code. In the developer tools window (which you should always keep open when programming in the browser, so as to keep the cache disabled) you have a tab named “Console”. Lets start using the console. Change all of the document.write() to console.log(), and replace the “<br />” with “\n”.

1
2
3
4
5
6
7
// lets print this out to the browser
console.log("My name is " + fullName);
console.log("\n"); // this is a newline character, we could put this in the log above or below as well.
console.log("The sum of myNumber and aDecimal is " + sum);
console.log("\n");
console.log("I need coffee: " + needsCoffee);
console.log(" I am hungry: " + isHungry);

Conclusion

Great job. I know this might be somewhat overwhelming. There is a trick to learning how to write code: you need to write your own. You don’t know much right now, but as lessons go on you’ll be armed with more and more knowledge, and even though we will eventually build an app together, you should be writing code on your own, independent of our project(s).

I want you to mess around with this code, try some things out, look at errors you might see in the console.

If you have any questions or comments, click the "Go To Discussion" button below!