JavaScript Objects
An essential data type and a key idea for code organisation in JavaScript are objects. Objects are composite values as opposed to primitive data types like numerical, textual, Boolean, symbolic, null, and undefined. In order to create increasingly sophisticated structures, they serve as data containers that combine many values, including both primitive values and other items.
Essentially, an object is a set of functions (methods) and variables (parameters). These qualities are not arranged in any particular sequence.
You might think of properties as the variables or parameters that are associated with an object. They serve as storage for information about the object. Key value pairs make up each property. Although symbols can be used, the key, also called a property name, is usually a string. Any value in JavaScript, including arrays, primitives, and even other objects, can be the value assigned to a property. Basically, objects translate values to string keys.
Methods are object-specific functions. It is referred to as a method when a function is an attribute of an object. An object’s behaviour or activities are defined by its methods. When the method is invoked, the lines of code that are executed are contained in them. Often, an object’s methods are its inherited properties.
Data (properties) and operations (methods) are efficiently bundled together in an object.
Object Literal Syntax
In JavaScript, the object literal syntax is a popular method for creating objects. This is enclosed in curly braces {} with a list of properties separated by commas. A colon (:) is used to separate each property’s name and value pair specification.
The object literal syntax has been improved in recent JavaScript versions (ES6 and later):
- Shorthand Property Names: You can just list the variable name if you have a variable and wish to create a property with the same name as the variable and assign the variable’s value to it.
- Shorthand Method Syntax: When defining methods, the colon and the function keyword can be left out, as the main example illustrates. This clarifies the definition and makes it clear that it is meant to be a method.
- Computed Property Names: The property name can be enclosed in square brackets [] around an expression. The property name is the result of evaluating the expression enclosed in brackets and converting it to a string.
- Accessor Properties: The get and set keywords can be used directly in the object literal to build getter and setter methods. Although they appear to be properties, these are actually functions that are run whenever a property is accessed or changed.
- Trailing Commas: It’s OK to place a comma after an object literal’s final property to facilitate the addition of new properties.
An example showing how to build a dog object with properties and functions using object literal syntax is provided here:
// Create an object using object literal syntax
let dog = {
// Properties (variables/parameters storing data)
name: “Buddy”, // Property ‘name’ with value “Buddy”
weight: 2.4, // Property ‘weight’ with value 2.4
color: “brown”, // Property ‘color’ with value “brown”
breed: “chihuahua”, // Property ‘breed’ with value “chihuahua”
// Methods (functions defining behaviour)
// Traditional method syntax
bark: function() {
console.log(“Woof!”);
},
// ES6 shorthand method syntax
getDescription() {
// ‘this’ refers to the object itself
return this.name + ” is a ” + this.color + ” ” + this.breed + “.”;
}
};
Along with methods like bark and getDescription, this dog object has attributes like name, breed, weight, and colour.
Use dot notation (object.propertyName) or square bracket notation (object[‘propertyName’]) to access properties and methods after creating an object. The property name is usually a JavaScript identifier in dot notation. Property names in variables or with unusual characters like spaces benefit from square bracket notation.
// Accessing properties using dot notation
console.log(“Dog’s name:”, dog.name); // Output: Dog’s name: Buddy
// Accessing properties using square bracket notation
console.log(“Dog’s color:”, dog[‘color’]); // Output: Dog’s color: brown
// Calling a method using dot notation
dog.bark(); // Output: Woof!
// Calling another method and using its return value
console.log(dog.getDescription()); // Output: Buddy is a brown chihuahua.
Object literal-created objects can be changed. Properties can be added, modified, or removed once the object has been created.
Numerous built-in objects, including Array, String, Math, Date, RegExp, Map, and Set, are included in JavaScript in addition to user-defined objects. These extra objects include the window, document, history, and location objects that are provided by the browser environment. A structure made up of objects that represent the structure of an HTML document, the Document Object Model (DOM) itself enables interaction with web page elements.
JavaScript objects are essentially flexible containers that serve as groups for related variables (properties) and methods (functions that work with that data). In JavaScript, they serve as the foundation for object oriented programming principles and are essential for structuring code.