JavaScript Data Types

Problem Statement

Did you ever hear this song from educational TV?

One of these things is not like the others.
One of these things doesn't belong.
Can you tell which thing is not like the other by the time
I finish this song?

What this song is asking the young viewer to engage in is a pretty powerful behavior: abstraction. It's looking at several concrete examples and finding some sort of "ideal" that the concrete examples all have in common and using that as a rule to find something that doesn't quite fit.

Doing this is one of the most profound problems in philosophy and human development. No less an authority than Aristotle wrote a whole book on it and how humans do it (one of the essential reasons why he differs from his teacher, Plato).

Who knew JavaScript would lead us to ancient Greece as well as "Sesame Street?"

In JavaScript, concrete instances of data can be categorized into abstract names called "data type" or, more simply, "type."

Objectives

1. Define a data type

2. Demonstrate basic type checking with the typeof operator

3. Identify JavaScript's seven basic data types

4. Describe interactions between data of various types in JavaScript

What Is a Data Type?

Everything in JavaScript is data except:

1. Operators: +, !, <=, etc.

2. Reserved words: function, for, debugger, etc.

Every piece of data falls into one of JavaScript's seven data types: numbers, strings, booleans, symbols, objects, null, and undefined.

Basic Type Checking Using the typeof Operator

Throughout this lesson, we'll use the typeof operator to give us an idea of what data types we're dealing with. typeof accepts one argument, the piece of data that we'd like to know the type of.

CAREFUL typeof is an operator, just like + or !. We get used to operators being only one character, but JavaScript (and many other languages) have operators with more than one character. As such, we don't need parentheses with typeof. That said, JavaScript also supports () after typeof, but it's commonly not done.

Identify JavaScript's Seven Basic Data Types

Numbers

Some programming languages divide numbers up into integers, decimals, doubles, floats, and so on. They do this so that they can have higher precision in their calculations. In a banking application or airplane wing engineering application we want our interest rate or the curve of the wing to be as accurate as possible. For good reason: we want to make sure we get paid or have a safe plane! When JavaScript was created, this level of precision was not thought to be a thing that would be needed, so JavaScript only has a single, all-encompassing number type:

typeof 42;
//=> "number"

typeof 3.141592653589793;
//=> "number"

typeof 5e-324;
//=> "number"

typeof -Infinity;
//=> "number"

Think About This: As JavaScript has become a language for the back-end as well as the front-end, it's imprecision around numbers keep it from entering many banking or engineering applications where precision is vital.

Strings

Strings are how we represent text in JavaScript. A string consists of a matching pair of 'single quotes', "double quotes", or `backticks` with zero or more characters in between:

typeof 'I am a string.';
//=> "string"

typeof "Me too!";
//=> "string"

typeof `Me three!`;
//=> "string"

Even empty strings are strings:

Booleans

A boolean can only be one of two possible values: true or false. Booleans play a big role in if statements and looping in JavaScript.

typeof true;
//=> "boolean"

typeof false;
//=> "boolean"

Objects

JavaScript objects are a collection of properties bound by curly braces ({ }), similar to a hash in Ruby or a dictionary in Python.

The properties can point to values of any data type — even other objects:

{
  "name": "JavaScript",
  "createdBy": {
    "firstName": "Brendan",
    "lastName": "Eich"
  },
  "firstReleased": 1995,
  "isAwesome": true
}

typeof {}
//=> "object"

From JavaScript's perspective, what we call "arrays" are just special cases of an object where the keys are all numbers. So while JavaScript has arrays like let dogs = ["Byron", "Cubby", "Boo Radley", "Luca"], JavaScript really thinks that typeof dogs is "object".

let dogs = ['Byron', 'Cubby', 'Boo Radley', 'Luca'];
typeof dogs;
//=> "object"

null

The null data type represents an intentionally absent object. For example, if a piece of code returns an object when it successfully executes, we could have it return null in the event of an error. Confusingly, the typeof operator returns "object" when called with null:

typeof null;
//=> "object"

undefined

