Including a Property on the Begin of a JavaScript Object

Introduction

JavaScript objects are a basic constructing block of recent growth. They supply a method to construction information in a versatile and intuitive format. One activity that you could be face as a developer is the necessity to add properties to an current object. Though JavaScript offers easy strategies so as to add properties on the finish of an object, including a property in the beginning of an object is a bit trickier. This Byte will clarify tips on how to just do that.

Notice: Whereas the next strategies do place the brand new property in the beginning of the thing, JavaScript objects are inherently unordered collections of properties. Which means whereas the property could seem in the beginning in some eventualities, this isn’t assured throughout all JavaScript environments or when new properties are added.

JavaScript Object Refresher

What are they?

In JavaScript, objects are a set of properties the place every property is an affiliation between a key (or title) and a price. A property’s worth generally is a operate, during which case the property is called a technique.

Objects in JavaScript will be created utilizing the thing literal syntax:

let consumer = {
  title: "John",
  age: 30
};

On this instance, consumer is an object with two properties: title and age.

Including Properties

JavaScript offers a number of methods so as to add properties to an object. Probably the most easy manner is to easily assign a price to a brand new property on the thing:

consumer.nation = "USA";

Now, the consumer object has a brand new property, nation, with the worth "USA". Nonetheless, this methodology provides the property to the top of the thing. If we wish to add a property on the begin of the thing, we have to use a distinct approach.

Utilizing New Objects

Sadly, JavaScript doesn’t present a built-in manner so as to add a property in the beginning of an object. It’s because JavaScript objects are usually not ordered by default. The properties of an object do not need a particular order.

Nonetheless, we are able to obtain the specified end result by creating a brand new object with the brand new property, after which copying the prevailing properties from the outdated object to the brand new one.

let consumer = {
  title: "John",
  age: 30
};

let newUser = {
  nation: "USA"
};

for (let key in consumer) {
  newUser[key] = consumer[key];
}

On this instance, newUser is a brand new object with the nation property in the beginning, adopted by the properties from consumer.

Utilizing Object.assign() to Add a Property on the Begin

JavaScript doesn’t inherently help the idea of including a property in the beginning of an object as a result of it’s not an array. Nonetheless, we are able to use the Object.assign() methodology to attain this. This methodology is used to repeat the values of all enumerable personal properties from a number of supply objects to a goal object.

This is how you should utilize Object.assign() so as to add a property in the beginning of an object:

let obj = {title: 'John', age: 30};
let newObj = Object.assign({nation: 'USA'}, obj);
console.log(newObj);

The output shall be:

{nation: 'USA', title: 'John', age: 30}

Examples

Let us take a look at a number of sensible examples of including a property in the beginning of an object.

Instance 1: Including a single property

let pupil = {title: 'Jane', grade: 'A'};
let updatedStudent = Object.assign({id: 101}, pupil);
console.log(updatedStudent);

The output shall be:

{id: 101, title: 'Jane', grade: 'A'}

Instance 2: Including a number of properties

let automobile = {mannequin: 'Camry', 12 months: 2010};
let updatedCar = Object.assign({make: 'Toyota', colour: 'Blue'}, automobile);
console.log(updatedCar);

The output shall be:

{make: 'Toyota', colour: 'Blue', mannequin: 'Camry', 12 months: 2010}

Conclusion

Whereas JavaScript objects don’t inherently help the idea of order, the Object.assign() methodology can be used so as to add a property in the beginning of an object. Nonetheless, it is essential to do not forget that the order of properties in JavaScript objects isn’t assured. These strategies are helpful whenever you wish to mix properties from a number of objects right into a single one, with new properties being added in the beginning.