Here are five ways to add a property to a JavaScript Object:
- Using “dot(.) notation”
- Using “square brackets”
- Using “Object.defineProperty()” function
- Using “Object.assign()” function
- Using “Spread operator”
Method 1: Using dot(.) notation
Syntax
object.new_property = new_value;
Visual representation
Example
let obj = {
name: 'Krunal',
age: 27,
education: 'Engineer'
};
console.log(obj)
obj.college = 'VVP';
console.log('After adding a property using dot syntax');
console.log(obj);
Output
{ name: 'Krunal', age: 27, education: 'Engineer' }
After adding a property using dot syntax
{ name: 'Krunal', age: 27, education: 'Engineer', college: 'VVP' }
Method 2: Using Square Bracket Notation
Syntax
obj['college'] = 'VVP';
Visual representation
Example
let obj = {
name: 'Krunal',
age: 27,
education: 'Engineer'
};
console.log(obj)
obj['college'] = 'VVP';
console.log('After adding a property using square bracket syntax');
console.log(obj);
Output
{ name: 'Krunal', age: 27, education: 'Engineer' }
After adding a property using square bracket syntax
{ name: 'Krunal', age: 27, education: 'Engineer', college: 'VVP' }
Square bracket syntax is required if a property name contains spaces or other special characters or includes the keyword reserved. Otherwise, errors will be your result.
Method 3: Using Object.defineProperty()
Object.defineProperty() method can be “used to add a new property to an object”.
Syntax
Object.defineProperty(object, property);
Example
let obj = {};
Object.defineProperty(obj, 'newProperty', {
value: 'This is the value',
writable: true,
enumerable: true,
configurable: true
});
console.log(obj);
Output
{ newProperty: 'This is the value' }
Method 4: Using Object.assign()
Object.assign() method is used to copy values from one or more source objects to a target object. It can also be used to add a new property to an object. It returns the target object.
Syntax
Object.assign(target, source);
Visual representation
Example
let obj = {
name: 'Krunal',
age: 27,
education: 'Engineer'
};
console.log(obj)
obj = Object.assign(obj, { 'college': 'VVP' });
console.log('After adding a property using Object.assign() method');
console.log(obj);
Output
{ name: 'Krunal', age: 27, education: 'Engineer' }
After adding a property using Object.assign() method
{ name: 'Krunal', age: 27, education: 'Engineer', college: 'VVP' }
Method 5: Using Spread Operator (…)
The spread operator (…) allows an iterable such as an array or string, to be expanded where zero or more arguments or elements are expected. When used with an object, it copies all properties of an object into a new object.
Syntax
object = { ...object, property1: value1, property2: value2 }
Visual representation
Example
let obj = {
name: 'Krunal',
age: 27,
education: 'Engineer'
};
console.log(obj)
obj = { ...obj, 'college': 'VVP' };
console.log('After adding a property using spread operator');
console.log(obj);
Output
{ name: 'Krunal', age: 27, education: 'Engineer' }
After adding a property using square bracket syntax
{ name: 'Krunal', age: 27, education: 'Engineer', college: 'VVP' }
Krunal Lathiya is a seasoned Computer Science expert with over eight years in the tech industry. He boasts deep knowledge in Data Science and Machine Learning. Versed in Python, JavaScript, PHP, R, and Golang. Skilled in frameworks like Angular and React and platforms such as Node.js. His expertise spans both front-end and back-end development. His proficiency in the Python language stands as a testament to his versatility and commitment to the craft.
That doesn’t work for me, in typescript.
I get this error TS2339: Property ‘value’ does not exist on type …