JavaScript Data Types
Problem Statement
Did you ever hear this song from educational TV?
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
Define a data type
Demonstrate basic type checking with the
typeof
operatorIdentify JavaScript's seven basic data types
Describe interactions between data of various types in JavaScript
What Is a Data Type?
Everything in JavaScript is data except:
Operators:
+
,!
,<=
, etc.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
typeof
OperatorThroughout 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 withtypeof
. That said, JavaScript also supports()
aftertypeof
, 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:
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:
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.
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:
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"
.
null
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
:
undefined
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.'
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:
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:
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:
...to the comical:
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:
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
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
Last updated