Page Content

Tutorials

JavaScript Object Properties Manipulate with Dot Notation

JavaScript Object Properties

JavaScript objects can be thought of as collections of methods and properties. Like variables, properties are linked to an object and store values, which can be other objects or simple data types like texts or numbers. Conversely, methods are functions that are affixed to an object and carry out operations. A method of an object is what happens when a function is affixed to it. Accessing and altering object characteristics will be the main topics of this response.

Accessing Properties

Dot notation is commonly used to get a property’s value. This is writing the name of the object, then the property, and finally a period (.). For instance, you could use book.author to get a book object that has an author property. Likewise, you would use author.surname to retrieve the author object’s surname attribute (assuming author is likewise an object). The object and property names are placed on the right-hand side of an assignment or in an expression when utilising dot notation to determine a property’s value. The result will be undefined if you attempt to use dot notation to access a property that does not exist.

Modifying and Adding Properties

An object’s current properties can have their values altered. The object and property name are placed on the left-hand side of an assignment expression using dot notation. For instance, writing book would set the edition property of a book object to 7.version = 7;.

JavaScript is very versatile in that you can add a new property to an object if it doesn’t already exist using the same assignment syntax with dot notation. An object’s firstName attribute is created or updated by the statement person.firstName = “Glenn”;. Even const objects can have attributes and methods added, altered, or removed by default.

The following examples show how to access, change, and add properties using dot notation:

let dog = {
color: “brown”,
weight: 2.4,
breed: “chihuahua”
};

// Accessing properties
let dogColor = dog.color; // Accesses the ‘color’ property
console.log(dogColor);

// Outputs: brown

// Modifying a property
dog.color = “blue”; // Changes the value of the ‘color’ property
console.log(dog.color);

// Outputs: blue

// Modifying another property
dog.weight = 2.3; // Changes the value of the ‘weight’ property
console.log(dog.weight);

// Outputs: 2.3

// Adding a new property
dog.name = “JavaScript”; // Adds a new ‘name’ property
console.log(dog.name);

// Outputs: JavaScript

// Accessing the new property
console.log(dog.name);

// Outputs: JavaScript

Square bracket notation may access and edit properties like dot notation. This includes using the object’s name in square brackets ([]) with a string expression that matches the property name. Also, dog[“color”] = “blue” modifies the colour property. Square bracket notation enables changeable property names, unlike dot notation.

Property Attributes and Accessors

Each property has related attributes that govern its behaviour in addition to its name and value. Among these are adjustable, enumerable, and writable. In particular, whether the value of the property can be altered is determined by the writable attribute. Properties generated using assignment or object literals are by default writable, enumerable, and customisable. Nevertheless, you can use functions like Object.defineProperty() to control these attributes.

Properties can be accessor properties having getter and setter methods, not only values. Requesting the property’s value calls the getter method, and assigning a value calls the setter method. More control over property access is made possible by this, enabling features like debugging hooks and validation logic. Calling the related getter or setter function is the fundamental process, even if the syntax for accessing and setting accessor properties using dot notation (or square brackets) appears to be the same as for data properties.

In conclusion, the basic JavaScript syntax for retrieving and altering the values of object properties is dot notation (object.property). Adding new properties to an object can also be accomplished by simply giving a value to a property name that doesn’t exist. Gaining knowledge about property attributes and accessor properties helps one better understand how JavaScript handles property access and modification.

Index