Add a Property to the Beginning of an Object in JavaScript

Add a Property to the Beginning of an Object #

Use the spread operator (...) to add a property to the beginning of an object, e.g. obj = {one: 1, ...obj};. The spread operator unpacks the key-value pairs of an object into a new object, allowing us to add one or more properties to the beginning.

Copied!
// ✅ Using spread syntax (...)
let obj1 = {two: 2, three: 3};
obj1 = {one: 1, ...obj1};

console.log(obj1); // 👉️ {one: 1, two: 2, three: 3}

We used the spread operator (...) to unpack the key-value pairs of an object into a new object.

Copied!
let obj1 = {two: 2, three: 3};

// 👇️ creates a shallow copy of `obj1`
const newObj = {...obj1};
console.log(newObj); // {two: 2, three: 3}

Because we prepended the property one to the beginning and unpacked the rest at the end, the order is preserved and would be respected when iterating over the object, e.g. in a for...in loop.

Copied!
let obj1 = {two: 2, three: 3};
obj1 = {one: 1, ...obj1};

// 👇️ order is respected
for (const key in obj1) {
  console.log(key); // one, two, three
}

An alternative approach is to use the Object.assign method.

Use the Object.assign() method to add a property to the beginning of an object, e.g. obj = Object.assign({one: 1}, obj). The Object.assign method copies the properties from one or more objects to a target object and returns the result.

Copied!
// ✅️ Using Object.assign
let obj2 = {two: 2, three: 3};
obj2 = Object.assign({one: 1}, obj2);

console.log(obj2); // 👉️ {one: 1, two: 2, three: 3}

We passed the following parameters to the Object.assign method:

1. A target object to which the key-value pairs from the source object(s) get applied.
2. One or more source objects that contain the properties you want to apply to the target.

Copied!
// 👇️ {a: 1, b: 2, c: 3}
console.log(Object.assign({a: 1}, {b: 2}, {c: 3}));

The key-value pairs from the second and third objects got copied into the first object, which allows us to add one or more properties to the beginning of the object.

The ordering would be respected when iterating over the object, just like with the spread operator:

Copied!
let obj2 = {two: 2, three: 3};
obj2 = Object.assign({one: 1}, obj2);

for (const key in obj2) {
  console.log(key); // 👉️ one, two, three
}

Some browsers may iterate over an object in an arbitrary order, so it's not 100% guaranteed that the insertion order will be respected.

If you need to be certain that the insertion order of key-value pairs in an object is respected, you should use a Map instead.

Further Reading #

• Update an Object's Property in Array of Objects in JS
• Increment the Values in an Array using JavaScript