Primitive Data Types (JavaScript)

Each language has basic data types known as primitive types. You will be using these types extensively as you program in Javascript.

I won't go into too much detail on each one but will just give some basic information.

The first type is boolean. This only has two values: true or false.

Next is null. This means it is nothing and will evaluate as false.

There is also a number type. This includes integers (1, 2, 3...), floating-point numbers (1.2, 2.3, 5.3), and doubles (same as floating-point in JavaScript). JavaScript doesn't have the concept of doubles and floats like other languages have.

Another type is the string type. This is any text you display or receive from HTML input like ("Hello World!");

Finally, there is the undefined type. If something isn't defined it is undefined. You can even do something like var x = undefined;, though you could argue that it is not longer undefined because you just defined it. This will also evaluate as false.

Hopefully you have a better understanding of the basic data types of JavaScript.

Variable Basics (JS)

In this first part of the Basics Series, we are going to look at variables in JavaScript. First we will look at declaring and using variables and then discuss some of the gotchas. I will leave ES2015 variable declaration until after we discuss some other fundamentals.

First things first, head on over to https://plnkr.co and start a new project. From there go to script.js in order to edit it.

For the first exercise, let's declare a variable using the var keyword.

var x = "x";

What we did was declare x to be variable and assigned it the string "x".

If you now type in: document.writeln(x); you will see that "x" is printed to the Live Preview.

Please note that document.writeln() is not really recommended and Plunker will let you know that. We are doing it this way for now to simply display some text to the browser.

One of the things you can do with strings is use the + operator to concatenate them. Concatenate is a fancy term for join.

So if you type document.writeln(x + "y"); you will see "xy". Easy right? You also could have easily assigned "y" to a variable and added the variables together to produce the same effect.

Strings will be very useful in your journey since HTML is basically one large string.

Moving on, let's look at numbers.

Go back to where you declared "x", declare a variable called one and assign it a value of 1.

It should look something like this:

var x = "x";
var one = 1;

Doing a document.writeln(one); you will get 1;

Now here is where some trickiness occurs and I want you to see it first hand.

What do you see when you type document.writeln(one + "1");? What did you expect to see? JavaScript automatically converted the type of the variable one to a string which is why you got 11 instead of 2.

Now try document.writeln(one + 1); Is that more of what you expected? Keep this automatic type conversion in mind.

Speaking of type conversion, sometimes we wanted to check if a variable is the same as another value. In most languages you would use the == operator. Let's try that.

What is the output of document.writeln(one == 1);? That's exactly what we expect right? We get a true value.

What about if we did document.writeln(one == "1");? Still true right? JavaScript did an automatic type conversion for you.

Most of the time that is not the desired result. We want to know if they are exactly equal.

Try this: document.writeln(one === "1"); What did you get this time? It is false because the automatic conversion does not take place and the integer 1 does not equal the string "1".

This, however, will give you true: document.writeln(one === 1);

One thing you could do is use parseInt(). This will take your string "1" and make it the integer 1.

For the last exercise, try document.writeln(one === parseInt("1"));

You should get true now.

Just for a quick reference, you should have something like below for your code. Please don't just copy and paste this. Actually try to type it and work through it.

var x = "x";
var one = 1;

document.writeln(x);
document.writeln(x + "y");
document.writeln(one);
document.writeln(one + 1);
document.writeln(one + "1");
document.writeln(one == 1);
document.writeln(one == "1");
document.writeln(one === "1");
document.writeln(one === 1);
document.writeln(one === parseInt("1"));