Deleting/Testing JavaScript Object’s Properties

JavaScript Objects are a sort of a bucket containing properties – values pairs, but these are meaningless unless something can be done using data contained inside objects. That’s JavaScript have some operators which can be performed on object’s properties. Like delete for removing a property of an object.

Deleting/Adding Properties in JavaScript Objects

Add Property to an Object

At certain times in code, it is need to change Object’s properties like adding some new properties to an object or perhaps deleting some of existing one.
For adding newer properties to JavaScript Object delete operator can be used. Below is a code example showing how delete can be used for removing properties from an object –

// JavaScript Object Constructor
function tesla(name, model, price, color){
	this.name = name;
	this.model = model;
	this.price = price;
	this.color = color;
}
// Making an object from JavaScript constructor using new keyword
var a_car = new tesla("My car", "Model S", 100000, "red");

delete a_car.color; 

// After doing "delete a_car.color;"
// Object a_car will become tesla("My car", "Model S", 100000);

Remove property from an Object JavaScript

Adding newer properties to a javascript object is also similar to delete operator, just need to use object[property] = value; expression. Below is a code example explaining how to add property to a JavaScript object?

// JavaScript Object Constructor
function tesla(name, model, price, color){
	this.name = name;
	this.model = model;
	this.price = price;
	this.color = color;
}
// Making an object from JavaScript constructor using new keyword
var a_car = new tesla("My car", "Model S", 100000, "red");

a_car[distance_limit] = 100; // Creating new object property with value 100

// After this statement being executed by JavaScript a_car will become
tesla("My car", "Model S", 100000, "red", 100);

Moreover using delete operator multiple times, as many as all of properties can be removed from object.

Ways to test whether an Object has a property or not

As a JavaScript Develop knowing to look into an object and see what’s inside is really important, specifically for escaping being encountered by undefined. There are three ways in JavaScript which can be used for checking if property exists –

  1. Using hasOwnProperty() method to check object has a specific property or not.
  2. in operator looks for object’s own properties and it’s inherited properties.
  3. Comparing property with undefined

Note that hasOwnProperty method just looks into list of object’s own properties and doesn’t look into object’s inherited properties, while in operator does look into a list of both properties. That’s why I prefer to use in operator for checking whether an object has a property or not.

Syntax of ways to test whether object has property or not in JavaScript, hasOwnProperty() method, in operator, undefined method, ways to check properties of an object in JavaScript
Ways to check properties of an JavaScript Object

hasOwnProperty() method

Every JavaScript object returns true or false depending upon whether it has a property or not when hasOwnProperty(propertyname) method is called upon it. Syntax for this method is – object.hasOwnProperty(propertyname).
Below is a code example explaining how hasOwnProperty() method can be used in JavaScript code.

// JavaScript Object Constructor
function tesla(name, model, price, color){
	this.name = name;
	this.model = model;
	this.price = price;
	this.color = color;
}
// Making an object from JavaScript constructor using new keyword
var a_car = new tesla("My car", "Model S", 100000, "red");

a_car.hasOwnProperty('name');  // Will return true as a_car does have name property
a_car.hasOwnProperty('mileage'); // Will return false as a_car does not have a property mileage

in operator for checking properties

in JavaScript operator is quite simple to use for looking up property name inside an object. Its syntax is – propertyname in object.
Below is a coding example explaining how this can be used –

// JavaScript Object Constructor
function tesla(name, model, price, color){
	this.name = name;
	this.model = model;
	this.price = price;
	this.color = color;
}
// Making an object from JavaScript constructor using new keyword
var a_car = new tesla("My car", "Model S", 100000, "red");

'name' in a_car; // Will return true as a_car object does have name property
'features' in a_car // For sure will return false as object a_car don't have features property

Comparing property with undefined

Value of an object’s property can be retrieved from object using Dot Property Accessor, then this could be compared with undefined. Syntax for doing this is – object.property !== undefined.
Below is a code example showing how comparing property with undefined can be used for determining whether object have a property or not?

// JavaScript Object Constructor
function tesla(name, model, price, color){
	this.name = name;
	this.model = model;
	this.price = price;
	this.color = color;
}
// Making an object from JavaScript constructor using new keyword
var a_car = new tesla("My car", "Model S", 100000, "red");

a_car.name !== undefined; // Evaluates to true as a_car does have name property
a_car.tires !== undefined; // Evaluates to false as a_car doesn't have any tires property

Conclusion

JavaScript’s objects are quite useful for just holding a lot of data, having many easy ways to modify/access data inside JavaScript objects also makes it easier to program these inside code. Also for accessing properties of JavaScript Objects personally I use in operator method. But its totally up to which one of these you want to use or depending on situation which your dealing with in your code.

Moreover about JavaScript’s objects itself, I’ve put up couple of articles on this website you can check those out by clicking text below.

Despite these I’ve put up a lot of other articles as well about JavaScript Programming Language on this website. You can check those out here – JavaScript Programming Langauge Computer Science Hub.

Gagan

Hi, there I'm founder of ComputerScienceHub(Started this to bring useful Computer Science information just at one place). Personally I've been doing JavaScript, Python development since 2015(Been long) - Worked upon couple of Web Development Projects, Did some Data Science stuff using Python. Nowadays primarily I work as Freelance JavaScript Developer(Web Developer) and on side-by-side managing team of Computer Science specialists at ComputerScienceHub.io

Leave a Reply

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

Recent Posts