Undefined, what is the reason?

Question

JavaScript

I am writing a template:

class Element {
  constructor(html, props, url = document.body){
    this.html = html;
    this.props = props;
    this.url = url;
  }
  view(method = "insert"){
    let html = getHtml(this);

    if(method == "insert"){
      this.url.innerHTML = html;
    }
  }
}

function getHtml(element){
  let html = element.html;
  
  while(html.match("{{(.*?)}}")){

    let pattern = new RegExp("{{(.*?)}}");
    let key = Array.from(html.match(pattern))[1];
    let value = element.props[key]; 

    if(value instanceof Element){
      value = getHtml(key);
    }

    pattern = new RegExp(`{{${key}}}`);
    html = html.replace(pattern, value);

  }

  return html;
}



const firstElement = new Element(`
  First Element
  `);


const secondElement = new Element(`
  {{firstElement}}
  `, {
    firstElement: firstElement
  });

secondElement.view();

// TypeError: html is undefined
// Ссылается на эту строку: let propsLength = Array.from(html.matchAll(pattern)).length;

Why is it so? I did a check on Element, which means that the object must definitely have this html property

Answer 1

I did a check on Element, which means that the object must definitely have this html property

if (value instanceof Element) {
    value = getHtml(key);
}

Well, value might be "instanceof Element", but then you call the getHTML function, passing in a string as a parameter. And, of course, it does not have any html property.