Data Types and Operators in JavaScript: Everything You Need To Know
Tags: javascript, codenewbie, tutorial, webdev
Published: 2020-08-24 14:07:41

According to [Wikipedia](https://en.wikipedia.org/wiki/Data_type): 

> *A data type or simply type is an attribute of data which tells the compiler or interpreter how the programmer intends to use the data. This data type defines the operations that can be done on the data, the meaning of the data, and the way values of that type can be stored.*

In simple terms a data type is a type of value.  A data type tells the programming language how the value is meant to be used and the operations that can be carried out on it.

In this article we are going to explore all the details of different data types in JavaScript and the operations that can be carried out on them. This is an in depth article so you might want to grab a pen and paper.

JavaScript has two main types of data types: primitive data types and objects. Let's explore both of them.

#Primitive Data Types
A primitive data type can be understood  as a basic data type in JavaScript. Some primitive data types only accept a set value(s) and others accept certain type of values.Primitive data types are immutable. That means their values cannot be changed or mutated. I'll further explain this in the article.
Let's look at the primitive data types in JavaScript.

##Numbers
Values of the number type are numeric values written as usual numbers like `12`, `67` and `85`.

JavaScript uses 64 bits to store a number. Given 64 bits JavaScript can represent up to **18  quintillion**  numbers. You don't have to remember that number. The point is we can write very huge numbers with JavaScript.

All operations carried out on whole numbers are guaranteed to be precise and accurate.

``` javascript
console.log(12 + 67) //79
console.log(1234597654 + 987654132476 ) //988888730130
```
Sadly that is not the case with floating point numbers. In JavaScript floating point numbers are numbers that have decimal points.
Take a look at this example:

``` javascript
console.log(0.1 + 0.2 === 0.3) //false
console.log(0.1 + 0.2) //0.30000000000000004
```
Looking at the example you would expect that adding `0.1 + 0.2` would result in `0.3`. Instead we get `0.30000000000000004`. Why is that?

In real math we have an infinite set of numbers to work with. In JavaScript we only have 64 bits (18 quintillion numbers). Therefore we cannot precisely represent floating point numbers with only 64 bits. When you add `0.1 + 0.2` JavaScript returns the closest available number. This doesn't need to get you worried unless you want to calculate the precise age of the universe.

Let's look at the operations we can carry out on numbers.

###Arithmetic Operations
You've probably guessed already that we can carry out arithmetic operations on numbers in JavaScript.

Just like usual math we can add, subtract, multiply and divide numbers. The symbols used to carry out these operations are called operators. The `+` operator is used for addition, `-` for subtraction, `*` for multiplication and `/` for division.

``` javascript
console.log(1 + 2) //3
console.log( 10 - 5) //5 
console.log( 2 * 100) //200
console.log(120 / 2) //60
```
However, when working with operators we must look out for something called **operator precedence.**

According to [Mozilla Developer Network](https://developer.mozilla.org/en-US/) (MDN):
> *Operator precedence determines how operators are parsed concerning each other. Operators with higher precedence become the operands of operators with lower precedence.*

Let's look at this code

``` javascript
console.log(2 + 2 * 10 === 40) //false
console.log(2 + 2 * 10 === 22) //true
```
Operations in JavaScript do not occur from left to right. Rather some operators take precedence over others. So `2 + 2 * 10` is not `4 * 10 = 40` but `2 + 20 = 22` because `*` has a higher precedence than `+` so that operation happens first.

If you would like to carry out arithmetic operations left to right, you can do so with parenthesis.

``` javascript
console.log((2 + 2) * 10 == 40); //true
```

You can read more about operator precedence [here](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Operator_Precedence).

###Special Numbers
As it turns out, not all numbers have a numeric value in JavaScript. JavaScript has three special numbers. Infinity for positive infinities, -Infinity for negative infinities and NaN which means "Not a Number".
These special numbers are used to represent foul operations.

``` javascript
console.log(1 / 0) //Infinity
console.log(-1 / 0) //-Infinity
console.log(0 / 0) //NaN
```
NaN is of special interest because it's quite the trouble causer. It's a number that means "Not A Number". This can be very confusing at times. 

According to MDN:
> There are five different types of operations that return NaN:
>
* Number cannot be parsed (e.g. parseInt("blabla") or Number(undefined))
* Math operation where the result is not a real number (e.g. Math.sqrt(-1))
* Operand of an argument is NaN (e.g. 7 ** NaN)
* Indeterminate form (e.g. 0 * Infinity)
* Any operation that involves a string and is not an addition operation (e.g. "foo"/3)

You can test for NaN using the method `Number.isNaN(number)`

So, simply put NaN is a numeric value that represents an invalid result.

Let's look at another data type.

##Strings
A string is another data type in JavaScript. Strings represent text. This text can be enclosed in either single quotes `''`, double quotes `""` or back ticks `(``)`.

``` javascript
console.log("This is text");
console.log('This is also text');
```

Interestingly though, strings are not just text in JavaScript. Behind the scenes each letter in a string is a number. If you've ever heard of the ASCII standard then this is it. Each character in a computer has a number assigned to it. For example lower case a is 65 and uppercase A is 97. Same with all the other letters and characters.

However, the ASCII standard was limited in the number of characters it could represent. This led to the birth of the Unicode standard. With the Unicode standard, just about any character can be represented with a number. Even Emojis. That was just an interesting fact.

We can't carry out subtraction, multiplication and division on strings. Doing so would yield to `NaN` which we just talked about.

``` javascript
console.log("No" * "Arithmetic") //NaN
```
But, we can use the addition operator on strings. This is called string concatenation. This way we can join two strings into one.

``` javascript
console.log("Yes" + " Concatenation") //Yes Concatenation
```
We can also use bracket notation to access individual characters in a string. But we cannot change these characters. As I mentioned earlier this is because primitive data types are immutable. If we try to mutate strings, JavaScript will throw an error if in [strict mode](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Strict_mode)

``` javascript
'use strict'
let myUsername = "codingknite";
console.log("myUsername[0]") //c
myUsername[0] = 'k'; // Throws error
```

##Boolean
Boolean is another data type in JavaScript with only two values written as `true` and `false`. Logical operations can be carried out with Boolean. Think of boolean as answers to yes or no questions that we ask JavaScript.

``` javascript
console.log(5 > 2) //true
console.log(10 > 120) //false 
```
There's quite a number of operators we can use to carry out operations on boolean.

###Equality Operators
Equality operators are used to compare whether or not two values are equal to each other. The result is a boolean value.

* The (==) operator denotes "equal to"
* The (!=) operator denotes "not equal to"
* The (===) operator denotes "strictly equal to"
* The (!==) operator denotes "strictly not equal to"

``` javascript
console.log(2 == 2) //True 
console.log("apple" == "pineapple") //false
console.log("JavaScript" === "JavaScript") //true
console.log("JavaScript" !== "Java") //true
```
There is one value in JavaScript which in not equal to itself. And it's none other than NaN

``` javascript
console.log(NaN === NaN) //false 
```

 According to MDN:
> *Unlike all other possible values in JavaScript, it is not possible to rely on the equality operators (== and ===) to determine whether a value is NaN or not, because both NaN == NaN and NaN === NaN evaluate to false. Hence, the necessity of an isNaN function.*

The issue with NaN not being equal to NaN is historical. Just Accept it as a fact of life. If you're interested in reading more about NaN and why it's not equal to itself, consider reading this [article](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN)

There is a one difference between the equality operator and the strict equality operator which i'll get to in a second.

###Comparison Operators
Comparison operators are used to compare two or more values. The result is either of the boolean values.

These are the most common comparison operators.

* The ( > ) operator is used to denote "greater than" 
* The ( < ) operator is used to denote "less than"
console.log(5 > 3) //true 
console.log(10 < 15) //false
* The ( >= ) operator denotes "greater than or equal to"
* The ( <= ) operator denotes "less than or equal to"
* The ( == ) operator denotes "equal to"
* The ( === ) operator denotes "strictly equal to"

###Logical Operators
Logical Operators are used to compare two conditions. JavaScript has three main logical operators.

####AND Operator
The AND operator written as `&&` compares two values and returns true if both values on the left and right equate to true. Otherwise is returns false.

``` javascript
console.log(5 > 2 && 10 >8) //true
console.log( 5 > 2 && 8 > 10) //false
```

####OR Operator
The OR operator written as `||` compares two values and returns true if either value on the left or right equates to true. Otherwise it returns false.

``` javascript
console.log(5 > 3 &&  10 === 10) //true
console.log(10 === 12 && 120 < 100) //false
```

####NOT Operator 
The NOT operator written as `!` flips any value given to it. In other words !true becomes false and !false becomes true. 

``` javascript
console.log(true !== true) //false
console.log("apple" !== "pineapple") //true 
```

###Automatic Type Coercion
When JavaScript receives the wrong values, it changes the data type of the resulting value.

Let's Look at some code 

``` javascript
console.log(12 * '3'); //36
console.log("50" - 12); //38
console.log(true + 12); //13
console.log("Thirteen" * 2); //NaN
console.log(false + 1); //1
```
As we see in the code above JavaScript secretly changes the types when it receives unusual values. The string '3' on the first line becomes the number 3. Same as the string "50". On the third line `true` becomes 1 and `false` becomes 0.

Type coercion is what creates the difference between the equality operator and the strict equality operator.

``` javascript
console.log(1 == '1') //true 
console.log(1 === '1') //false
```
The equality operator carries out type coercion on the values it receives where as the strict operator does not carry out type coercion. This is why most JavaScript developers consider it a good practice to use the strict equality operator. To avoid unnecessary type coercion.

Let's now look at the last two primitive data types

##Null
Null is a primitive data type in JavaScript used to represent an intentionally missing value. Null has only one value and that is `null`. Null is a falsy value because it returns false in all boolean operations 

``` javascript
console.log(!null) //true
console.log(null === null) //true
```

##Undefined 
Undefined is also a primitive data type in JavaScript and just like Null it has only one value `undefined`. It represents an unintentionally missing value. Undefined is also considered a falsy value because it returns false in boolean operations. When comparing `null` and `undefined` it's very important to look out for the equality and strict equality operators.

``` javascript
console.log(null == undefined) //true
console.log(null === undefined) //false
console.log(!undefined) //true
```
There you have it. These are the primitive data types in JavaScript. But that's not all.

###Truthy and Falsy Values 
Falsy values are values that are return false in a condition.
JavaScript has 5 basic falsy value: `undefined`, `null`, `0`, `''`, `NaN`

Truthy values are all the other values that are !falsy values (>_-)

``` javascript
let age = 23;
if (age || age === 0) {
    console.log('Age is defined'); 
} else {
    console.log('Age is not defined');
}
// returns 'Age is defined';
```
Try to figure out why the above code logs 'Age is defined'

###Unary Operator
A Unary operator is an operator that accepts only one value.

The best example of a unary operator is the `typeof` operator which returns the type of value specified. In fact we can use this operator to check out all the data types we've talked about.

``` javascript
console.log( typeof 'text') //string
console.log( typeof 25) //number
console.log( typeof true) //boolean
console.log( typeof false) //boolean
console.log( typeof null) //object
console.log(typeof undefined) //undefined
```
If you noticed, the typeof null returned object. I will explain why that is so in the next article.

###Binary Operators
Binary Operators are operators that carry out operations on two values

``` javascript
console.log(1 + 1) //2
console.log(12 - 5) //7
```

###Ternary Operator
The ternary operator is used to check a condition and return a value based on whether or not the condition is true. It's like a quick if statement.

The basic frame of a ternary operator is:

``` javascript
condition ? return value if true : return value if false
```
Let's look at this code

``` javascript
15 > 12 ? console.log("15 is greater than 12") : console.log("15 is less than 12"); // 15 is greater than 12
```

Well, that's everything you need to know about primitive data types.
What is the second type of data types in JavaScript? 

##Objects and Functions
Now i don't know about you but that's enough data types for one day. In my next article am going to talk about objects and everything you need to know about them. So stay tuned. 

However, if you're interested I've written a blog post on functions. You can check it out [here](https://dev.to/codingknite/javascript-functions-broken-down-4fgh) if you wish.

##SUMMARY
So, what have we seen.
* A data type is basically the way a programming language understands the data it receives telling it how the data is to be used.
* Operations are basically the way we use the data received
*There are two types of data types

**Primitive Data Types**
There are five main primitive data types

1. **Numbers**
    - Numeric Values 
    - Arithmetic operations like Addition, Subtraction, 	Multiplication and division can be carried out on them.

2. **Strings**
    - How text is represented 
    - `+` can be used on them for concatenation.

3. **Boolean**
    - Used for logical operations
    -Two values written as true and false

4. **Null**
    - Intentionally missing values
    - Only one value null
    - Falsy value
	
5. **Undefined**
    - Unintentionally missing values
    - Only one value undefined 
    - Also a falsy value

##Conclusion
I hope you enjoyed this article. If you would like to follow my coding journey and be the first to know when I release a new article, be sure to follow me on [Twitter](https://twitter.com/codingknite)