Is it possible to initialize methods and properties in object initialization?

Question

For example to minimize code like:

return (()=> {
        let c = document.createElement("col");
        c.appendChild((()=>{
            let p = document.createElement("p");
            p.innerText = "Hello";
            return p;
        })());
        c.appendChild((()=>{
            let p = document.createElement("p");
            p.innerText = "World";
            return p;
        })());
        return c;
    })();

or:

let col = document.createElement("col");
let title0 = document.createElement("p");
title0.innerText = "Hello";
let title1 = document.createElement("p");
title1.innerText = "World";
col.appendChild(title0);
col.appendChild(title1);
return col;

into something along the lines of:

return document.createElement("col", {
    appendChild(document.createElement("p", {
        innerText = "Hello"
    })),
    appendChild(document.createElement("p", {
        innerText = "World"
    }))
});

I know field initializers exist (Which is what I based my pseudocode on), but is it possible to do something similar with methods and properties?

Why not just use TSX/JSX? (You don't need to use it with React, you can supply your own factory function that tsc will call for you) — Dai
– Dai, Commented Aug 11, 2022 at 3:36

CertainPerformance · Accepted Answer · 2022-08-11 04:25:20Z

1

Just construct and return an HTML string.

return `
  <col>
    <p>Hello</p>
    <p>World</p>
  </col>
`;

And then use insertAdjacentHTML to put it into the DOM.

If you absolutely need an element, not a string, then you can explicitly create only one (the container), and set its .innerHTML.

const col = document.createElement('col');
col.innerHTML = `
  <p>Hello</p>
  <p>World</p>
`;
return col;

Or (as I'd prefer), use a framework like React.

const MyCol = () => (
  <col>
    <p>Hello</p>
    <p>World</p>
  </col>
);

answered Aug 11, 2022 at 4:25

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Lodea · Accepted Answer · 2022-08-13 21:59:29Z

0

I managed to find an answer eventually:

export const Elem = <K extends keyof HTMLElementTagNameMap>(tagName: K, properties: Partial<HTMLElementTagNameMap[K]>, children: Node[]) => {
    const element = document.createElement(tagName);
    Object.assign(element, properties);
    for (const child of children) {
        element.appendChild(child);
    }
    return element;
}

Example usage:

Elem("div", {}, [
    Elem("p", {
        innerText: "Hello"
    }, []),
    Elem("p", {
        innerText: "world"
    }, [])
]);

No need for HTML or React.

answered Aug 13, 2022 at 21:59

Lodea

1893 silver badges16 bronze badges

Collectives™ on Stack Overflow

Is it possible to initialize methods and properties in object initialization?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related