Avoid recurring 'if' verification to check if an object has property-CodePudding

I do know how to check if a property exists (hasOwnProperty, in, !== undefined, etc).

But I don't know how to avoid to perform an action on this property if it doesn't exist.

Is there a solution to avoid the if (property && action in my case) verification each time ?

Similar question : Javascript - how to avoid multiple if condition checks when checking if object has a property? Not really relevant in my case

const myFunction1 = myFunction2 = () => {};
const generateElement = (p) => {
  let div = document.createElement(p.tag);
  p.classes && (div.className = p.classes);
  p.style && (div.style.cssText = p.style);
  p.content && (div.innerHTML = p.content);
  p.appendIn && p.appendIn.appendChild(div);
  p.attribs && Object.entries(p.attribs).forEach((y) => {
    div.setAttribute(y[0], y[1]);
  });
  p.events && Object.entries(p.events).forEach((y) => {
    div.addEventListener(y[0], y[1], false);
  });
  return div
}

var newElem = generateElement({
  tag: 'div',
  classes: 'mydiv',
  id: 'id42',
  content: 'Hello world!',
  style: 'background:#ccc',
  attribs: {
    'tabindex': 0,
    'title': 'Title #1'
  },
  events: {
    'click': myFunction1,
    'mouseout': myFunction2
  },
  appendIn: document.body
});

CodePudding user response：

If you have the right JS version you could set defaults and use the null coalescing opperator https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator

div.className = p.classes ?? '';

CodePudding user response：

You might consider using Object.keys similarly to how you've used Object.entries and create an addProp function to deal with each kind of property and value using switch, that way you only deal with properties that exist in the p object and can ignore unknown properties too, e.g.

const generateElement = (p) => {

  if (!p.tag) return;

  let node = document.createElement(p.tag);
  if (!node) return;

  let props = Object.keys(p);
  props.forEach(prop => addProp(node, prop, p[prop]));
}

function addProp(el, prop, value) {
  switch (prop) {
    case 'appendIn':
      value.appendChild(el);
      break;
    case 'attribs':
      Object.entries(value).forEach(([p, v]) => el.setAttribute(p, v));
      break;
    case 'classes':
      el.className = value;
      break;
    case 'content':
      el.innerHTML = value;
      break;
    case 'events':
      Object.entries(value).forEach(([p, v]) => el.addEventListener(p, v, false));
      break;
    case 'id' :
      el.id = value;
      break;
    case 'style':
      el.style.cssText = value;
      break;
    case 'tag' : // Already done
      break;
    default :
      console.log(`Unexpected property: ${prop}`);
  }
  return el;
}

var newElem = generateElement({
  tag: 'div',
  classes: 'mydiv',
  id: 'id42',
  content: 'Hello world!',
  style: 'background:#ccc;color:red',
  attribs: {
    'tabindex': 0,
    'title': 'Title #1'
  },
  events: {
    'click': () => console.log('click'),
    'mouseout': () => console.log('mouseout')
  },
  appendIn: document.body,
  foo: 'bar'
});

You could do a similar thing with Object.entries using either forEach or for..of:

let node = document.createElement(p.tag);
for (let [prop, value] of Object.entries(p)) {
   addProp(node, prop, value);
}

whatever.