Objects Destructing and checking existing properties in object

Since JavaScript allows you to create dynamic objects, you have to be careful and check if an object’s property actually exists.

• Two ways to check property existence

hasOwnProperty

hasOwnProperty is a function built into all objects.

if (obj.hasOwnProperty('prop')) {
    // do something
}
       let options = {
            title: "Menu",
            width: 100,
        };
        if (options.hasOwnProperty('title')) {
            console.log(`${options.title`)        // Menu
        }

Note: Internet Explorer host objects (objects supplied by the environment and are different between browsers) do not have the hasOwnProperty function.

in Operator

in is a built in operator you can use to check for an existence of an object property.

if ('prop' in obj) {
    // do something
}

Note: obj ‘s prorotypes will also be checked for the prop property.

Undefined Check

You can check if an object has a property by checking if it’s undefined :

if (typeof obj.prop !== 'undefined') {

// do something

}

or:

if (typeof obj['prop'] !== 'undefined') {

// do something

}

Object destructuring

The destructuring assignment also works with objects.

The basic syntax is:

let {var1, var2} = {var1:…, var2:…}

We have an existing object at the right side, that we want to split into variables. The left side contains a “pattern” for corresponding properties. In the simple case, that’s a list of variable names in {...}.

For instance:

let options = {
  title: "Menu",
  width: 100,
  height: 200
};

let {title, width, height} = options;

alert(title);  // Menu
alert(width);  // 100
alert(height); // 200

Properties options.title, options.width and options.height are assigned to the corresponding variables. The order does not matter. This works too:

// changed the order in let {...}
let {height, width, title} = { title: "Menu", height: 200, width: 100 }

The pattern on the left side may be more complex and specify the mapping between properties and variables.

If we want to assign a property to a variable with another name, for instance, options.width to go into the variable named w, then we can set it using a colon:

let options = {
  title: "Menu",
  width: 100,
  height: 200
};

// { sourceProperty: targetVariable }
let {width: w, height: h, title} = options;

// width -> w
// height -> h
// title -> title

alert(title);  // Menu
alert(w);      // 100
alert(h);      // 200

The colon shows “what : goes where”. In the example above the property width goes to w, property height goes to h, and title is assigned to the same name.

For potentially missing properties we can set default values using "=", like this:

let options = {
  title: "Menu"
};

let {width = 100, height = 200, title} = options;

alert(title);  // Menu
alert(width);  // 100
alert(height); // 200

Just like with arrays or function parameters, default values can be any expressions or even function calls. They will be evaluated if the value is not provided.

In the code below prompt asks for width, but not for title:

let options = {
    title: "Menu"
  };
  
  let {width = prompt("width?"), title = prompt("title?")} = options;
  
  alert(title);  // Menu
  alert(width);  // (whatever the result of prompt is)

We also can combine both the colon and equality:

let options = {
  title: "Menu"
};

let {width: w = 100, height: h = 200, title} = options;

alert(title);  // Menu
alert(w);      // 100
alert(h);      // 200

If 

let options = {
  title: "Menu",
  width: 100,
  height: 200
};

// only extract title as a variable
let { title } = options;

alert(title); // Menu