Understanding JavaScript Data Types

JavaScript is a dynamically typed language, which means you don't need to specify a variable's data type when declaring it. The data type is automatically determined or converted as needed during execution. This feature makes JavaScript flexible and developer-friendly.

What are Data Types?

Data types define the kind of data a variable can store and manipulate. A JavaScript variable can hold any type of data. In JavaScript, data types are broadly categorized into two types:
1️⃣ Primitive Data Types (7 types)
2️ Non-Primitive Data Types (1 type)

1️⃣ Primitive Data Types: The Building Blocks

These are the most basic data types in JavaScript, and they are immutable, meaning their values cannot be changed.

(1) String: Represents textual data. In JavaScript, there are 3 types of quotes: Double quotes, Single quotes, Backticks.
📌 Example:

const fname = 'Richa'; // Single quotes
const language = "JavaScript"; // Double quotes
const study = `webDev`; // Backticks
console.log(fname, language, study); // Output: Richa JavaScript webDev

(2) Number: Represents numeric values (both integers and floating-point numbers).
📌 Example:

const total = 0;
const PI = 3.14;
console.log(total, PI); // Output: 0 3.14

(3) BigInt: Represents integers larger than the Number type can handle. A BigInt value is created by appending n to the end of an integer.
📌 Example:

const bigNumber = 1234567890123456789012345678901234567890n;
console.log(bigNumber); // Output: 1234567890123456789012345678901234567890n

(4) Boolean: Represents a logical value, either true or false.
📌 Example:

const isPrimeNumber = true;
const isNewUser = false;
console.log(isPrimeNumber, isNewUser); // Output: true false

(5) Null: Represents an intentionally empty or unknown value.
📌 Example:

const data = null;
console.log(data); // Output: null

(6) Undefined: Represents a variable that has been declared but not yet assigned a value.
📌 Example:

let result;
console.log(result); // Output: undefined

/* Uncomment the following code and see what output will return */
/* let result = undefined;
console.log(result); */

let result_1 = undefined;
console.log(result_1); // Output: undefined

(7) Symbol: Introduced in ES6 (2015), represents a unique and immutable value. The symbol type is used to create unique identifiers for objects. For now, I'll only mention this briefly. We'll delve into more detail later.
📌 Example:

const uniqueId = Symbol("id");
console.log(uniqueId); // Output: Symbol(id)

2️ Non-Primitive Data Types: The Complex Structures

These data types can hold collections of values or more complex entities.
(1) Object: A collection of properties, where each property is defined as a key-value pair.
📌 Example:

// object literal
const person = {
    firstName: "Richa",
    lastName: "webDev",
    age: 50
};
// dot (.) notation for access properties
console.log(person.firstName); // Output: Richa

The typeof Operator

The typeof operator returns the data type of a JavaScript variable or an expression.
📌 Example:

console.log(typeof "Richa"); // Output: string  
console.log(typeof 0); // Output: number  
console.log(typeof 123); // Output: number  
console.log(typeof 123.12); // Output: number  
console.log(typeof (12 + 8)); // Output: number  
console.log(typeof true); // Output: boolean  
console.log(typeof 25n); // Output: bigint  
console.log(typeof undefined); // Output: undefined  
console.log(typeof null); // Output: object
console.log(typeof Symbol("uId")); // Output: symbol  
console.log(typeof function(){}); // Output: function  
console.log(typeof Math); // Output: object  

Key Notes:

• Keys in objects cannot contain hyphens and quotes are optional unless necessary.
• Use dot (.) notation to access object properties.
• Primitive types are immutable, while non-primitive types (like objects and arrays) are mutable.
• Normally, one uses null to assign an “empty” or “unknown” value to a variable, while undefined is reserved as a default initial value for unassigned things.
• For null typeof operator returns "object" – this is an error in the language, it’s not an object.

Conclusion

Understanding JavaScript's data types is foundational for becoming proficient in the language. Whether you're dealing with numbers, strings, or complex objects, knowing how to use and manipulate these types effectively can significantly enhance your programming skills.

What are your favorite use cases for JavaScript data types? Share your thoughts in the comments below! 😊

Comments

[L Rodríguez]

Thanks for sharing,very useful for people learning javascript. Of course is something basic for experienced developers, but its always good to remind this subject and have the concepts clear.

[Richa]

You're right! it's good to revisit basics. That's precisely the intention behind sharing this blog. Thanks for your support!