An Introduction to Data Types in JavaScript

A data type defines the type and behavior of data—it tells the compiler or interpreter how a programmer intends to use a piece of data. Most programming languages support basic data types like number, boolean, string, etc.

JavaScript supports eight data types: Number, BigInt, Boolean, String, Null, Undefined, Symbol, and Object. In this article, you'll learn about all eight JavaScript data types and how to use them.

JavaScript Data Types

Data types in JavaScript can be broadly classified into two categories: Primitive data types and Non-primitive data types. An Object is a non-primitive or complex data type, and the rest are primitive data types.

JavaScript is a dynamically-typed language, meaning variable types are checked during run-time. The same variable can hold values of different types at any time.

For example:

        // x is a string
let x = "Hello, World";

// x is a number
x = 100;

// x is now a boolean
x = true;

If you want to find the current data type of a variable, use the typeof operator.

        // x is a string
let x = "Hello, World";
console.log(typeof(x));

// x is a number
x = 100;
console.log(typeof(x));

// x is now a boolean
x = true;
console.log(typeof(x));

Output:

        string
number
boolean

1. Number Data Type in JavaScript

The number data type in JavaScript uses the IEEE-754 format to represent both integer and floating-point numbers. You can perform many operations on numbers in JavaScript like addition, subtraction, division, multiplication, and so on. To perform more complex operations, you can use the built-in Math object.

Some examples to create numbers in JavaScript:

        // Using literal declaration
let n1 = 100;
let n2 = 456.234;

// Using the Number() constructor
let n3 = Number(100);

// Conversion to integer
let n4 = Number.parseInt("456.234");

// Conversion to float
let n5 = Number.parseFloat("456.234");
let n6 = Number.parseFloat("1.13e3");

// Unary conversion to number
let n7 = +"345";

console.log(n1);
console.log(n2);
console.log(n3);
console.log(n4);
console.log(n5);
console.log(n6);
console.log(n7);

Output:

Integer Numbers

The following statement creates a variable holding an integer:

        let x = 21;

If you want to create octal (base 8) literals, you need to use the 0o prefix with the sequence of octal digits (digits from 0 to 7).

        let x = 0o53;
console.log(x);

Output:

Similarly, if you want to create hexadecimal (base 16) literals, use the 0x prefix with the sequence of hexadecimal digits(0 to 9, and A to F).

        let x = 0x53;
console.log(x);

Output:

Floating-Point Numbers

The following statement creates a variable holding a floating-point number:

        let x = 324.56;

You can use e-notation to represent very large or very small numbers.

        let x = 1.13e6;
console.log(x);

Output:

JavaScript also provides other special numeric values that belong to the number data type—NaN, Infinity, and -Infinity.

NaN: NaN stands for Not a Number which means an invalid number. For example, if you divide a string and a number, the result will be NaN.
```
        console.log("MakeUseOf"/10);
    
```
Output:
```
        NaN
    
```
Interestingly enough, NaN is not equal to anything, including itself.
```
        console.log(NaN == NaN);
console.log(NaN == ("MakeUseOf"/10));
console.log(NaN === NaN);
    
```
Output:
```
        false
false
false
    
```
Also, if a mathematical expression somewhere contains NaN, the result is always NaN.
Infinity and -Infinity: Infinity and -Infinity represents the mathematical ∞ and -∞ respectively.

2. BigInt Data Type in JavaScript

BigInt is a primitive data type in JavaScript that can represent integers with arbitrary precision. Since the number data type cannot represent values greater than (2⁵³-1) or values less than -(2⁵³-1), BigInt is used in such cases to represent very large or small numbers.

BigInt numbers are rarely used. But if you really need to represent big numbers, e.g. for cryptography, calculating the factorial of large numbers, representing the mass of the sun, microsecond-precision timestamps, and so on, BigInt is what you want to use.

You can create a BigInt value by appending n to the end of an integer or by using the constructor.

        let big1 = 78649264972634817648747234872634876243862348763467547n;
let big2 = BigInt("78649264972634817648747234872634876243862348763467547");

console.log(big1);
console.log(big2);

Output:

        78649264972634817648747234872634876243862348763467547n
78649264972634817648747234872634876243862348763467547n

The BigInt data type is a relatively recent addition to the language and is currently supported by almost all browsers except Internet Explorer.

3. Boolean Data Type in JavaScript

