Javascript Basics – Variables and Data Types

INTRODUCTION
THE FIRST STEP

Welcome to a beginner’s tutorial on Javascript variables and data types. Every good programming tutorial needs a “hello world” introduction, a first step, and here it is – Variables and data types are amongst the very first things that you will need to know in Javascript.

For you advanced code ninjas who have learned other programming languages, this is going to be a breeze for you. As for you absolute beginners, fear not. I will give some examples along the way, so read on!

ⓘ I have included a zip file with all the example code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

 

 

 

EXTRA
SOURCE CODE DOWNLOAD

First, here is the download link to the example source code as promised.

 

EXAMPLE CODE DOWNLOAD

Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

QUICK START

  • Download and unzip into a folder.
  • Hooray! There is no database involved, so just follow through each of the files contained within.

 

CHEAT SHEET

Javscript variables and data types (click to enlarge)

 

SECTION A
VARIABLE BASICS

Let us start with the raw simple basics called “variables”, one of the very foundations of Javascript.

 

FIRST STEPS WITH VARIABLES

What are variables?

So just what the heck are variables in programming? Let me do a quick quote from WhatIs.com:

In programming, a variable is a value that can change, depending on conditions or on information passed to the program.

Yep, simply put in the layman terms, you can think of variables as just containers to store data values in.

 

 

1) Defining a variable

var person = "John Doe";
var count = 10;
var check = true;
  • Start the statement with a var.
  • Followed by whatever name you want to call it.
  • Assign a value to the variable with equals (=) to something.
  • Lastly, we close the statement with a semi-colon (;) at the end, something like a full-stop in English.

 

2) Using variables

Now that you know how to declare variables, we can use them in many ways such as Mathematical calculations.

var x = 10;
var y = 8;
var z = x + y;

The above var z will be assigned a value 18 (which is 10 + 8). That is variables in a nutshell, but there are a few more variable yoga that you should know.

 

3) Values can be reassigned

var person = "John Doe";
person = "Jane Doe";

Of course, they can be reassigned. But notice that we do not need to declare “var” the second time we use it? That is because we have already declared “person” as a variable, and do not need to do it again.

 

 

4) You can define empty variables

var person;

Some of you guys may think that this makes no sense, but it does. We will go through that in a later series, but for now, just know that you can declare a variable and not assign a value to it.

 

COMMENTS

// This is a line of comment and will be ignored during processing
var x = "Hello World";
 
/* This is also a comment.
Whatever is enclosed within this pair of 
"slash-star-star-slash" will be ignored. */
var y = "Goodbye World";

There are times where we need to write some comments in our scripts to remind yourself of what needs to be done – Especially when it comes to stinky long scripts. We can do so by:

  • Starting the line with a pair of forward slashes //.
  • Enclosing the comments within a pair of /* and */.

Do keep it a good habit to write nuggets of comments (not grandmother story) for yourself, and also for others who might be working on your script.

 

CONSTANTS

const pi = 3.142;
var diameter = 123;
var circumference = pi * diameter;

// TRYING TO REASSIGN PI WILL NOT WORK & WILL RESULT IN AN ERROR
pi = 1234;

Now that you have the basics of variables, here is something else that you should know of – constants. Constants are something like variables, except that once you declare them, you cannot change the value. Very useful for declaring stuff like pi.

 

LET

Ready for more confusion? Apart from variables and constants, there is something called “let”.

let x = 999;

This may seem the same as a variable, but there is a stark difference between them. As this requires quite a bit more understanding of the basics, I will hold off the explanation in another tutorial. For now, just know that there is var, let, and const in Javascript (You can stick to just using var if you want to keep things simple).

 

SECTION B
DATA TYPES

From the above examples, you have seen how we can assign names and numbers to variables. So for this final section of the tutorial, we will walk through the different types of data in Javascript.

 

THE VARIOUS DATA TYPES

1) String

var first_name = "John";
var last_name = "Doe";
var full_name = first_name + " " + last_name;

Strings are just text. If we “add” to strings together, they will combine into one. We call this “concatenation” and will walk through more of that in another tutorial.

 

 

2) Number

var x = 10;
var y = 8.5;
var z = x + y;

As demonstrated above, numbers are numbers in Javascript. This can be kind of confusing for you guys who are complete beginners, but some programming languages do differentiate between whole numbers and decimals – They have multiple data types of integer, decimal, and float… Thankfully, it is a lot of straightforward in Javascript.

 

3) Boolean

var pass = true;

Boolean is probably the easiest to understand in Javascript. Yep, it is just true or false, 1 or 0.

 

4) Array

var animals = ["cat", "dog", "sheep", "alpaca", "horse"];
var mix = ["John", 123, true];

Arrays are “containers” for variables, which can really be a mix of any data type… You can even put an array into an array.

 

5) Objects

var person = {
  first_name : "John",
  last_name : "Doe",
  age : 123
};

Objects are something like an array, but a tad bit more… advanced. Will go through this again in a later tutorial.

 

6) Empty

var person; // person is undefined
person = null; // person is now null
alert(undefined===null); // false, undefined is not null!?

Remember that we can define an empty variable? Well, we call that an undefined variable, but what is interesting in Javascript is that there is a “null” value which also indicates “an empty value”. The funny part is that null and undefined are not the same!? Eh… well, I never had too much trouble with undefined and null, so let us just leave it as it is… Just know that these 2 weirdos are not the same.

 

 

SECTION C
SLIGHTLY ADVANCED STUFF

All right, now that you are armed with the basics, it is time to go a little deeper into the depths of variables.

 

RESERVED WORDS

You can name the variables whatever you wish… But there are still certain rules, and you cannot use the following words:

abstract boolean break
byte case catch
char class const
continue debugger default
delete do double
else enum export
extends false final
finally float for
function goto if
implements import in
instanceof int interface
let long native
new null package
private protected public
return short static
super switch synchronized
this throw throws
transient true try
typeof var void
volatile while with

I don’t think I need to further explain why these words are reserved – The system uses these, and it will be impossible to work properly if you did a var var = "foo bar". 🙄

 

JAVASCRIPT IS A LOOSELY TYPED LANGUAGE

In the world of programming, you will often hear these 2 terms:

  • Loosely typed language.
  • Strictly typed language.

Just what do these mean? In a strictly typed language, you must also define the data type of the variable, and you cannot change the data type once it is defined. For example, if you define a variable as an integer, it must be a whole number and it cannot be anything else.

// IN A STRICTLY TYPED LANGUAGE, YOU MUST SPECIFY THE DATA TYPE
int myNumber = 123;

// ONCE DEFINED, YOU CAN STILL REASSIGN IT, BUT NOT CHANGE THE DATA TYPE
myNumber = 456; // OK
myNumber = 123.456; // NOT ALLOWED
myNumber = true; // NOT ALLOWED
myNumber = "foo!"; // NOT ALLOWED

In Javascript, there is no such restriction; The data type of a variable does not matter, and thus, a loosely typed language.

 

 

EXTRA
USEFUL BITS

That’s it for the code examples and confusing stuff. Here are a few small extras that you may find useful.

 

VAR VS LET VS CONST

So just what are the differences between  var, let, and const ? This guide will explain everything:

Javascript 101 – VAR vs LET vs CONST

 

LINKS & REFERENCES

 

CLOSING
WHAT NEXT?

Thank you for reading, and we have come to the end of this short tutorial. I hope that your first step into Javascript is not too bad, and if there anything that you wish to add to this guide, please feel free to comment below. Good luck and happy coding!

Leave a Comment

Your email address will not be published. Required fields are marked *