JavaScript Fundamentals: Data Types
Tags: webdev, javascript, beginners, programming
Published: 2024-01-30 15:00:05

Let’s take a look at data type fundamentals in JavaScript! 

By the end of the article, you’ll have an increased understanding of working with many of the major data types. Which is a fundamental skill to pickup, as you move forward with JavaScript.

---
> 🤓 Want to stay up to date with web dev?
> 🚀 Want the latest news delivered right to your inbox?
> 🧑‍💻 Join a growing community of designers & developers!
> 🎉 **Subscribe to my newsletter → [here](https://easeout.eo.page)**

---

## What are Data Types?

Data types are classifications of specific types of data. We have numbers, Booleans (true or false), strings (character sequences enclosed in quotes `‘’` or `“”`) and more complex data types known as arrays and objects (we’ll look at these a bit later).

```javascript
let a = 1;           // a is a number
let a = "Avocado";   // a is a string
let a = true;        // a is a Boolean
let a;               // a is undefined
```

For example, `a`, has been defined as a variable using the `let` keyword. We can assign any *data* type to it, or even just initialize it by leaving it blank.

**Why Does it matter?**

When storing data in a variable, it’s important that we know its type, as that determines what we can do with it! For instance, you can add numbers `1 + 1 = 2`, and that’s fine. However, if you attempt to add numbers when they have the data type of string `“1” + “1” = 11` Your result will be 1 and 1, not the sum equaling 2 as you may have expected. Let's now take a look at each type in detail.

### Numbers

Numbers in JavaScript can be written with *or* without decimals, such as:

```javascript
let a = 1;
let b = 1.1;
```

*And they can be abbreviated using the `e` exponent, for example:*

```javascript
let million = 1000000;

// or..

let million = 1e6;
```

The 6 is the amount of 0’s, which in this case equals one million.

There are a few special values that we often encounter when working with numbers, `Infinity`, `-Infinity` and `NaN.`

If you attempt to divide a number by 0, such as:

```javascript
3/0    // Infinity
```

The result will be Infinity. As the JavaScript computes the result outside its largest possible number of `9007199254740992`. The opposite would yield:

```javascript
-3/0   // -Infinity
```

The value of `NaN` represents ‘Not a Number’, meaning the value isn’t considered a number. This would generate in illegal expressions, such as:

```javascript
let a = 100 / "Greg";     // a will be NaN
```

As of course you can’t divide a number by a string!

However, JavaScript is smart enough to convert your data type in some cases, such as:

```javascript
let a = 100 / "2"         // a will be 50
```

JavaScript will use type coercion to consider your “2” string to be a number in this case.

### Strings

As mentioned earlier, strings are sequences of characters that exist within either single or double quotes:

```javascript
let foodChoice = 'Crunchy cheddar jalapeno cheetos';
let foodChoice = "Crunchy cheddar jalapeno cheetos";
```

Strings aren’t limited to letters either, numbers and symbols are also acceptable. It’s the quotes that define our string data type.

It really comes down to personal preference as to whether you use single or double quotes, consistency is what’s most important within your code!

```javascript
let eater = “Bruce”;
let foodChoice = "Crunchy cheddar jalapeno cheetos";

alert(eater + " loves " + foodChoice + "!")

// Bruce loves Crunchy cheddar jalapeno cheetos!
```

### Booleans

We use the keywords `true` and `false` to set variables as Boolean data type.

```javascript
let a = true;
let b = false;
```

Booleans are especially useful when performing mathematical operations, in determining whether an expression is true or false, such as:

```javascript
10 > 5     // true, 10 is greater than 5
5 > 10     // false, 5 is not greater than 10
5 < 10     // true, 5 is less than 10
5 = 5      // true, 5 equals 5
```

If we assign our expression to a variable, such as:

```javascript
let a = 10 > 5;   // true
```

Our variable `a` will of course, hold the value of true.

Booleans are used within programs when we need to perform operations based on the evaluation of truth or falsehood. For example, do the received login credentials evaluate to true? Grant access ✔️. Or are they false? Deny access ❌.

### Arrays

An array is a slightly more complex data type, however they are really quite simple to grasp! An array is a way to have multiple values held by a single variable. For example:

```javascript
let colors = ["red", "green", "blue", "yellow"]
```

An array is defined by using square brackets `[]` as in the above example. We’ve assigned an array to the variable `colors`, contained within are our **elements** of red, green, blue and yellow.

A call to our `colors` variable will output our entire array of `[“red”, “green”, “blue”, “yellow”]`.

The true power of arrays is that their contents can be iterated, we can call out a single item within the array variable. To do this we use an index number, inside of square brackets:

```javascript
colors[0]     // red
colors[1]     // green
colors[2]     // blue
colors[3]     // yellow
colors[4]     // undefined
```

*Note:* Our first array element always has the index position of 0. So remember to start counting from 0 instead of 1!

Arrays have a large amount of flexibility, they can have elements added, removed and changed. Let’s now take a look at our final data type: objects!

### Objects

The object data type is typically used for holding large amounts of related data. Object data values are stored in key/value pairs, the pairs make for a logical way to store and access our data, using curly braces `{}`, for example:

```javascript
let user = {firstName:"Jane", lastName:"Doe", age:34, location:"Vancouver"};
```

For clarity we’d write this out over multiple lines:

```javascript
let user = {
    firstName: "Jane",
    lastName: "Doe",
    age: 34,
    location: "Vancouver"
};
```

Our above example contains four properties `firstName`, `lastName`, `age`, and `location`. Our properties can be of any data type, which are accessed using *objectName.property* as follows:

```javascript
user.firstName     // Jane
user.lastName      // Doe
user.age           // 34
user.location      // Vancouver
```

## Conclusion

Understanding how we classify data types is a fundamental skill to posses when moving forward with JavaScript. In this article, we looked at and what distinguishes each type. 

Stay tuned for my next post, where we'll expand upon this knowledge by learning how to perform data type conversions.

---
_**Are you ready to turn your dev skills into a freelance business?** Whether you're completely new to freelancing or are looking to level up your existing skills. I'll teach you everything you need to know to become a successful freelancer!_

Get started today with my [Complete Guide to Freelancing](https://easeout.gumroad.com/l/freelance).


![Complete Guide to Freelancing package](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q8jx3gvzvjazn8z1mbjm.png)

> Available now at 👉 [https://easeout.gumroad.com/l/freelance](https://easeout.gumroad.com/l/freelance)

## A little about me..

Hey, I'm Tim! 👋 I'm a freelance business owner, web developer & author. 

I teach both new and experienced freelancers how to [build a sustainable and successful freelancing business](https://easeout.gumroad.com/l/freelance). If you'd like to read more of my articles, check them out on [my blog](www.easeout.co).

Thanks for reading 🎉