Beginning JavaScript - Variables and Primitive Data Types

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:

• Undefined type
• Null type
• Boolean type
• Number type
• String type

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.

var someVariableName = "a value";

let aDifferentVariableName = "a different value";

const anotherVariableName = "a different value";

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.

const someVariableName = "a value";

someVariableName = "a different value";

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.

const factoryProduct

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.

const factoryProduct = "pencil";

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.

const pencil = true;

const pot = false;

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:

if (factoryOpen === true) {
    makePencils();
} else if (factoryOpen === false) {
    doNotMakePencils();
}

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.

const numberOfPencils = 382;

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.

const factoryProducts = "pencils";

const factoryEmployee = "Jay 8374-D7";

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.

const factoryMotto = "Make the best pencils /
we can make, from the best materials /
available."

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.

const nametag = “Alicia”;

nametag = “Tony”;

This works with other data types as well.

const nametag = “Alicia”;

nametag = true;

nametag = 845;

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!