JavaScript 101-#2 – Variables and data types Pt1

In the previous part of JavaScript 101 course we discussed basic methods that help us to manipulate with data. Most of these methods allow us to see the data. Today we will take a look at variables and also data types we can work with in JavaScript. This – second – post of course will be split into two parts.

This part will cover numbers, strings and booleans. Let’s stop talking and start coding …

Variables

You can imagine variables as a place where you can store data for later use. These data can be anything from simple numbers and characters to complex things like arrays and objects (don’t worry about what arrays or objects are for now). When you something inside variable, these data will remain there in same form until you either remove them or change them. Variables help you use code without the need to repeat it again and again, which can be pretty annoying in case of longer code.

To create variable you have to use “var” keyword followed by variable name. Name of variable depends only on you and can be almost anything. Not everything will work. Here are some notes about naming conventions to keep in mind when declaring new variable:

– variable names must begin with a letter, $ or _
– variable names are case sensitive (y and Y are different variables)
– don’t begin variable name with numbers or dashes (-)
– don’t use reserved words (JavaScript keywords) as variable names

If you break some of these rules, JavaScript will return error and variable will not be created. To use multiple words in variable name use either camel case (oneTwoThree) or _ (one_two). Few examples of valid variables.

JavaScript:

var x;
var _x;
var $x;
var varX;
var varY;
var item1;
var itemA;

In order to store data inside variable, add equal sign after variable name and then the data you want to store. To store text use single or double quotes to wrap it. Same as in methods, beginning and ending quotes must be same. End every line with semicolon.

JavaScript:

var animal = "dog";
var animal2 = 'cat';
var animal3 = "shark'; // this is NOT valid and will cause error - quotes
var number = 3;

You can either define empty variable and then assign some value (data) to it or define it and assign data at once. In case of defining empty variable first, don’t use “var” keyword again when assigning value.

JavaScript:

// First case - define empty first and assign later
var example1;
example1 = 5;
var example2 = 6;
// Second case - defining and assigning at once
var example1 = 13;
var example2 = "JavaScript";

You can also define more empty variables and then assign values to them in random order, just use the right variable names.

JavaScript:

var example1;
var example2;
var example3;
var example4;
example2 = 'Barracuda';
example3 = 58962;
example1 = "Shephard";
example4 = 3.14;

There is one smart trick you can use when defining multiple variables. You can create them by using only one “var” keyword and writing comma after every variable and semicolon after the last one.

JavaScript:

var x,
y,
y,
example;

This is same like:

JavaScript:

var x;
var y;
var example;

This trick works also when you define create variable and assign value at once.

JavaScript:

var x = 1,
y = 'Rhino',
example_1 = 0.618,
$example = "Da Vinci";

This is same as:

JavaScript:

var x = 1,
var y = 'Rhino',
var example_1 = 0.618,
var $example = "Da Vinci";

note: You don’t have to write every variable on new line. I do it for better readability.

JavaScript:

var x = 1, y = 'Rhino', example_1 = 0.618, $example = "Da Vinci"; // This is also valid

Data types

So, what data can we store in variables? Available are numbers, strings, boolean, arrays and objects. We will explore each of them more in-depth to understand them.

Numbers

There is not so much to talk about when it comes to numbers. When you want to store some whole number, you either write it with decimal dot and 0 or not. JavaScript make no difference between them.

JavaScript:

var number1 = 87;
var number2 = 87.0; // for JavaScript, this is the same

Decimal numbers are called floats. To write valid floats use dot not comma.

JavaScript:

var example1 = 7.45; // valid
var example1 = 7,45; // not valid

Strings

Any text is called string. Strings have to be surrounded by quotes, either single or double, same on begin and on the end. You can also use both types of quotes to write direct speech.

JavaScript:

var string1 = "This is just for fun.";
var string2 = 'Charles bridge';
var string3 = "Johnny said: 'There is always some chance.'";
var string4 = 'His mum said: "Do your homework"';
One thing ... Number written inside quotes is threatened by JavaScript as a string.
JavaScript:
var number = 15; // this is number
var string = "15"; // this is NOT number, but a string

You can concatenate multiple strings using plus sign. This works either inside single variable as outside – to concatenate two variables. To concatenate multiple variables don’t use quotes.

JavaScript:

// inside one variable
var example = "Josh " + "is " + "learning " + "JavaScript.";
// concatenating multiple variables to create another
var start = "Josh ",
middle = "is learning ",
end = "JavaScript.";
var sentence = start + middle + end; // result: "Josh is learning JavaScript."
// case of numbers
var number1 = 18;
var number2 = 22;
var number3 = number1 + number2; // result: 40

Quick note: When you concatenate string with numbers, the result is always string.

JavaScript:

var example = 13 + " Javascript"; // result: "13 JavaScript"

Booleans

This data type has only two valid values – true or false. To store boolean value, don’t use quotes or you will create string. Booleans are often used in conditional statements (don’t worry about them now).

JavaScript:

var example = true; // this is boolean
var example2 = false; // also boolean
var example3 = "false"; // not a boolean

Summary

We discussed how to create variables and also took a look at practices for naming them. We also took a look at some primitive data types like numbers, strings and boolean. In next part we will explore arrays, objects and more.

If you liked this article, please subscribe so you don't miss any future post.

Subscribe

If you'd like to support me and this blog, you can become a patron, or you can buy me a coffee 🙂

Become a Patron Donate via Paypal