JavaScript user-defined objects

JavaScript user-defined objects allow you to create custom data structures and behaviors by defining your own objects. Objects in JavaScript are collections of key-value pairs, where the keys are strings and the values can be any type of data, including other objects.

You can create user-defined objects using object literal notation or constructor functions. Object properties can be added or modified dynamically, and methods can be defined to perform specific actions.

JavaScript provides several syntax options for defining user-defined objects. Here are the main ways to create user-defined objects in JavaScript:

Object Literal Notation:

Using curly braces {} and specify the key-value pairs within. The keys are strings, and the values can be any valid JavaScript expression.

let object = {
  key1: value1,
  key2: value2,
  // ...
};

Constructor Functions:

This is used to create objects based on a template. Inside the constructor function, you assign values to properties using the this keyword. To create an object based on the constructor, you use the new keyword followed by the constructor function.

function ObjectName(parameter1, parameter2, ...) {
  this.property1 = parameter1;
  this.property2 = parameter2;
  // ...
}

Object.create() method:

This method creates a new object with the specified prototype object. The prototype object contains the properties and methods that will be inherited by the newly created object.

let prototypeObject = {
  // properties and methods
};

let object = Object.create(prototypeObject);

Class Syntax (ES6):

Introduced in ECMAScript 2015 (ES6), the class syntax provides a more structured and intuitive way to define objects. You define a class using the class keyword, and the constructor and methods are defined within the class. Objects are created using the new keyword followed by the class name.

class ClassName {
  constructor(parameter1, parameter2, ...) {
    this.property1 = parameter1;
    this.property2 = parameter2;
    // ...
  }

  method1() {
    // ...
  }

  method2() {
    // ...
  }
}

User-defined objects provide flexibility and customization in JavaScript programming.

JavaScript user-defined objects example

Simple example code creating a user-defined object using object literal notation:

let person = {
  firstName: "John",
  lastName: "Doe",
  age: 30,
  greet: function() {
    console.log("Hello, my name is " + this.firstName + " " + this.lastName + ".");
  }
};

console.log(person.firstName);
person.greet();

Output:

constructor functions:

function Rectangle(width, height) {
  this.width = width;
  this.height = height;
  this.getArea = function() {
    return this.width * this.height;
  };
}

let rectangle = new Rectangle(5, 3);
console.log(rectangle.width); // Output: 5
console.log(rectangle.getArea()); // Output: 15

You can customize objects by adding properties, methods, and behavior according to your specific needs.

Comment if you have any doubts or suggestions on this Js object topic.

Note: The All JS Examples codes are tested on the Firefox browser and the Chrome browser.

OS: Windows 10

Code: HTML 5 Version