How to create object properties in JavaScript ?

JavaScript is built on an object-oriented framework. An object is a collection of properties, where each property links a key to a value. These properties are not in any specific order.

The value of a JavaScript property can be a method (function). Object properties can be updated, modified, added, or deleted. Sometimes, properties are static and cannot be changed. In this article, we will explore how to access and create object properties in JavaScript.

There are several methods that can be used to create object properties.

Approach 1: Using the dot operator

In this approach, we are using dot notation (.), assign values to object properties directly by specifying the object name followed by the property name and value.

Syntax:

objectName.property;      // Using dot notation

Example 1: In the below code, we create an object and add properties and their associated values using the dot operator.

let student = new Object();
student.name = "ishika";
student.section = "b9";
student.cgpa = "9.52";
student.branch = "CSE";
console.log(student);

{ name: 'ishika', section: 'b9', cgpa: '9.52', branch: 'CSE' }

Approach 2: Using Square Bracket Notation

In this approach, we use square brackets to assign values to object properties. The key is specified as a string inside the brackets, and the value is assigned to the corresponding property. This method is particularly useful when the property name is dynamic or when the property name contains special characters or spaces.

Syntax:

const objectName = {};
objectName["propertyName"] = propertyValue;

Example 2: In this example, we are using the above-explained approach.

const student = {};

student["name"] = "pratyusha";
student["section"] = "b9";
student["cgpa"] = "9";
student["branch"] = "CSE";

console.log(student);

{ name: 'pratyusha', section: 'b9', cgpa: '9', branch: 'CSE' }

Approach 3: Object Initializer (Literal) Syntax

The Object Initializer (Literal) Syntax in JavaScript allows you to create an object and define its properties and values directly within curly braces

Syntax:

const objectName = {
    propertyName1: propertyValue1,
    propertyName2: propertyValue2,
    // More properties and values...
};

Example: Here is the basic example of using object literal.

const student = {
    name: "Aman",
    age: 25,
    gender: "Male",
    subjects: ["Math", "Science", "History"],
};

console.log(student);

{
  name: 'Aman',
  age: 25,
  gender: 'Male',
  subjects: [ 'Math', 'Science', 'History' ]
}

Approach 4: Object.assign() method

The Object.assign() method is a built-in function in JavaScript that is used to merge the properties of multiple source objects into a target object. It creates a new object or modifies an existing object by copying the properties from one or more source objects to the target object.

Syntax:

Object.assign(target, ...sources)

Example: In this example, we are using the above-explained approach.

// Source objects
const person = {
    name: "Nikita",
    age: 30,
};

const address = {
    city: "Haldwani",
    state: "Uttarakhan",
};

// Creating a new object and merging properties using Object.assign()
const mergedObject = Object.assign({}, person, address);

console.log(mergedObject);

{ name: 'Nikita', age: 30, city: 'Haldwani', state: 'Uttarakhan' }

Approach 5: Using the Spread operator

Using the spread operator { ... }, merge properties from multiple objects into a new object or add new properties to an existing object in JavaScript.

Syntax:

let variablename1 = [...value]; 

Example: In this example, we are using the above-explained approach.

// Step 1: Create a new object 
//with existing properties
const existingObject =
    { name: "Rishab Pant", age: 30 };

// Step 2: Add or override properties 
//using the spread operator
const newObject = {
    ...existingObject,
    city: "India",
    occupation: "Cricketer",
};

console.log(newObject);

{
  name: 'Rishab Pant',
  age: 30,
  city: 'India',
  occupation: 'Cricketer'
}

Approach 6: Using the Object.defineProperties() method

The Object.defineProperties() method in JavaScript is a standard built-in Object that defines a new or modifies existing properties directly on an object and it returns the object.

Syntax:

Object.defineProperties(obj, descriptors);

Example: In this example, we are using the above-explained approach.

const person = {};

Object.defineProperties(person, {
    name: { value: "Aman", writable: true, enumerable: true },
    age: { value: 30, writable: false, enumerable: true },
    gender: { value: "Male", enumerable: true },
});

console.log(person);

{ name: 'Aman', age: 30, gender: 'Male' }