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.
NAVIGATION
TABLE OF CONTENTS
Code Download |
Variable Basics |
Data Types |
Slightly Advanced |
Useful Bits |
What’s Next? |
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

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 withequals (=)
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:
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!