The boolean data type can have two values: true and false. Boolean values are the result of logical comparisons.

        let x1 = true;
console.log(x1);

let x2 = !true;
console.log(x2);

let x3 = !!true;
console.log(x3);

let x4 = (false && true);
console.log(x4);

let x5 = (false || true);
console.log(x5);

let x6 = (2 == "2");
console.log(x6);

let x7 = (2 === "2");
console.log(x7);

let x8 = (null === undefined);
console.log(x8);

let x9 = (0 == "");
console.log(x9);

let x10 = (100 > 12);
console.log(x10);

Output:

        true
false
true
false
true
true
false
false
true
true

You can convert a value of any other data type to a boolean data type using the Boolean() function.

        // Strings
console.log(Boolean(''));
console.log(Boolean('abc'));
console.log(Boolean('123'));

// Numbers
console.log(Boolean(0));
console.log(Boolean(1));
console.log(Boolean(-1));
console.log(Boolean(NaN));
console.log(Boolean(Infinity));

// Others
console.log(Boolean([1, 2, 3]));
console.log(Boolean(undefined));
console.log(Boolean(null));

Output:

        false
true
true
false
true
true
false
true
true
false
false

4. String Data Type in JavaScript

A string is a sequence of zero or more characters. Strings in JavaScript are immutable and are mainly used to represent textual data. The indexing of strings starts from 0 i.e., the first element is at index 0, the second at 1, and so on.

Strings must be surrounded by quotes. You can use any of the three types of quotes to create a string: Single quotes, Double quotes, or Backticks.

Single and Double quotes practically do the same thing, but a string that starts with a double quote must end with a double quote. The same rule applies to the single quote too.

        let str1 = "Hi";
let str2 = 'Hi';
let str3 = "How're you?";
// Using \ to escape the single quote (')
let str4 = 'How\'re you?';

Backticks are template literals and provide some extended functionality. You can embed variables, expressions, and even function calls within the string.

        // Embedding variable within a string
let x = "Hello";
let str1 = `${x}, How're you?`;
console.log(str1);

// Embedding expression within a string
let str2 = `Sum of 20 + 30 is: ${20 + 30}`;
console.log(str2);

// Embedding function call within a string
function calculateSum(a, b) {
return a + b;
}
let str3 = `Sum of 20 + 30 is: ${calculateSum(20, 30)}`;
console.log(str3);

Output:

        Hello, How're you?
Sum of 20 + 30 is: 50
Sum of 20 + 30 is: 50

JavaScript also provides several String methods to manipulate strings.

5. Null Data Type in JavaScript

The null data type has only one value: null. It represents the intentional absence of any object value.

        let n = null;

Many programmers get confused between null and undefined. It's tricky to understand the difference between null and undefined in JavaScript.

6. Undefined Data Type in JavaScript

The undefined type is a special type that means “value is not assigned”. When you declare a variable but do not initialize it, an undefined value is assigned to the variable.

        let x;
console.log(typeof(x));

Output:

        undefined

You can explicitly assign undefined to a variable, but it's highly recommended to avoid it.

7. Symbol Data Type in JavaScript

A Symbol is a unique and immutable primitive value. It's mainly used to create unique identifiers for objects.

You can create a symbol using the Symbol() function. It also accepts an optional description (name), but for debugging purposes only.

        let sym1 = Symbol();
let sym2 = Symbol("data");

The Symbol() function creates a new unique value every time it is called, even if you create symbols with the same description, the values would be different.

        console.log(Symbol() == Symbol());
console.log(Symbol("data") == Symbol("data"));

Output:

        false
false

8. Object Data Type in JavaScript

In JavaScript, objects are collections of key-value pairs, where the key is a string and value can be any data type.

You can create an empty object in JavaScript using the "object constructor" syntax (new Object()) or the "object literal" syntax (curly braces {...}).

        let obj1 = new Object();
let obj2 = {};

Each object contains an optional list of properties, where a property is a key:value pair. You can access the values from the object using dot-notation or array-like notation (square brackets).

        let obj = {
"key1" : "value1",
"key2" : "value2"
}
console.log(obj.key1);
console.log(obj["key2"]);

Output:

        value1
value2

How Does JavaScript Work?

JavaScript is one of the most popular programming languages on the web today. You can use JavaScript to create websites, web applications, server applications, games, mobile apps, etc. Suffice to say, you can do almost anything you can think up with JavaScript.

But do you know how does JavaScript works under the hood?