How to Add Property to an Object in JavaScript [5 Ways]

Here are five ways to add a property to a JavaScript Object:

  1. Using “dot(.) notation”
  2. Using “square brackets”
  3. Using “Object.defineProperty()” function
  4. Using “Object.assign()” function
  5. Using “Spread operator”

Method 1: Using dot(.) notation

Syntax

object.new_property = new_value;

Visual representation

Method 1 - Using the dot(.) notation

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

Method 2 - Using Square Bracket Notation

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

Method 4 - Using the Object.assign() function

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

Method 5 - Using Spread Operator (...)

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' }

1 thought on “How to Add Property to an Object in JavaScript [5 Ways]”

  1. That doesn’t work for me, in typescript.
    I get this error TS2339: Property ‘value’ does not exist on type …

    Reply

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.