Arrow Function on an Object

Hi I have a code like this in which im doing the same control for each fields of an object:

if(ObjectJs != null){
    if(ObjectJs.customerName != "" && ObjectJs.customerName != undefined)
    {
      addressHTML += ObjectJs.customerName;
    }
    addressHTML += '<br/>';
    (ObjectJs != null && ObjectJs.fullAddress != "" && ObjectJs.fullAddress != undefined)? 
        (addressHTML += '<span>'+ ObjectJs.fullAddress +'</span><br/>') :
    blankLineInHeaderCount++; 
    (ObjectJs != null && ObjectJs.town != "" && ObjectJs.town != undefined)? 
        (addressHTML += '<span>'+ ObjectJs.town +'</span><br/>') :
    blankLineInHeaderCount++;
    (ObjectJs != null && ObjectJs.county != "" && ObjectJs.county != undefined)? 
        (addressHTML += '<span>'+ ObjectJs.county +'</span><br/>') :
    blankLineInHeaderCount++;
    (ObjectJs != null && ObjectJs.country != "" && ObjectJs.country != undefined)? 
        (addressHTML += '<span>'+ ObjectJs.country +'</span><br/>') :
    blankLineInHeaderCount++;
    (ObjectJs != null && ObjectJs.postCode != "" && ObjectJs.postCode != undefined)? 
        (addressHTML += '<span>'+ ObjectJs.postCode +'</span><br/>') :
    blankLineInHeaderCount++;
    addressHTML += '<br/><br/>';
}

Is possible to optimaze this with an arrow function to do it in few code lines. Im very bad in this and im not able to find a solution to this.

thanks,
Carlo

Hi,

There are a few things that could be optimized there.

Just to make life easier, could you post a sample of what ObjectJs looks like and what the expected output should be.

Okay so one solution is to use a template string.

const formatAddress = function (address) {

  // if address is null, just exit here
  if (address === null) return ''

  // A template string makes things a bit clearer.
  return `
    <address>
        Customer: ${(address.customer) ? `${address.customer}` : ''}<br>
        Street: ${(address.street) ? `${address.street}` : ''}<br>
        Town: ${(address.town) ? `${address.town}` : ''}<br>
        County: ${(address.county) ? `${address.county}` : ''}<br>
        Country: ${(address.country) ? `${address.country}` : ''}<br>
        PostCode: ${(address.postCode) ? `${address.postCode}` : ''}<br>
    </address>
    `
}

Here is a codepen to demonstrate

Edit: added the name and address titles.

2 Likes

Hi James,
My object is:

let addressHTML = ‘’;
let address = {customerName:“customerName”,
addressLine1:“addressLine1”,
addressLine2:“addressLine2”,
town:“town”,
county:“county”,
country:“country”,
postCode:“postCode”}

and if one fields is not empty i want to add in to a a string as:
addressHTML += '<span>'+ ObjectJs.field +'</span><br/>'

I whish to do this in a very short function, the only things i found is as to iterate the fields:
for (const property in ObjectJs) {
alert(${property}: ${ObjectJs[property]});
}

I guess to add this in an arrow fucntion to do every thing in a couple of lines code

Thanks,
Carlo.

The problem with that is you can’t rely on the order of the object properties coming out the way you want.

Yeah or maybe (if the address object properties are guaranteed to be in order):

function formatAddress (address) {
  return address === null ? '' : `
    <address>
      ${Object.values(address).filter(Boolean).join('<br>')}
    </address>
  `
}

Edit: Boing, x-post. :-)

Starting with ES2015 (I think) objects are generally ordered though, it just depends on how the object is getting created / populated.

1 Like

ahhh good point

I’m sure a curve-ball was thrown at me with that assumption recently. Struggling to remember the details though.

Okay just did some digging and here’s the object property order definition… just for our records. :-P

When the [[OwnPropertyKeys]] internal method of O is called the following steps are taken:

  1. Let keys be a new empty List.
  2. For each own property key P of O that is an integer index, in ascending numeric index order
    a. Add P as the last element of keys .
  3. For each own property key P of O that is a String but is not an integer index, in property creation order
    a. Add P as the last element of keys .
  4. For each own property key P of O that is a Symbol, in property creation order
    a. Add P as the last element of keys .
  5. Return keys .

https://262.ecma-international.org/6.0/#sec-ordinary-object-internal-methods-and-internal-slots-ownpropertykeys

2 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.