JavaScript Object Properties

JavaScript objects are collections of properties, where each property is defined as a key-value pair. Understanding object properties is important to working with JavaScript as they enable dynamic storage, access, and manipulation of data.

Defining Object Properties

You can create objects using object literals, defining properties as key-value pairs.

let obj = {
    name: 'Sourav',
    age: 23,
    isActive: true
};
console.log(obj.name); 

Sourav

Here, name, age, and isActive are properties of the object. The values can be of any type, including strings, numbers, and booleans.

Accessing Object Properties

Properties can be accessed using dot notation or bracket notation.

let obj = {
    name: 'Sourav',
    age: 23,
    isActive: true
};
console.log(obj.age);  //dot notation
console.log(obj['isActive']); //bracket notation

23
true

• Dot Notation: Simple and easy to iuse, works when the property name is a valid identifier.
• Bracket Notation: Useful when accessing properties dynamically or when the property name includes special characters or spaces.

Adding and Modifying Properties

You can add new properties or update existing ones.

let obj = {
    name: 'Sourav',
    age: 23,
    isActive: true
};
obj.gender = 'male'; // Adding a new property
obj.age = 26;          // Modifying an existing property
console.log(obj);  

{ name: 'Sourav', age: 26, isActive: true, gender: 'male' }

Properties can be added or updated simply by assigning a value to a key.

Deleting Properties

Use the delete operator to remove a property from an object.

let obj = {
    name: 'Sourav',
    age: 23,
    isActive: true
};
delete obj.isActive;
console.log(obj);

{ name: 'Sourav', age: 23 }

Checking Property Existence

You can check if a property exists using the in operator or hasOwnProperty() method.

let obj = {
    name: 'Sourav',
    age: 23,
    gender: 'female'
};
console.log('age' in obj);
console.log(obj.hasOwnProperty('gender'));

true
true

• in Operator: Checks if the property exists in the object or its prototype chain.
• hasOwnProperty(): Only checks properties owned directly by the object.

Enumerable vs Non-Enumerable Properties

Properties can be marked as enumerable or non-enumerable using Object.defineProperty().

let obj = {
    name: 'Sourav',
    age: 23,
    gender: 'male'
};

Object.defineProperty(obj, 'country', {
    value: 'India',
    enumerable: false
});

console.log(obj.country); 
console.log(Object.keys(obj));

India
[ 'name', 'age', 'gender' ]

Non-enumerable properties do not appear in for...in loops or Object.keys() results.

Property Attributes

Object properties have attributes that define their behavior, such as writable, configurable, and enumerable.

let obj = {
    name: 'Sourav',
    age: 23
};

Object.defineProperty(obj, 'status', {
    value: 'active',
    writable: false,
    configurable: false,
    enumerable: true
});

obj.status = 'inactive'; // Does not change due to `writable: false`
console.log(obj.status);

active

• writable: Determines if the value can be changed.
• configurable: Specifies if the property can be deleted or modified.
• enumerable: Indicates if the property shows up during enumeration.

Accessors (Getters and Setters)

Objects can have computed properties using getters and setters.

let obj = {
    fName: 'Sourav',
    lName: 'Sharma',
    get fullName() {
        return `${this.fName} ${this.lName}`;
    },
    set fullName(name) {
        [this.fName, this.lName] = name.split(' ');
    }
};

console.log(obj.fullName);
obj.fullName = 'Ravi Kumar';
console.log(obj.fName);
console.log(obj.lName);

Sourav Sharma
Ravi
Kumar

Getters allow reading, and setters enable modifying properties in a controlled manner.