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); |
{ 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); |
{ 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); |
{
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 objectsconst 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.
Javascript
// Step 1: Create a new object //with existing propertiesconst existingObject = { name: "Rishab Pant", age: 30 };// Step 2: Add or override properties //using the spread operatorconst 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.
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); |
{ name: 'Aman', age: 30, gender: 'Male' }
