Learning JavaScript: Data types & operators

Data is what JavaScript uses to do anything and everything, so in this post I’m going to look at both primitive and composite data types and the operators that can be used to manipulate them.

Please note: This article is subject to constantly change as and when I learn more!

What are data types?

A data type is a value which JavaScript code can make use of. These values fall into two main categories; primitive and composite.

Primitive data types

A primitive (or primary) data type can store a single value. Primitive data types include numbers, strings and booleans. I’m going to go through these different primitive data types in turn, explain what they do and how they can be used.

Numbers

Quite self explanatory really; numbers are basic numeric values which can be manipulated by mathematical operations. For example:

• 4 + 2 will add 2 and 4 together
• 4 - 2 will subtract 2 from 4
• 4 * 2 will multiply 4 by 2
• 4 / 2 will divide 4 by 2
• 4 % 2 will divide 4 by 2 and find the remainder
  (% is called modulo)

Order of operations

If there is a long calculation with several operations, they will be carried out in a certain order:

1. Multiplication, division and modulo operations are carried out first;
2. Addition and subtraction operations are carried out second.

For example, in the calculation 10 + 6 * 2 / 3:

1. The multiplication operation will be carried out first, so 6 * 2 will equal 12;
2. The division operation will be carried out second. 12 will be divided by 3 and will equal 4;
3. The addition operation is carried out last. 10 will be added to 4 to finally equal 14.

Changing the order of operations

The order in which calculations are carried out can be changed if parentheses ( ) are placed around a part of it. Take the example below – just placing parentheses around a part of the calculation can affect the result.

I’m going to take the calculation above, but change it slightly: (10 + 6) * 2 / 3. Parentheses have been placed around the addition part of it, so the calculation will work as follows:

• The addition operation will be carried out first, so 10 + 6 will equal 16;
• The multiplication operation will be carried out second. 16 will be multiplied by 2 and will equal 32;
• The division operation is carried out last. 32 will be divided by 3 to finally equal 10.666666666666666.

Not a number

If you try to carry out a calculation on a number and a string of text (for example) or another data type that doesn’t make mathematic sense, the result will be NaN, which means Not a Number.

A check can be carried out on a data type to see if it is NaN which will return either true or false:

• isNaN(10) will return false;
• isNaN("String of text") will return true.

Strings

A string is used to represent text. Any sequence of characters can be placed within single quotes ' ' or double quotes " ". For example, 'This is a string' and "This is also a string". Strings of text are contained within quotes, as they define the start and end of the text and they differentiate them from variables.

Strings containing double quotes within them should be contained within single quotes, e.g. '"Good day" said the man.' and strings containing single quotes within them should be contained within double quotes, e.g. "A 'string' is traditionally a sequence of characters.".

Concatenation

Two or more strings can be joined together to make one. This is called ‘concatenation‘.

To concatenate strings, + is added in between each one. For example, "rain" + "bow" will return the string "rainbow". Concatenation can also be used to join variables and numbers together.

Boolean values

A boolean data type only has two possible values: true or false. When a comparison is carried out (for example, at the beginning of an if/else statement), a boolean value is returned for use.

The example below shows an if/else statement which checks to see if 8 is more than 6 by using the statement 8 > 6. If this statement is true (which of course it is), "True" will be printed to the console. If it isn’t, it will be classed as false and "False" will be printed to the console:

if(8 > 6) {
	console.log("True");
}
else {
	console.log("False");
}

"True"

Comparison operators

In the example above, I used 8 > 6 to mean “8 is more than 6“, but any of the other following operators can be used to check for other conditions:

• > More than
• < Less than
• >= Greater than or equal to
• <= Less than or equal to
• === Equal to
• !== Not equal to

Logical operators

Multiple conditions can be checked at the beginning of an if/else statement to determine its outcome. I’ll cover the ways this can be done…

And

• Two conditions can be specified and if both of them are true the statement runs the first block of code, else the code block under else is run;
• If one of the conditions is false, the whole condition amounts to being false and the code block under else will be run;
• && is used in between the two conditions to mean and, as in the example below.

The example shows two conditions which will be checked; I’m checking to see whether 8 is more than 2 (8 > 2) and whether 8 is more than 6 (8 > 6). If these conditions are both true (which they are), "True" will be printed to the console.

if(8 > 2 && 8 > 6 ) {
	console.log("True");
}
else {
	console.log("False");
}

"True"

Or

• Two conditions can be specified and if only one of them is true the first code block runs, else the code block under else is run;
• The whole condition will register as true if both conditions within it are true or only one of them is;
• Only if they are both false will the whole condition register as being false and the code block underneath else run;
• || is used in between the two conditions to mean or, as in the example below.

The example shows two conditions which will be checked; I’m checking to see whether 8 is more than 6 (8 > 6) or whether 8 is less than 4 (8 < 4). The first condition is true and the second is false. As only one of them needs to be true, the whole statement registers as being true and "True" will be printed to the console.

if(8 > 6 || 8 < 4 ) {
	console.log("True");
}
else {
	console.log("False");
}

"True"

Not

To explain not, I shall do so via some examples to make things a little easier.

• The if/else statement below checks to see whether the sum of 2 + 2 is less than 3 by using the condition 2 + 2 < 3;
• 2 + 2 actually equals 4 which isn’t less than 3 to the condition will register as being false;
• So the code block under else is run which prints "False" to the console.

if(2 + 2 < 3) {
	console.log("True");
}
else {
	console.log("False");
}

"False"

This next example is very similar to the one above but with one important change: the condition has been changed to !2 + 2 < 3. The ! at the beginning essentially flips the meaning of the condition to meaning the opposite thing, so now it is saying “If 2 + 2 is not less than 3, run the first block of code“. As this condition is now true, the first block of code is indeed run, and "True" is printed to the console.

if(!2 + 2 < 3) {
	console.log("True");
}
else {
	console.log("False");
}

"True"

Composite data types

Composite data types are more complex, and made up of primitive data types and other composite data types. Composite data types include arrays, functions and objects, all of which I shall take a look at, check this homepage and find more info!

Arrays

An array stores multiple pieces of data of different types (strings, numbers, etc.) at the same time. They can even store other arrays to create a nested structure.

Data within an array is ordered and indexed starting from zero (zero-based indexing), so the first item in the array will have an index of 0 and the fourth will have an index of 3.

This is what an array looks like – it is declared as a variable (of any name) and items are placed within square brackets [ ]:

var arrayName = [item1, item2, item3, item4];

I have written an article on arrays, so check that out to find out more about them.

Functions

A function is a process consisting of one or more lines of code which can be run when called by name. They can be called many times with different arguments, negating the need to write endless reams of code for similar processes.

This is what a function looks like – it is declared as a variable (of any name) and the code it runs is placed within curly brackets { }:

var functionName = function(parameter) {
	// Code that the function runs goes here...
};

functionName(argument);

I have written an article on functions, so check that out to find out more about them.

Objects

Description coming soon when I’ve learned about them properly!