Understanding JavaScript Data Types

JavaScript is the language that brings websites and web applications to life, making them interactive and dynamic. Data types are at its core. In this article, we'll explore what data types are and how many of them exist in JavaScript. Let's break it down step by step.

What is a Data Type?

A data type defines the type of data that a variable can hold. It determines how information is stored, manipulated and understood within a program.

In JavaScript, there are two main groups of data types:

• Primitives.
• Non-Primitives. Also known as Reference data types.

Primitive Data Types

Primitive data types represent single values. There are seven primitive data types: string, number, bigint, boolean, undefined, null and symbol. They are used to store simple values. Let's dive into each of them:

• string - used to store text. Surrounded by single quotes (e.g. 'Marco'), double quotes (e.g. "Marco") or backticks (e.g. `Marco`).

let name = "Marco";

console.log(typeof name);   // Output: string        

• number - used to store numbers. Either integer or floating-point numbers.

let age = 25;
let degrees = 10.5;

console.log(typeof age);   // Output: number
console.log(typeof degrees);   // Output: number        

• bigint - used to store large integer values. Those that are too big and go beyond the safe limit of the number type. They can only represent integers, not floating-point numbers. Denoted by adding "n" to the end of the integer.

let largeNumber = 392939909293103023n;

console.log(typeof largeNumber);   // Output: bigint        

• boolean - represents a logical value: true or false.

let javascriptIsCool = true;

console.log(typeof javascriptIsCool);   // Output: boolean        

• undefined - represents a variable that has been declared but still has no value assigned.

let name;

console.log(typeof name);   // Output: undefined

console.log(name);   // Output: undefined        

• null - represents an empty or unknown value. It means that the variable is empty at the moment but may have a value later. In the example below, 'age' is 'null'. But 'typeof age' is 'object'. This happens because of an historical bug in JavaScript that has never been fixed in order to avoid breaking existing code.

let age = null;

console.log(age);   // Output: null

console.log(typeof age);   Output: object        

• symbol - represents a unique identifier.

let key = Symbol("description");

console.log(typeof key);   Output: symbol        

Non-Primitive Data Types

Non-Primitive data types are also know as Reference data types. They don't hold a direct value. Instead, they are more complex and can hold collections of data and complex entities. There is only one non-primitive data type.

• object - includes all objects in JavaScript, including arrays, functions and other complex data structures.

let car = { "brand": "Tesla", model: "S" };
console.log(typeof car);   // Output: object

let colors = ["blue", "green", "red"];
console.log(typeof colors);   // Output: object        

Extras

We covered the essentials about JavaScript Data Types. However, there are some important extras to care about:

There are three more numeric values possibilities:

• NaN (Not a Number) - represents a value that is not a number. It's normally used when performing invalid operations. It's considered a numeric value with a special meaning and that's why 'typeof NaN' is number.

let result = 10 / "text";

console.log(typeof result);   /// Output: number

console.log(result);   // Output: NaN        

• +Infinity / -Infinity - represents positive and negative infinity. It's normally a result of operations that exceed the minimum or maximum representable values. It's considered a numeric value and that's why its typeof is number.

let result = 2 / 0;

console.log(typeof result);   // Output: number

console.log(result);   // Output: Infinity        

• Exponentials - represents exponential notation. It's also considered a number.

let exponential = 3e5;   // is equal to 3 * 10^5

console.log(typeof exponential);   // Output: number        

Numbers always stored as 64-bit floating point

All JavaScript numbers are stored as 64-bit floating point values. This means that even integers are stored as floating-point values.

Integer limit - when bigint comes to the rescue

The maximum safe integer value is 2^53 - 1 (equals to 9007199254740991). This happens because, as said above, JavaScript numbers are stored as 64-bit floating point values. 53 bits of those are allocated to represent the integer part of a number. That's why the highest integer that can be represented accurately is 2^53 -1. Numbers higher than that should be represented using bigint.

Floating Point Precision

There are decimal fractions that can't be represented precisely in binary floating-point format. This can lead to rounding errors. The difference is usually very small but it's important to be aware of these.

let result = 0.3 - 0.1;   // We expect 0.2
console.log(result);   // Output: 0.19999999999999998        

Arrays and Functions are classified as objects in JavaScript

This is why object is the only non-primitive data type.

Wrapping Up

There are two types of data types in JavaScript: primitives and non-primitives. Non-primitives are also known as Reference.

Primitives

• string
• number
• bigint
• boolean
• null
• undefined
• symbol

Non-primitives

• objects - this includes arrays, functions and other structures, as they are considered objects in JavaScript.

Understanding data types is essential for any JavaScript developer. So it's important to master these concepts in order to write consistent and bug-free code.

Hashtags: #javascript #webdevelopment #coding #datatypes

Connect with me on X at @CodeWithMarco - https://twitter.com/CodeWithMarco