Useful JavaScript Tips — Object Properties and Copying

Like any kind of apps, JavaScript apps also have to be written well.

Otherwise, we run into all kinds of issues later on.

In this article, we’ll look at some tips we should follow to write JavaScript code faster and better.

Comparing 2 Objects with Object.is()

An alternative way to compare 2 objects is with the Object.is method.

It’s almost the same as the === operator.

However, NaN is the same as itself.

For instance, we can write:

Object.is(a, b)

Then we can compare 2 variables a and b .

Get the Prototype of an Object

We can get the prototype of an object with the Object.getPrototypeOf method.

For instance, we can get the prototype of an object as follows:

const animal = {
  name: 'james',
  age: 7
};

const dog = Object.create(animal);

We created a dog object with Object.create so that dog will inherit from animal .

So if we call Object.gerPrototypeOf with it:

const prot = Object.getPrototypeOf(dog);

Then:

prot === animal

would be true since animal is dog ‘s prototype.

Get the Non-inherited Symbols of an Object

The Object.getOwnPropertySymbols returns all the non-inherited symbol keys of an object.

If we have the follow object:

const name = Symbol('name')
const age = Symbol('age')
const dog = {
  [name]: 'james',
  [age]: 7
}

Then we can call getOwnPropertySymbols as follows:

const syms = Object.getOwnPropertySymbols(dog);

Then we get that syms is :

[Symbol(name), Symbol(age)]

Get Non-inherited String Keys of an Object

The Object.getOwnPropetyNames method lets us get an array of string keys of an object.

The keys return aren’t inherited from any prototypes.

For instance, we can write:

const dog = {
  breed: 'poodle'
}

const keys = Object.getOwnPropertyNames(dog);

Then we get [“breed”] as the value of keys .

Get Key-Value Pairs of an Object

The Object.entries method returns an array of key-value pairs of an object.

For example, we can write:

const person = { name: 'james', age: 18 }
const pairs = Object.entries(person);

Then pairs would be:

[
  [
    "name",
    "james"
  ],
  [
    "age",
    18
  ]
]

where the first entry of the inner arrays is the key name, and the 2nd is the value.

Add a Single Property to an Object

We can call Object.defineProperty on an object to create a new property.

For instance, we can write:

const dog = {};
Object.defineProperty(dog, 'breed', {
  value: 'poodle'
})

We added the breed property into dog using the defineProperty method.

Add Multiple Properties to an Object at Once

In addition to the Object.defineProperty , there’s also the Object.defineProperties method to add multiple properties to an object.

For instance, we can write:

const dog = {};
Object.defineProperty(dog, {
  breed: {
    value: 'poodle'
  },
  name: {
    value: 'james'
  },
})

Then dog would be {breed: “poodle”, name: “james”} .

It’s a convenient way to add multiple properties to an object at once.

Creating an Object with Object.create

Object.create lets us create an object with a prototype.

For instance, we can write:

const animal = {
  name: 'james',
  age: 7
};

const dog = Object.create(animal);

Then dog is has animal as its prototype.

It’ll inherit all the properties from animal .

So dog.name would be 'james' .

Copying and Combining Objects with Object.assign

Object.assign lets us combine multiple objects into one or copy them.

To make a copy of an object, we can write:

const copy = Object.assign({}, original)

We make a copy of the original object and assigned it to the copy variable.

{} should be the first argument so that we won’t modify any existing objects and copy them into an empty object.

To combine multiple objects, we can write:

const merged  = Object.assign({}, obj1, obj2)

We copy all the own string properties from obj1 and obj2 into the empty object in the first argument.

So merged would have all the own properties from both.

Conclusion

We can compare and copy objects with static Object methods.

Also, we can define properties on an object with them.

Also, we can copy and merge objects with the Object.assign method.

It does a shallow copy so that the top-level is copied.