JavaScript objects are one of the core building blocks of the language, used to store data in key-value pairs. They provide a flexible way to model real-world entities and complex data structures.
- Objects store data as key-value pairs, where keys are usually strings (or symbols).
- They are mutable, meaning their properties can be added, updated, or deleted at runtime.
- Objects support methods and features like destructuring, spreading (...), and dynamic property access for powerful data handling.
Let's see some interesting facts about JavaScript Objects that can help you become an efficient programmer.
- JavaSctipt Objects internally uses Hashing that makes time complexities of operations like search, insert and delete constant or O(1) on average. It is useful for operations like counting frequencies, maintaining dictionaries, and storing key based objects.
- Only strings and symbols are allowed as keys. If we try to insert a number, for example obj[53] = true, then it becomes a string and is equivalent to obj["53"] = true.
- JSON (Widely used data exchange format) is based on Objects. We can easily convert Objects to JSON and vice versa.
Objects Are Key-Value Pairs
In JavaScript, an object is a collection of properties, where each property is a key-value pair. The key is always a string (or can be converted to a string), and the value can be any valid JavaScript data type, such as a string, number, array, or even another object.
let obj = { name: "John", age: 30 };
console.log(obj.name);
console.log(obj['age']);
Objects Are Mutable
Objects in JavaScript are mutable, meaning you can modify their properties after creation.
let obj = { name: "John", age: 30 };
obj.age = 31;
obj.city = "New York";
delete obj.name;
console.log(obj);
Objects Can Have Functions as Values
Objects in JavaScript can store functions as methods, which can be used to define behavior along with data.
let obj = {
name: "John",
greet: function() {
console.log("Hello, " + this.name);
}
};
obj.greet();
Objects Can Have Computed Property Names
With ES6, you can use computed property names in objects. This allows you to dynamically set property names.
let key = "age";
let obj = { [key]: 30 };
console.log(obj.age);
Objects Are Not Arrays
Although both objects and arrays store collections, arrays have numeric indices, while objects use string-based keys. you can refer to this article for checking whether the given array is an object or not.
let obj = { name: "John", age: 30 };
let arr = [10, 20, 30];
console.log(obj instanceof Object);
console.log(arr instanceof Object);
console.log(arr instanceof Array);
JavaScript Arrays are Objects
JavaScript arrays are actually specialized objects, with indexed keys and special properties. They have a length property and are technically instances of the Array constructor.
const a = [10, 20, 30];
console.log(typeof a);
Objects Can Be Nested
Objects in JavaScript can be nested within other objects, creating complex data structures.
let obj = {
name: "John",
address: {
city: "New York",
zip: "10001"
}
};
console.log(obj.address.city);
Prototype Inheritance
Every JavaScript object has a prototype from which it can inherit properties. This allows for inheritance in objects.
let animal = { eats: true };
let obj = Object.create(animal);
obj.barks = true;
console.log(obj.eats);
console.log(obj.barks);
Object Destructuring
With ES6, JavaScript allows you to easily extract values from an object using destructuring syntax.
let obj = { name: "John", age: 30 };
let { name, age } = obj;
console.log(name);
console.log(age);
Objects Have Built-In Methods
JavaScript provides several built-in methods for working with objects, such as Object.keys(), Object.values(), and Object.entries().
let obj = { name: "John", age: 30 };
console.log(Object.keys(obj));
console.log(Object.values(obj));
console.log(Object.entries(obj));
The this Keyword in Objects
The this keyword refers to the object itself inside its methods. It helps you access the object's properties.
let obj = {
name: "John",
greet: function() {
console.log("Hello, " + this.name);
}
};
obj.greet();
Object.freeze()
You can use Object.freeze() to make an object immutable. This prevents adding, removing, or modifying its properties.
let obj = { name: "John", age: 30 };
Object.freeze(obj);
obj.age = 31;
console.log(obj.age);
The in Operator
The in operator checks whether a property exists in an object (including inherited properties from the prototype chain).
let obj = { name: "John", age: 30 };
console.log("name" in obj);
console.log("address" in obj);