christopher clark christopher clark - 2 months ago 6
Javascript Question

Assignment of Property Default Values in a Null Object Javascript

I have this object

TrSet
that takes in nodes from the dom. Sometimes those dom elements can be null, and I want to handle properties of the nodes, unfortunately, I can't figure out how to use null conditional assignment on
undefined
properties.

var TrSet = function(valid,stat,txt,dd){
this.validateField = valid || "";
this.statusDropDown = stat || "";
this.txtValue = txt || "";
this.ddValue = dd || "";
this.txtValue.value = txt.value || ""; //Cannot read property value of undefined
this.ddValue.style.visibility = dd.style.visibility || "hidden"; //same

this.validate = function () {
/// Even when attempting to access
/// the property with hasOwnProperty throws the error
///"Cannot read property 'hasOwnProperty' of null"!
if (this.statusDropDown.hasOwnProperty("value") && this.validateField.hasOwnProperty("style")) {


I don't understand how either of these is failing. If it's null or undefined, it should evaluate to true for the empty string and set it equal to that.

EDIT For Clarity


In the first example


var TrSet = function(txt) {
this.txtValue = txt || "";
this.txtValue.value = txt.value || "";
}


If
txt
is null set it equal to
""
, if
txt.value
is null set it equal to
""
. how does this fail?

Second example

var TrSet = function(stat) {
this.statusDropDown = stat || "";

if (this.statusDropDown.hasOwnProperty("value)) { }


If
stat
is null set
statusDropDown
equal to
""
. Then I check if if it
hasOwnProperty
. Why does this fail?

Answer

I don't understand how either of these is failing. If it's null or undefined, it should evaluate to true for the empty string and set it equal to that.

Not quite: the statement txt || "" will return the value of txt or "", whichever is truthy first. It does not assign that value anywhere, especially not to txt. You assign separately.

Therefore, in your example (reduced to the necessary parts for example):

var TrSet = function(valid,stat,txt,dd){
  this.txtValue = txt || "";
  console.log('txt will still be undefined but txtValue will not be', txt, this.txtValue);
  this.txtValue.value = txt.value || "";
}

To do what you expect, you would need to default out txt again, like so:

var TrSet = function(valid,stat,txt,dd){
  this.txtValue = txt || "";
  console.log('txt will still be undefined but txtValue will not be', txt, this.txtValue);
  this.txtValue.value = (txt || "").value || ""; // <- change here
}

Of course, that's largely unreadable (how does .value || '' group? do you know at a glance?), so we'd probably cache it:

var TrSet = function(valid,stat,txt,dd){
  var realTxt = txt || ""
  this.txtValue = realTxt;
  this.txtValue.value = realTxt.value || "";
}

Now, that works, but is less than ideal. ES6 added the ability to provide a default directly in the parameter list, which is much cleaner:

var TrSet = function(valid = "", stat = "", txt = "", dd = "") {
  this.txtValue = txt;
  this.txtValue.value = txt.value || "";
}

To directly address the two brief questions you added:

var TrSet = function(txt) {
  this.txtValue = txt || "";
  this.txtValue.value = txt.value || "";
}

If txt is null set it equal to "", if txt.value is null set it equal to "". how does this fail?

Because txt || "" does not assign to txt, it simply returns txt or "" and that return value is assigned to this.txtValue.

var TrSet = function(stat) {
  this.statusDropDown = stat || "";

if (this.statusDropDown.hasOwnProperty("value")) { }

If stat is null set statusDropDown equal to "". Then I check if if it hasOwnProperty. Why does this fail?

Probably because this is not bound, so it doesn't actually have a value for statusDropDown. In JavaScript, this can change depending on how a function is called. Check out this question for more details.