Categories
JavaScript

Good Parts of JavaScript — Objects Types and Structure

Spread the love

JavaScript is one of the most popular programming languages in the world. It can do a lot and have some features that are ahead of many other languages.

In this article, we’ll look at some good parts of JavaScript objects, including looking at the type and structure.

Getting Types of Property Values

We can use the typeof operator to get the value of a property.

For instance, given the following object:

const obj = {  
  'foo': 1,  
  'bar': {  
    'baz': 2  
  }  
}

We can write the following by writing:

typeof obj.foo

Then we should get 'number' .

However, we want to be careful with this operator because properties up the prototype chain can also return a value.

For instance, we can write:

typeof obj.toString

and we’ll see 'function' returned.

Therefore, if we don’t want to get the types of an object’s prototypes by accident, we should use the hasOwnProperty method to check if the property is in the object first.

For instance, we can write:

obj.hasOwnProperty('foo')

to check if 'foo' is a property of obj itself.

Then that returns true since it’s defined in obj itself.

On the other hand, if we write:

obj.hasOwnProperty('toString')

Then we should get false returned since it’s part of obj ‘s prototype.

Enumeration

There’re a few ways to enumerate object properties in JavaScript.

We can use the for-in loop to loop through an object’s properties.

However, there are 2 catches. The order of the enumeration isn’t guaranteed. Also, for-in loops through all the properties of all of an object’s prototype up the prototype chain.

For instance, we can write:

for (const key in obj) {  
  //..  
}

to loop through the keys of obj and its prototypes keys.

To prevent us from looping through an object’s prototypes’ properties, we can use the hasOwnProperty method again to check if the property is an own property or not.

For instance, we can write:

for (const key in obj) {  
  if (obj.hasOwnProperty(key)) {  
    //..  
  }  
}

Object.keys

If we only want to loop through an object’s own keys, we can use the Object.keys method to get them.

It returns an array of keys to the own enumerable properties of an object.

Only string keys are returned.

For instance, we can write:

for (const key of Object.keys(obj)) {  
  //...  
}

We use the for-of instead of the for-in loop to loop through the own keys of obj .

Reflect.ownKeys

Reflect.ownKeys does is very similar to Object.keys . It returns an array of own keys of the given object.

The difference is that both string and symbols keys are returned.

For instance, we can write:

for (const key of `Reflect.ownKeys`(obj)) {  
  //...  
}

Delete

The delete operator is used to removing a property from an object.

If an object has the given property, then it’ll be removed if we use the delete operator.

For instance, given the following object:

const obj = {  
  'foo': 1,  
  'bar': {  
    'baz': 2  
  }  
}

We can use:

delete obj.foo;

to remove the foo property from obj .

Global Abatement

One bad part of JavaScript is that it’s too easy to define global variables.

This makes our program less robust with namespace collisions and makes errors hard to trace.

We can minimize the use of global variables in a few ways.

We can out our local code in objects. We can put them in blocks, or we can put them in modules.

If we create an object:

const obj = {  
  'foo': 1,  
  'bar': {  
    'baz': 2  
  }  
}

Then obj.foo isn’t a global object.

We should also never attach anything like a property of window or global in Node apps.

Also, if we put them in blocks, then we can use let and const to declare block-scoped variables and constants.

They won’t be available globally.

Items in modules also aren’t available globally.

Conclusion

We can get the types of property values by using the typeof operator.

Enumeration can be done with the for-in, for-of, Object.keys or Reflect.ownKeys methods.

The delete operator can be used to remove properties from an object.

To reduce the use of global variables, we can put variables in blocks, modules, or objects.

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 *