According to Wikipedia:

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.

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:

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.

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 (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

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.

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

You can read more about operator precedence here.

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.

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 ().

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.

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.

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

'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.

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"

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

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

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.

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.

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.

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

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.

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

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.

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 (>_-)

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.

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

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:

condition ? return value if true : return value if false

Let's look at this code

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