JavaScript Objects

Objects are collections of key-value pairs and are fundamental to JavaScript programming. They allow you to group related data and functionality.

📦 What are Objects?

In JavaScript, an object is a standalone entity with properties and type. It's a collection of key-value pairs where keys are strings (or Symbols) and values can be any data type.

Object Characteristics:

Unordered collection of key-value pairs
Keys are unique strings (or Symbols)
Values can be any data type
Properties can be added/deleted dynamically
Support inheritance through prototype chain

💡 Object Creation Methods

// Object literal
let obj1 = {};

// Object constructor
let obj2 = new Object();

// Object.create()
let obj3 = Object.create(null);

// ES6 class
class MyClass {}
let obj4 = new MyClass();

Property Access:

Dot notation: obj.property
Bracket notation: obj["property"]
Use brackets for dynamic property names or special characters.

🔧 Creating and Using Objects

Let's explore basic object creation, access, and modification.

JavaScript Editor

Access

obj.key
obj["key"]

Add/Update

obj.key = value
obj["key"] = value

Delete

delete obj.key

Check

"key" in obj
obj.hasOwnProperty("key")

✨ Object Static Methods

JavaScript provides built-in static methods on the Object constructor for common operations.

JavaScript Editor

// Object Methods and Operations
let car = {
  brand: "Toyota",
  model: "Camry",
  year: 2020,
  color: "blue",
  price: 25000
};

// Object.keys() - Get property names
let keys = Object.keys(car);
console.log("Keys:", keys);

// Object.values() - Get property values
let values = Object.values(car);
console.log("Values:", values);

// Object.entries() - Get key-value pairs
let entries = Object.entries(car);
console.log("Entries:");
entries.forEach(([key, value]) => {
  console.log(key + ": " + value);
});

// Object.assign() - Copy or merge objects
let carCopy = Object.assign({}, car);
carCopy.year = 2021;
console.log("\nOriginal year:", car.year); // 2020
console.log("Copy year:", carCopy.year); // 2021

// Merge objects
let defaults = { color: "black", warranty: "3 years" };
let mergedCar = Object.assign({}, defaults, car);
console.log("\nMerged car:", mergedCar);

// Object.freeze() - Make object immutable
let frozenCar = Object.freeze({...car});
// frozenCar.year = 2022; // Error in strict mode
console.log("\nIs frozen car frozen?", Object.isFrozen(frozenCar));

Enumeration

Object.keys() - Property names
Object.values() - Property values
Object.entries() - Key-value pairs

Copy/Merge

Object.assign() - Copy/merge
{...obj} - Spread operator
JSON.parse(JSON.stringify()) - Deep copy

Protection

Object.freeze() - Make immutable
Object.seal() - Prevent additions
Object.preventExtensions() - Minimal protection

🏗️ Constructors and Classes

Create multiple objects with similar structure using constructors or ES6 classes.

JavaScript Editor

🎯 Class Features (ES6+):

constructor() - Initialization method
static methods - Called on class, not instances
extends - Class inheritance
super() - Call parent constructor
get/set - Getters and setters
Private fields (#privateField) - ES2022

🌀 Object Destructuring

Destructuring allows you to extract multiple properties from objects into distinct variables.

JavaScript Editor

Destructuring Features:

Extract multiple properties at once
Rename variables during extraction
Provide default values
Nested destructuring
Rest operator in destructuring

Common Use Cases:

Function parameters
Importing module exports
Configuration objects
API response handling
React props destructuring

⚡ Object Spread Operator

The spread operator (...) copies enumerable properties from one object to another.

JavaScript Editor

⚠️ Shallow vs Deep Copy:

The spread operator and Object.assign() create shallow copies. Nested objects are shared between original and copy. Use JSON.parse(JSON.stringify(obj))or libraries like Lodash for deep copies.

🎮 Object Practice Exercises

Implement the object manipulation functions below.

JavaScript Editor

💪 Additional Challenges:

Create a function to flatten nested objects
Implement object validation with schemas
Create a simple ORM (Object-Relational Mapping)
Implement object observability (reactive objects)
Create a deep merge function that handles arrays and nested objects

📋 Quick Reference

Creation:

- Object literal
new Object() - Constructor
Object.create() - With prototype
class - ES6 class

Essential Methods:

Object.keys/values/entries - Enumeration
Object.assign - Copy/merge
Object.freeze/seal - Protection
Object.hasOwnProperty - Property check

← Arrays String Methods →

JavaScript Tutorial

JavaScript Objects

📦 What are Objects?

Object Characteristics:

💡 Object Creation Methods

Property Access:

🔧 Creating and Using Objects

Access

Add/Update

Delete

Check

✨ Object Static Methods

Enumeration

Copy/Merge

Protection

🏗️ Constructors and Classes

🎯 Class Features (ES6+):

🌀 Object Destructuring

Destructuring Features:

Common Use Cases:

⚡ Object Spread Operator

⚠️ Shallow vs Deep Copy:

🎮 Object Practice Exercises

💪 Additional Challenges:

📋 Quick Reference

Creation:

Essential Methods:

Follow Us

Our Tools

Our Company

Special Tools