Data Types in JavaScript

JavaScript is a language that works with different types of data. Knowing these types is super important to writing good code. If you don’t understand them, your programs might break or behave oddly.

What data types exist in javascript?

A data type tells JavaScript what kind of value you’re working with. It helps the computer know how to handle that value. There are two groups: primitive types and objects. Each one is unique and serves a purpose.

Primitive Data Types in JavaScript

Primitive types are basic. They are simple and can’t be changed once created. These are the foundation of JavaScript.

String

Strings are for storing text. Use quotes to define them.

let greeting = "This is string";

Number

Numbers include whole numbers and decimals. They’re flexible.

let age = 30;
let price = 15.99;

BigInt

BigInt handles massive numbers that normal Number types can’t.

let big = 12345678901234567890n;

Boolean

Booleans are true or false. They help control logic.

let isOnline = false;

Undefined

Undefined means you made a variable, but didn’t assign it a value.

let something;

Null

Null shows that a variable is empty on purpose.

let noValue = null;

Symbol

Symbols are special, unique values. Even if they look the same, they’re different.

let id = Symbol("user");

Objects: The Advanced Types

Objects store related data and functions in one place. They make code more organized and readable.

Basic Object Example

Here’s a simple object:

let user = {
  name: "This is user name",
  age: 28,
};

• name stores "This is user name".
• age stores 28.

Access or update values with dot or bracket notation:

console.log(user.name); // This is user name
user.age = 26; // Updates age to 26

Why Use Objects as Data Types in JavaScript?

Objects help:

• Group related data.
• Represent things like users, products, or settings.
• Combine data and functions.

Adding Functions to Objects

Objects can hold functions too:

let user = {
  name: "Some name",
  greet() {
    return `Hi, I'm ${this.name}!`;
  },
};
console.log(user.greet()); // Hi, I'm Some name!

Dynamic Properties

You can add or remove properties anytime:

user.location = "New York"; // Adds a property
delete user.age; // Removes age
console.log(user["location"]); // New York

Special Types of Objects

JavaScript has objects made for specific tasks:

• Array: Stores a list of values in order.let colors = ["red", "blue", "green"];
  • Use Case: Managing a list of items such as a to-do list or product catalog.
• Function: Holds reusable code.function sayHi() { return "Hello!"; }
  • Use Case: Encapsulating reusable logic, such as a calculation or data transformation.
• Date: For dates and times.let today = new Date();
  • Use Case: Scheduling or tracking events, such as showing the current date or calculating deadlines.
• RegExp: Matches patterns in text.let pattern = /dog/gi;
  • Use Case: Validating input or searching for patterns in text, such as email validation.
  • You can lean more about RegExp from here
• Map: Key-value pairs. Any data type can be a key.let inventory = new Map(); inventory.set("apples", 10);
  • Use Case: Managing key-value data, such as storing user preferences or configuration settings.
• Set: Keeps only unique values.let unique = new Set([1, 2, 2, 3]);
  • Use Case: Storing unique items, such as tracking visited pages or tags in a blog.
• Typed Arrays: For raw binary data.let bytes = new Uint8Array([1, 2, 3]);
  • Use Case: Handling binary data for tasks like image processing or working with Web APIs.
• Promise: Handles async code.let fetchData = new Promise((resolve) => resolve("Done"));
  • Use Case: Managing asynchronous operations, such as fetching data from an API.
• Proxy: Customizes how objects behave.let handler = { get: () => "Intercepted!", }; let proxy = new Proxy({}, handler);
  • Use Case: Customizing object behavior, such as logging or validating property access.

Meta-Programming in JavaScript

Meta-programming lets you control how your code behaves at runtime. It’s a way to customize or intercept operations on objects. The key tools for meta-programming in JavaScript are Proxy and Reflect.

Proxy

Proxies let you change how objects work. You can intercept actions like getting or setting properties.

Here’s an example:

let target = {};
let handler = {
  get: () => "Accessed!",
};
let proxy = new Proxy(target, handler);

console.log(proxy.anything); // Accessed!

• target: The original object.
• handler: Defines custom behavior. In this case, it intercepts property access.
• proxy: The object that applies the custom behavior.

When to Use Proxies

Proxies are useful for:

• Validation: Checking property values before they’re set.
• Logging: Tracking when properties are accessed.
• Default Values: Returning a fallback value for missing properties.

Example:

let handler = {
  get: (obj, prop) => prop in obj ? obj[prop] : "Not Found",
};
let proxy = new Proxy({ name: "Alice" }, handler);

console.log(proxy.name); // Alice
console.log(proxy.age); // Not Found

Proxies give you fine-grained control over objects, making them flexible and powerful.

Reflect

The Reflect object provides methods for working with JavaScript objects. It simplifies operations like setting properties or calling functions.

Example:

let user = { name: "John" };

// Using Reflect to set a property
Reflect.set(user, "age", 30);

console.log(user); // { name: "John", age: 30 }

// Using Reflect to get a property
let name = Reflect.get(user, "name");
console.log(name); // John

// Checking if a property exists
console.log(Reflect.has(user, "age")); // true

When to Use Reflect

Reflect is helpful for:

• Writing clean and consistent object operations.
• Avoiding errors when working with properties or methods.
• Combining with Proxies for advanced custom behavior.

Host Objects

Your environment (browser or Node.js) gives you special objects:

• In Browsers: window, document, HTMLElement. Learn more from here
• In Node.js: Buffer, process.

Custom Data Types

You can define your own types using classes.

Class Example

class Car {
  constructor(make, model) {
    this.make = make;
    this.model = model;
  }
}

let myCar = new Car("Toyota", "Corolla");

Final Thoughts on Data Types

Mastering JavaScript data types makes coding easier. Primitives are simple. Objects are powerful. Use both wisely to build great programs.

You may learn more fom,

• JavaScript data types and data structures