Beginning JavaScript - Variables and Primitive Data Types
Tags: codenewbie, javascript, webdev, beginners
Published: 2020-09-12 15:12:57

<figcaption style="text-align: left">Note: These are some beginner JavaScript concepts explained with as little jargon or complexity as possible. However, this is not an all-encompassing guide (yet), I am not a coding genius, and exceptions exist for some of these examples. The point here is just to get used to some core ideas of programming in JavaScript.</figcaption>

---

As of a [2018 StackOverflow](https://insights.stackoverflow.com/survey/2018/) 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](https://en.wikipedia.org/wiki/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](https://tc39.es/ecma262/2020/), JavaScript has [seven](https://tc39.es/ecma262/2020/#sec-primitive-value) main—or **primitive**—data types, five of which we’ll focus on here:

- [Undefined type](#Undefined)
- [Null type](#Undefined)
- [Boolean type](#Boolean)
- [Number type](#Number)
- [String type](#String)

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](https://developer.mozilla.org/en-US/docs/Glossary/Symbol) and [BigInts](https://developer.mozilla.org/en-US/docs/Glossary/BigInt), but for now, let's focus on the others and the way in which values are stored and reused in JavaScript. 

<br />

## 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`. 

```javascript
var someVariableName = "a value";

let aDifferentVariableName = "a different value";

const anotherVariableName = "a different value";
```
<figcaption>Three variables with separate values.</figcaption>

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](https://en.wikipedia.org/wiki/Type_system#Dynamic_type_checking_and_runtime_type_information), 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.

```javascript
const someVariableName = "a value";

someVariableName = "a different value";
```
<figcaption>Here someVariableName's value of "a value" is replaced when the variable is reassigned "a different value".</figcaption>

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. 

<br /> 

## <h2 id="Undefined">Undefined and Null</h2>
**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
const factoryProduct
```
<figcaption>The variable factoryProduct is declared, but not defined with a value, thus it is undefined.</figcaption>

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.

```javascript
const factoryProduct = "pencil";
```
<figcaption>The value of factoryProduct is no longer an undefined type, and is now a string type.</figcaption>

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](https://mcphee.com/products/inflatable-unicorn-horn-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. 

<br />

## <h2 id="Boolean">Boolean</h2>
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. 

```javascript
const pencil = true;

const pot = false;
```
<figcaption>There's no philosophical debating in programming. The pencil is true and the pot is false.</figcaption>

Booleans (named after mathematician [George Boole](https://en.wikipedia.org/wiki/George%20Boole)) 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:

```JavaScript
if (factoryOpen === true) {
    makePencils();
} else if (factoryOpen === false) {
    doNotMakePencils();
}
```
<figcaption>Booleans help the logic of your code flow towards a desired outcome.</figcaption>

See the `===`? That’s called an [equality operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators). 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. 

<br />

## <h2 id="Number">Number</h2>
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. 

```javascript
const numberOfPencils = 382;
```
<figcaption></figcaption>

<br />

## <h2 id="String">String</h2>
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**.

```JavaScript
const factoryProducts = "pencils";

const factoryEmployee = "Jay 8374-D7";
```
<figcaption>In the second example, Jay 8374-D7 has </figcaption>

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.

```JavaScript
const factoryMotto = "Make the best pencils /
we can make, from the best materials /
available."
```
<figcaption>Splitting a string into multiple lines can help with readability for anyone who might need to work on your code (including you!).</figcaption>

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. 

```JavaScript
const nametag = “Alicia”;

nametag = “Tony”;
```
<figcaption>Strings can’t be changed, but they can be reassigned to a different value.</figcaption>

This works with other data types as well.

```JavaScript
const nametag = “Alicia”;

nametag = true;

nametag = 845;
```
<figcaption></figcaption>

<br />

## 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!