Javascript Properties

The attributes of JavaScript objects are known as properties. Primitives, objects, functions, and other entities are among the values that they are frequently used to hold. To become proficient at manipulating objects in JavaScript, one must first grasp its attributes. For a detailed summary, see this:

Types of Properties

Data Properties

Value: Contains the property’s worth.
Writable: A Boolean value that indicates whether or not the property value is modifiable.
Enumerable: A boolean value that indicates whether or not a property can be listed repeatedly inside of a for-loop.
Configurable: A boolean value that indicates whether or not the property can be altered or removed.

Accessor Properties

Getter: A function known as “getter” is invoked upon reading a property.
Setter: Upon setting a property, a function known as a setter is invoked.

Defining Properties

Using Dot or Bracket Notation

let obj = {};
obj.name = "John"; // dot notation
obj['age'] = 30; // bracket notation

Here, it defines the property using dot(.) like obj.name is assigned to the value of “John”.

Using bracket notation obj[‘age’] is assigned “30”.

Using Object Initializer

The initializer of object looks like this below.

let obj = {
  name: "John",
  age: 30
};

Using Object.define Property

obiect.define property looks like this below.

let obj = {};
Object.defineProperty(obj, 'name', {
  value: 'John',
  writable: true,
  enumerable: true,
  configurable: true
});

Property Descriptors

Detailed information about a property is provided by property descriptions. With Object, you can obtain a property descriptor, Object.getOwnPropertyDescriptor() is used.

let obj = { name: "John" };
let descriptor = Object.getOwnPropertyDescriptor(obj, 'name');
console.log(descriptor);
// { value: "John", writable: true, enumerable: true, configurable: true }

Modifying Property Attributes

You can modify property attributes using Object.defineProperty().

let obj = { name: "John" };
Object.defineProperty(obj, 'name', {
  writable: false,
  enumerable: false
});

Accessor Properties (Getters and Setters)

To design properties that calculate their value or to carry out an action when a property is set, getters and setters are utilized.

let obj = {
  get name() {
    return this._name;
  },
  set name(value) {
    this._name = value;
  }
};
obj.name = "John";
console.log(obj.name); // "John"

Working with Inherited Properties

JavaScript objects can inherit properties from their prototypes.

function Person(name) {
  this.name = name;
}
Person.prototype.greet = function() {
  return "Hello, " + this.name;
};

let john = new Person("John");
console.log(john.greet()); // "Hello, John"

Enumerating Properties

You can use Object.keys() or a for…in loop to enumerate every enumerable property of an object.

let obj = { name: "John", age: 30 };
for (let key in obj) {
  console.log(key); // "name", "age"
}

let keys = Object.keys(obj);
console.log(keys); // ["name", "age"]

Property Existence

Use the hasOwnProperty() function or the in operator to determine whether a property is present in an object.

let obj = { name: "John" };
console.log('name' in obj); // true
console.log(obj.hasOwnProperty('name')); // true

Deleting Properties

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

let obj = { name: "John" };
delete obj.name;
console.log(obj.name); // undefined

Preventing Extensions, Sealing, and Freezing Objects

Object.preventExtensions(): Stops an object from getting new properties added to it.
Object.seal(): Stops current properties from being changed or added new ones from being taken away.
By using object.freeze(), you can stop current properties from being updated or removed, as well as new properties from being added.

let obj = { name: "John" };

Object.preventExtensions(obj);
obj.age = 30; // fails silently
console.log(obj.age); // undefined

Object.seal(obj);
delete obj.name; // fails silently
console.log(obj.name); // "John"

Object.freeze(obj);
obj.name = "Doe"; // fails silently
console.log(obj.name); // "John"

Effective JavaScript programming requires an understanding of the ability to work with properties, particularly when working with complex objects and inheritance.