Undefined, why?

Write the template engine:
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;


 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


// TypeError: html is undefined
// Refers to this line: let propsLength = Array.from(html.matchAll(pattern)).length;

Why is it so? I did the test on the Element, then the object must be that the html property
April 19th 20 at 12:16
1 answer
April 19th 20 at 12:18
I did the test on the Element, then the object must be that the html property

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

Well, value can be and is "instanceof Element", but then you call the getHTML function, passing as parameter the string. And no html properties, it, of course not.
PS: Assigning values in an if should not be:
if (method = "insert"){
- darrion_Luettg commented on April 19th 20 at 12:21
@darrion_Luettgmistaken. And how can you pass an object and not a string? window[key] is not working. Only comes out to use eval? - Colby_Goyet commented on April 19th 20 at 12:24

Find more questions by tags JavaScript