# Primitive Data Types

Updated on Dec 22, 2021 by [Alan Morel](/content/alanmorel/index.html)

## Table of Contents

1. [Number](/content/classes/javascript/primitive-data-types#number/index.html)
2. [String](/content/classes/javascript/primitive-data-types#string/index.html)
3. [Boolean](/content/classes/javascript/primitive-data-types#boolean/index.html)
4. [Symbols](/content/classes/javascript/primitive-data-types#symbols/index.html)
5. [Null](/content/classes/javascript/primitive-data-types#null/index.html)
6. [Undefined](/content/classes/javascript/primitive-data-types#undefined/index.html)
7. [Resources](/content/classes/javascript/primitive-data-types#resources/index.html)

Let's explore all of [JavaScript](/content/classes/javascript/index.html)'s **primitive data types**. A data type describes what kind of data is being held, and the reason why the following data types are referred to as _primitive_ is because they are considered basic building blocks of the programming language. JavaScript has a number of primitive data types, each one with its own unique properties and methods.

## Number

**Numbers** are pretty self-explanatory. After you declare a variable, you can initialize it with a number of any kind, and it will retain that value.

```javascript
const cars = 7;
console.log(cars);
```

```bash
7
```

Numbers are used extensively in JavaScript, as they are one of the most common data types.

## String

**Strings** in JavaScript are text that you can assign to a variable. You can **concatenate** (combine) two strings by using the `+` operator. Under the hood, strings are just arrays of characters.

```javascript
const city = "New York City";
console.log("The greatest city in the world is " + city + ".");
```

```html
The greatest city in the world is New York City.
```

### Template Literals

An alternate way to work with strings in JavaScript is **template literals**. Template literals are useful because they support multiple lines and string interpolation (being able to insert variables).

```javascript
console.log(`Look how
cool this string is.
It is on multiple lines!`);
```

```html
Look how
    cool this string is.
    It is on multiple lines!
```

Template literals allow you to avoid using the newline character or needing to escape anything.

### String Interpolation

**String interpolation** lets you easily use variables inside your strings via its `${variable}` syntax. Here's an example:

```javascript
const restaurant = "Chipotle";
console.log(`My favorite restaurant is ${restaurant}!`);
```

```html
My favorite restaurant is Chipotle!
```

String interpolation is useful for inserting variables into strings and is recommended over concatenation because it's easier to read and maintain.

### ToLowerCase

Calling `toLowerCase` on a string will return the same string with any uppercased letters replaced with lowercase letters.

```javascript
const place = "Mexico City";
console.log(place.toLowerCase());
```

```javascript
mexico city
```

### ToUpperCase

On the other hand, to do the reverse and capitalize all letters in a string, simply call `toUpperCase` on it. This will return the same string with all lowercase letters replaced with uppercase letters.

```javascript
const place = "Mexico City";
console.log(place.toUpperCase());
```

```javascript
MEXICO CITY
```

### Repeat

You can repeat a string as many times as you want using the `repeat` method. It takes a number as the parameter representing how many times you'd like the string to repeat. Here's an example:

```javascript
const phrase = " time and";
const sentence = "I dominate in Fortnite" + phrase.repeat(3) + " time again.";
console.log(sentence);
```

```html
I dominate in Fortnite time and time and time and time again.
```

### Replace

There will be times when you will want to replace a certain substring with another substring inside a string.

For example, let's say you want to replace the word `red` with `blue`:

```javascript
const sentence = "The house is red.";
const newSentence = sentence.replace("red", "blue");
console.log(newSentence);
```

```javascript
The house is blue.
```

### Includes

The last JavaScript string method we'll take a look at is the `includes` method. This method checks to see if a substring exists inside another string, and returns `true` if it does or `false` if it does not. Here's an example:

```javascript
const sentence = "The house is red.";
console.log(sentence.includes("house"));
console.log(sentence.includes("tiger"));
```

```javascript
true
false
```

## Boolean

A **boolean** is a data type that has only two values, `true` or `false`. **True** generally means "correct" or "yes" while **false** generally means "incorrect" or "no".

```javascript
const pizzaIsGood = true;
const wholeFoodsIsCheap = false;
```

## Symbols

**Symbols** are tokens that serve as unique IDs. Because each one is different, you can use this to your advantage.

For example, you can use them to give values to constants that you define. Let's say you run a company that makes shirts. You can use symbols to keep track of all the sizes you sell:

```javascript
const SIZE_XSMALL = Symbol();
const SIZE_SMALL  = Symbol();
const SIZE_MEDIUM = Symbol();
const SIZE_LARGE  = Symbol();
const SIZE_XLARGE = Symbol();
```

In the real world, each size is distinct, and so will each value in these constants. Now with this, you can write elegant code like this:

```javascript
function getShirtsLeftInSize(size) {
    if (size === SIZE_XSMALL) {
        return 4;
    } else if (size === SIZE_SMALL) {
        return 6;
    } else if (size === SIZE_MEDIUM) {
        return 3;
    } else if (size === SIZE_LARGE) {
        return 7;
    } else if (size === SIZE_XLARGE) {
        return 12;
    }
}

const mySize = SIZE_SMALL;
console.log("There are " + getShirtsLeftInSize(mySize) + " shirts left in your size.");
```

```html
There are 6 shirts left in your size.
```

Sure, you could do this without using symbols like this:

```javascript
const SIZE_XSMALL = "XSMALL";
const SIZE_SMALL  = "SMALL";
const SIZE_MEDIUM = "MEDIUM";
const SIZE_LARGE  = "LARGE";
const SIZE_XLARGE = "XLARGE";
```

But the problem with that is that none of the values of these constants can be **guaranteed to be unique**. Nothing would stop anybody from just creating a new string variable and assigning it a valid size name:

```javascript
const mySize = "SMALL";
```

That would still work, but it requires knowing the **exact value** of the constant, whereas with symbols, you just need the **name** of it. This is why symbols are so useful.

## Null

**Null** is a special value in JavaScript that essentially means **nothing**. It's often used to indicate that a variable has no value.

```javascript
const pears = null;
```

The variable `pears` is empty and void of a value.

## Undefined

**Undefined** is another special value in JavaScript. When a variable is declared but not initialized, its value is undefined, because no value was given to that variable, not even the value `null`.

```javascript
const pineapples;
console.log(pineapples);
```

```html
undefined
```

Each primitive data type has a use-case and it's important to know when to use each one.

## Resources

- [Primitive - MDN Web Docs](https://developer.mozilla.org/en-US/docs/Glossary/Primitive)