The bane of many JS developers, undefined is a bit of a misnomer. Instead of 'not defined,' it actually means something more like 'not yet assigned a value.'

typeof undefined;
//=> "undefined"

let unassignedVariable;
typeof unassignedVariable;
//=> "undefined"

unassignedVariable = '';
typeof unassignedVariable;
//=> "string"

Any variable declared but not defined will be undefined until a value is assigned.

Symbols

Symbols are a relatively new data type (introduced in ES2015) that's primarily used as an alternative way to add properties to objects. Don't worry about symbols for now.

Primitive Types

Six of the seven JavaScript data types — everything except object — are primitive. All this means is that they represent single values, such as 7 or "hello" or false, instead of a collection of values.

How Different JavaScript Data Types Interact

Every programming language has its own rules governing the ways in which we can operate on data of a given type. For example, it's rather uncontroversial that numbers can be subtracted from other numbers...

...and that strings can be added to other strings:

'Hello' + ", " + `world!`;
//=> "Hello, world!"

But what happens if you mix them?

Some programming languages, such as Python, are strict about how data of different types can interact, and they will refuse to compile a program that blends types. Well, that's rather strict.

Other languages, such as Ruby, will attempt to handle the interaction by converting one of the data types so all data is of the same type. For example, instead of throwing an error when an integer (3) is added to a floating-point number (0.14159), Ruby will simply convert the integer into a floating-point number and correctly calculate the sum:

Ruby throws errors when some stranger cases come up:

> "THX-" + 1138
TypeError: no implicit conversion of Fixnum into String

That seems pretty reasonable: I don't know how to make the Integer, 1138, a String without being directly told that you want it to be a String (same as Python's rule).

That seems like a good baseline. However, JavaScript is a little too nice when handling conflicting data types. No matter what weird combination of types you give it, JavaScript won't throw an error and will return something (though that something might make no sense at all).

Sometimes this makes some sense:

'High ' + 5 + '!';
//=> "High 5!"

...to the comical:

null ** 2; // null to the power of 2
//=> 0

undefined ** null; // undefined to the power of null
//=> 1

{}+{}; // empty object plus empty object
//=> "[object Object][object Object]" <-- That's a string!

Why JavaScript returns a string when we ask it to add two empty objects is anyone's guess, but its heart is in the right place. The language always tries to bend over backwards for its human masters, returning actionable data instead of throwing errors. However, JavaScript's eagerness occasionally results in data type issues that surprise both novice and expert programmers alike.

Try to follow along with what's happening here:

1 + 2 + 3 + 4 + 5;
//=> 15

'1' + 2 + 3 + 4 + 5;
//=> "12345"

1 + '2' + 3 + 4 + 5;
//=> "12345"

1 + 2 + '3' + 4 + 5;
//=> "3345"

1 + 2 + 3 + '4' + 5;
//=> "645"

1 + 2 + 3 + 4 + '5';
//=> "105"

As long as we are only adding numbers to other numbers, JavaScript performs the expected addition. However, as soon as we throw a string in the mix, we stop adding and start concatenating everything together into a string. In the fourth example, we add the numbers 1, 2, and 3 together to get 6 (a number). We then ask JavaScript to add 6 (a number) to "4" (a string). JavaScript can't perform addition with a string, so it decides to concatenate the two operands instead, resulting in "64" (a string). The remaining operation, "64" + 5, is also between a string and a number, and JavaScript once again concatenates, giving us the final result of "645" (a string).

You'll encounter a lot of these weird data type behaviors throughout your JavaScript programming, but fear not: they'll trip you up less and less often as you gain experience.

Conclusion

Data types are representations of pieces of information and JavaScript defines seven different types: numbers, strings, booleans, symbols, objects, null, and undefined.

Resources

• MDN — JavaScript data types and data structures
• Destroy All Software — Types – A cross-language examination of type in various language
• Destroy All Software — Wat – A beloved and hilarious talk in which JavaScript's friendliness when mixing types is discussed at a feverish pace – with awesome slides