Categories
JavaScript Tips

Useful JavaScript Tips — Object Freezing

Spread the love

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.

Check the Prototype of an Object

We can use the isPrototypeOf method of an object to check if another object is a prototype of an object.

For instance, if we have:

const animal = {
  name: 'james'
}

const dog = Object.create(animal);

Then we can call isPrototypeOf by writing:

`animal`.isPrototypeOf(dog)

That expression would return true since we passed animal into Object.create .

On the other hand, if we have:

const cat = {};

Then:

animal.isPrototypeOf(cat)

returns false .

Check if an Object has a Given Property

We can check if an object has a given property by using the hasOwnProperty method.

It checks if a property is a non-inherited property of an object.

For instance, we can write:

const person = { name: 'james' };
const hasName = person.hasOwnProperty('name');

Then we can check if the name property is in the person object with hasOwnProperty .

The has hasName would be true since name is a property of person .

Get All the Property Values from an Object

We can get all the property values of an object with the Object.values() method.

For instance, we can write:

const person = { name: 'james', age: 7 };
const values = Object.values(person);

Then values would be [“james”, 7] .

Set the Prototype of an Object

The prototype of an object can be set after the object is created.

We can do that with the setPrototypeOf method.

For instance, we can write:

const dog = {
  breed: 'poodle'
};

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

Object.setPrototypeOf(dog, animal);

setPrototypeOf is a static method of Object .

dog is the object that we want to set the prototype of.

animal is the prototype that we want to set dog to.

Therefore, we can write:

console.log(dog.name);

Then we have 'james' as the value of dog.name since dog inherits properties from animal .

Sealing the Object

Sealing an object means that we prevent an object from accepting new properties.

Also, we prevent properties from being removed.

We can use the Object.seal method to prevent properties from changing.

For instance, we can write:

const dog = {
  breed: 'poodle'
};

Object.seal(dog);

dog is sealed so we can’t add or remove properties from it.

There’s also the Object.freeze method that does less than seal .

It doesn’t make properties non-writable in addition to what seal does.

For example, we can write:

const dog = {
  breed: 'poodle'
};

Object.freeze(dog);

There’s also the preventExtensions method to disallow adding properties.

We call it the same way as seal and freeze .

Getting Non-inherited String Keys with the Object.keys Method

We can get non-inherited string keys from an object with the Object.keys method.

For instance, we can use it by writing:

const dog = {
  breed: 'poodle'
};
const keys = Object.keys(dog);

Then the value of keys is [“breed”] .

It’s an array so we can do whatever we want with them like other arrays.

Check if an Object is Sealed

The Object.isSealed method lets us check if an object is sealed.

For instance, we can write:

const dog = {
  breed: 'poodle'
};
const isSealed = Object.`isSealed`(dog);

Then we get isSealed is false since we didn’t call Object.seal on dog .

Once an object is sealed, it can’t be unsealed.

Check if an Object if Frozen

We can use the Object.isFrozen method to check if an object is frozen.

For instance, we can write:

const dog = {
  breed: 'poodle'
};
const isFrozen = Object.isFrozen(dog);

Now we can check if an object is frozen.

isFrozen should be false since dog isn’t frozen.

Check if we can add a Property to an Object

The Object.isExtensible method lets us check if we can add a property to an object.

Unless an object is passed into the Object.freeze , Object.seal , or Object.preventExtensions methods, we can add properties to it.

For instance, we can call isExtensible by writing:

const dog = {
  breed: 'poodle'
};
const isExtensible = Object.isExtensible(dog);

Then isExtensible is true since we didn’t seal or freeze dog .

Conclusion

There are many things we can do with objects that we may have missed.

We can prevent objects from changing or adding/removing properties.

Also, we can check if objects can be changed.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *