JavaScript Objects: The Basics

Objects are one of the most important data structures in JavaScript. Almost everything in JavaScript is an object (except for primitive types like strings, numbers, booleans, null, and undefined). They allow you to group related data and functions together.

1. Object Literal Syntax

The simplest and most common way to create an object is using the object literal syntax, which consists of curly braces {} containing key-value pairs.

const user = {
  name: "Alice",
  age: 28,
  isAdmin: true
};

2. Property Access

You can access an object's properties in two ways: dot notation and bracket notation.

Dot Notation

This is the most common and readable way to access properties. The property name must be a valid JavaScript identifier (no spaces, doesn't start with a number).

console.log(user.name); // "Alice"
console.log(user.age);  // 28

Bracket Notation

Bracket notation allows you to use any string as a property name, which is useful for keys containing spaces, special characters, or when the key is determined dynamically at runtime.

console.log(user["name"]); // "Alice"

// Useful for keys with spaces
const data = {
  "first name": "Bob"
};
console.log(data["first name"]); // "Bob"

3. Dynamic Keys and Computed Properties

Introduced in ES6, computed property names allow you to dynamically evaluate keys inside object literals using square brackets [].

const keyName = "favoriteColor";

const userPreferences = {
  name: "Charlie",
  [keyName]: "blue", // Evaluates to favoriteColor: "blue"
  ["is" + "Active"]: true // Evaluates to isActive: true
};

console.log(userPreferences.favoriteColor); // "blue"
console.log(userPreferences.isActive);      // true

4. Property Value Shorthand

If a variable name matches the desired property name in your object, you can use the property value shorthand. This makes code cleaner and less repetitive.

const make = "Toyota";
const model = "Corolla";

// Without shorthand:
const car1 = {
  make: make,
  model: model
};

// With shorthand (ES6+):
const car2 = {
  make,
  model
};

5. Adding, Modifying, and Deleting Properties

Objects in JavaScript are mutable, meaning their contents can be changed after they are created, even if they are declared with const.

const profile = { username: "dev_guru" };

// Adding a new property
profile.email = "dev@example.com";

// Modifying an existing property
profile.username = "coding_ninja";

// Deleting a property
delete profile.email;

console.log(profile); // { username: "coding_ninja" }

Note: While const prevents you from reassigning the variable profile to a entirely new value (like a new object or string), it does not prevent you from mutating the properties inside the object.

6. Checking for Property Existence

You can check if a property exists on an object using the in operator or the hasOwnProperty method.

const settings = { theme: "dark" };

// Using 'in' (checks the object and its prototype chain)
console.log("theme" in settings); // true
console.log("fontSize" in settings); // false

// Using hasOwnProperty (checks only the object itself)
console.log(settings.hasOwnProperty("theme")); // true

Summary

Objects form the backbone of JavaScript programming. Mastering object literals, property access (both dot and bracket notation), dynamic keys, and shorthand syntax will vastly improve the readability and flexibility of your code.