How to create object properties in JavaScript ?

JavaScript is based on a basic object-oriented framework. A property is a link between a key and a value, while an object is a set of properties. A JavaScript object is a collection of properties that are not in any particular sequence. 

Value of javascript properties can also be a method or function. Object properties can be updated or modified, added and deleted. sometimes properties are static and can’t be modified. In this article let’s see how to access and create object properties.

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

• Using the dot operator
• Using Square Bracket Notation
• Object Initializer (Literal) Syntax
• Object.assign() method
• Using Spread operator
• Using the Object.defineProperties() method

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.

Javascript

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

Output

{ 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.

Javascript

const student = {};

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

console.log(student);

Output

{ 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.

Javascript

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

console.log(student);

Output

{
  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.

Javascript

// 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);

Output

{ 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.

Javascript

// 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);

Output

{
  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.

Javascript

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);

Output

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