JavaScript Data Types: Part 1, Primitives

When first learning JavaScript, one of the things which contributed the most to my many errors was a poor understanding of data types. Now when I mentor new programmers, I try to present these concepts early, and I’ve been told this information has been really helpful to them, so I’ve decided to share it here.

JavaScript currently has 7 built-in data types:

• number
• string
• boolean
• undefined
• null
• object
• symbol

Here I want to concentrate on four of them—number, boolean, undefined, and null. These four — plus string and symbol — are also known as primitive values or “primitives.” Any other data type in JavaScript is an object, which I’ll be covering in a future article. The symbol data type is relatively new, and I won’t be covering it. In the next article I take a deeper look at the string data type.

You can use the built-in operator typeof to check a value:

typeof "hello";   // "string"
typeof 8;         // "number"
typeof true;      // "boolean"
typeof undefined; // "undefined"
typeof null;      // "object"

typeof null is a bug in JavaScript, as it returns “object.” This has been around for some time, and has not been fixed because to do so would “break” existing code which relies on it functioning in this way.

While some languages such as Java have typed variables, JavaScript has typed values. We say JavaScript is “dynamically typed,” which means you can change a value, and it’s data type will change:

var x;    // data type is undefined
x = 25;   // data type is now number
x = '25'; // data type is now string
x = null; // data type is now null

What is a primitive?

A primitive data type is the most basic data type available in a given language. Primitives cannot be broken down into something smaller. They are not collections, such as an object or array, which we’ll cover in future sessions, but they are the building blocks upon which objects and arrays can be built. Primitives are also immutable, meaning that their inner structure cannot be changed.

For example, if we have a string:

var str = "hello";

there is no way we can directly change this string to “Hello”. We’d have to assign a new string to the same variable in order to update it:

str = "Hello";

Again, I cover strings in depth in the next article.

Comparing values

JavaScript has several ways of comparing values. They are:

• Equality (==) [also referred to as ‘loose’ equality]
• Inequality (!=)
• Identity (===) [also referred to as ‘strict’ equality]
• Non-identity (!==)
• Less than (<)
• Less than or equal to (<=)
• Greater than (>)
• Greater than or equal to (>=)

When comparing values where the data types are different, JavaScript will try to convert one of the values to match the other and then handle the conversion. We call this implicit coercion.

Let’s look at an example:

var a = 3;
var b = "3";
a == b; // true

Here JavaScript will see that one value’s data type is number and the others’ is string. It will then try to convert the string into a number. If the two numbers match using strict equality (===) it will return true.

If, however, we use the identity operator (===), it will return false, because the number 3 and the string 3 are not identical:

var a = 3;
var b = "3";
a === b; // false

When you’re just starting out in JavaScript, it is recommended to always use strict equality (===) over loose equality (==), as it will lead to fewer bugs in your code.

However, when using the other comparison operators, care must be taken in order to achieve predictable results.

Take a look at some of the following behaviors:

null < 0;  // false
null <= 0; // true
null > 0;  // false
null >= 0; // true
null == 0; // false

Null is neither less than nor greater than nor equal to zero, but it is less than or equal to and greater than or equal to zero!

Sometimes implicit coercion seems to defy logic, as in the example above, but sometimes it can be a powerful tool in your developer toolbox. We’ll see some examples of the latter in the following sections.

We now know about implicit coercion, but there is a second type, known as explicit coercion. This is when we explicitly convert one data type to another.

Number

JavaScript has what are called ‘wrapper objects’ for the primitive data types number [Number()], string [String()], boolean [Boolean()], and symbol [Symbol()]. The Number() wrapper object can be used to explicitly coerce a value into a number data type:

Number('3');       // 3
Number('');        // 0
Number('three');   // NaN
Number(true);      // 1
Number(false);     // 0
Number(undefined); // NaN
Number(null);      // 0

NaN stands for “not a number” and is a value JavaScript uses when it cannot convert data into a valid number data type.

Numbers in JavaScript may be either integers or floating point numbers, so the following would work as well:

Number('3.14');    // 3.14

The preferred way of converting a string to a number, however, is to use either parseInt() or parseFloat(), depending on whether you want to end up with an integer or a floating point number (i.e. a number with a decimal point).

Boolean

The boolean data type may have one of two values: true or false.

Explicit coercion to a boolean:

var age;
Boolean(age); // false, because 'age' is 'undefined' here
age = 25;
Boolean(age); // true

implicit coercion to a boolean:

var age;
if (age) {
  console.log(age);
} else {
  console.log("There is no age.");
}
age = 25;
if (age) {
  console.log(age);
} else {
  console.log("There is no age.");
}

What will these two if statements print to the console?

Truthy & Falsy

As we’ve seen above, when a non-boolean value is coerced into a boolean, it will become either true or false. We call these truthy and falsy values. The following are always falsy:

• null
• undefined
• 0 (and -0)
• NaN
• '’ (an empty string)
• false

All other values will be truthy.

Undefined

One thing that is important to remember is that when JavaScript loads in the browser two things happen before the code is run:

• all function declarations will be saved into memory, and they will be immediately available to be run
• all variables will be hoisted to the top of the file, however they will be set to undefined: they will only be assigned their value when the code is run

undefined is a value which will most likely be assigned within JavaScript, and not something you as the developer will directly assign, unlike null, the last data type we’ll cover here.

Null

null is a data type and value which is ‘nothing’. It is often used as a placeholder value, for example when a function calls for a certain number of arguments, but you don’t need the functionality of a certain argument, you can pass in nullas an argument.

For more information you can read about it here.

For an in-depth look at strings in JavaScript, check out part 2 of this series here.

Questions? Comments? You can reach me at acropoiesis@gmail.com