As of a 2018 StackOverflow survey, JavaScript is the most popular and widely used programming language today. If you're learning front-end web development, it's an essential skill alongside HTML and CSS, and while at first glance it might seem like JavaScript is just for flashy menu animations, it's a powerful programming language in its own right, and learning how to use it properly will not only help you build better projects, but also teach you more about how the Web works and how your work can best integrate with it.
JavaScript is governed by the ECMAScript standard (if you ever see acronyms like ES6,ES2015, etc., this is what they're referring to), specifications that ensure its cross-compatibility between browsers and platforms, and integrate new features as JavaScript grows and evolves.
When you’re just starting out with JavaScript, it’s important to focus on the basics. In any programming language, code defines a set of instructions with data. The format that data takes is called a data type and the way those types work together is a data structure.
As of ECMAScript 2020, JavaScript has seven main—or primitive—data types, five of which we’ll focus on here:
There’s also BigInt
and Symbol
, which are a bit out of the range of what you need to know as a beginner. If you’d like to read more about them, the Mozilla Developer docs have some great info on both Symbols and BigInts, but for now, let's focus on the others and the way in which values are stored and reused in JavaScript.
Data Types and Variables
Data types can be assigned to variables for ease of repeated use, and variables are simply symbolic names that represent a value (the data type itself). In JavaScript, variables can be declared in three ways that affect how they can behave: var
,let
, and const
.
Depending on what declaration statement is used to declare a variable, it can be confined to different parts of the code, unable to be used elsewhere. This is called scope, and it affects where a variable is valid in a program.
In the first example, someVariableName
is, you guessed it, the name of the variable, and a value
is the value of that variable. So if we were to use someVariableName
somewhere in our code after declaring it (and it fell within a valid scope of use), the code would know we mean a value
when we use that variable again.
Primitives are the most basic types of values a variable can hold. Because JavaScript is a dynamically-typed language, variables aren’t explicitly associated with a particular data type, and can be assigned and reassigned values of all types—the variable name is just symbolic. What matters is the data type stored in the variable.
Okay, this can get complex quick, but for now, let’s look at the most common kinds of primitive data types in JavaScript as assigned to simple variables.
Undefined and Null
Undefined data types are those that don’t have anything assigned to them yet. Imagine you’ve got a factory you’re starting, but you haven’t decided just what your factory is going to make. The products of the factory are undefined: you haven’t decided on their specifics yet, you just know they’re going to be something.
JavaScript automatically assigns this designation of undefined
if you haven’t explicitly declared what data type you’re using. As soon as you say your factory makes something specific, like pots or pencils, you define the products, and they are no longer undefined.
Undefined data types can be useful as a placeholder to come back to later in the program, if the value is going to be dependent on other factors. An undefined value is one that doesn’t exist yet.
Null, on the other hand, is a value (sort of), but it’s an empty one. A variable with a value of null
is intentionally devoid of value... and that is its value. Does your head hurt yet? Welcome to programming.
A factory variable with an undefined
value is a factory that doesn’t know (or hasn’t been told) what it’s going to make yet. It might be pencils or candy bars or inflatable unicorn horns for cats. A factory with a value of null
, on the other hand, is one whose interior is a vacuum of nothingness as empty as the void.
Great! Let’s continue.
Boolean
This can be a scary word when you first start out, but Booleans are extremely simple: they’re either true
or false
. That’s it. Your factory product either is a pencil, or it isn’t.
Booleans (named after mathematician George Boole) can be really handy for checking for values or conditions in your code, and are often used as a kind of switch in the flow of a program. If something is true
, do this; if it’s false
, do something else. This can allow for dynamic operations to trigger in your code depending on if certain conditions are met:
See the ===
? That’s called an equality operator. It’s checking that the factoryOpen
variable is true
in the Boolean sense of the value, instead of maybe just representing the word true. More on those pesky equals signs later.
Number
A number primitive is just what you think: a number! In other programming languages, there are often specific data types for different kinds of numbers with decimals, whole numbers, etc., but good old JavaScript keeps things simple by just calling most of them numbers. As mentioned earlier, there is a BigInt
data type for exceptionally large numbers, but we don't need to cover those yet.
String
In JavaScript, as well as many other languages, a string represents textual data as a sequence of characters surrounded by double or single quotes (either kind work, as the quotes aren't part of the actual stored value). Strings can include numbers or letters, but their value is read literally as textual data, not as numeric data. Hence why these strings are called string literals.
A string can be as small as a single character, or encompass longer text. For text that spans multiple lines, adding a backslash to the end of the line break allows for more text to be stored in the variable.
Since strings are immutable, like all other JavaScript data types, they can be reassigned after getting their initial value. Think of this as if you’re wearing a name tag written in permanent marker. Once you’ve written your name on your tag, you can’t try to squeeze new letters or words in. You can, however, replace the name tag with a new one that includes your changes.
This works with other data types as well.
Summing Up
The values you use in JavaScript are data types, the most basic of which are called primitive data types: Boolean, Number, String, Undefined, and Null. Other common data types include arrays, functions, and objects, but we'll cover those in the next article, where we'll also talk more about how data types can be assigned and compared, and start manipulating our values in interesting ways. Happy coding!
Top comments (3)
It's good interview question: what exactly is JavaScript number? Is it an integer or something else? Surprisingly, most of candidates fail.
I think that’s one of the tough things to wrap your head around with a loosely-typed language like JavaScript. They can be greatly beneficial because of their variability, but sometimes defining things can get abstract.
I would just say “a JavaScript number is a wrapper for a numeric value, whether it’s an integer, float, etc., within the scope of available precision.”
Yes, the dynamic nature of JavaScript can make one feel that everything is just wrapper of whatever 🙂 However, if we are talking of
number
-the-primitive, it's always floating-point double precision number, known asdouble
in C and Java.