In JavaScript, object properties are key-value pairs that define the characteristics of an object. Properties can store any value, including primitive types, objects, arrays, and functions. Understanding how properties work is essential for mastering JavaScript objects.
🔹 What Are Object Properties?
Every object in JavaScript is a collection of properties. A property is an association between a key (also called a name) and a value.
javascriptCopyEditlet user = {
name: "Alice",
age: 25,
isAdmin: false
};
Here, the object user
has three properties: name
, age
, and isAdmin
.
- Keys:
"name"
,"age"
,"isAdmin"
- Values:
"Alice"
,25
,false
🔸 Types of Object Properties
JavaScript object properties fall into two main categories:
1. Data Properties
These are the most common type. A data property contains a value, which can be anything — a number, string, boolean, array, object, or even a function.
Example:
javascriptCopyEditlet car = {
brand: "Toyota",
year: 2023
};
Here, both brand
and year
are data properties.
2. Accessor Properties (Getters & Setters)
Accessor properties don’t hold values directly. Instead, they use functions to get or set a value.
javascriptCopyEditlet person = {
firstName: "John",
lastName: "Doe",
get fullName() {
return this.firstName + " " + this.lastName;
}
};
console.log(person.fullName); // John Doe
Setters allow assigning values:
javascriptCopyEditlet person = {
firstName: "John",
lastName: "Doe",
set fullName(name) {
[this.firstName, this.lastName] = name.split(" ");
}
};
person.fullName = "Jane Smith";
console.log(person.firstName); // Jane
🔸 Property Attributes
Every property in JavaScript has internal attributes that define its behavior:
- value – The data associated with the property.
- writable – If
true
, the value can be changed. - enumerable – If
true
, the property shows up in loops likefor...in
. - configurable – If
true
, the property can be deleted or changed.
You can define properties explicitly using Object.defineProperty()
:
javascriptCopyEditlet obj = {};
Object.defineProperty(obj, "hidden", {
value: 42,
writable: false,
enumerable: false,
configurable: false
});
🔸 Property Names and Keys
- Property keys are always strings (or symbols).
- Even if you write
age: 30
, JavaScript treats the key as"age"
.
You can also use computed property names:
javascriptCopyEditlet key = "score";
let player = {
[key]: 100
};
🔸 Adding and Modifying Properties
javascriptCopyEditlet book = {};
book.title = "JavaScript 101";
book["author"] = "Jane Doe";
🔸 Deleting Properties
Use the delete
keyword:
javascriptCopyEditdelete book.title;
🔸 Checking for Properties
To check if a property exists:
- Using the
in
operator:
javascriptCopyEditconsole.log("author" in book); // true or false
- Using
hasOwnProperty()
:
javascriptCopyEditbook.hasOwnProperty("author"); // true
🔸 Enumerating Properties
Use a for...in
loop:
javascriptCopyEditfor (let key in book) {
console.log(key + ": " + book[key]);
}
Or use Object.keys()
to get property names as an array:
javascriptCopyEditObject.keys(book);
Other helpful methods:
Object.values(book)
Object.entries(book)
🔸 Property Shorthand and Computed Properties (ES6)
javascriptCopyEditlet name = "John";
let age = 30;
let user = { name, age }; // Property shorthand
Computed property example:
javascriptCopyEditlet prop = "level";
let game = {
[prop]: "Advanced"
};
✅ Summary
JavaScript object properties are powerful tools that allow you to store, retrieve, and manipulate data efficiently. Understanding data properties, accessor properties, and their attributes like writable
, enumerable
, and configurable
helps in writing robust and flexible code.