Discussion on: How would you refactor this JS function?

[Calin Baenen]

Rerefactor based on Keff's answer.

const lineChecker = (ln="", isLn1=false) => {
    ln = ln ?? ""; isLn1 = isLn1 ?? false;

    const empty = ln.length == 0;
    if(empty) return "<br/>";
    return isLn1 ? `<h1>${ln}</h1>` : `<p>${ln}</p>`;
};

Theoretically, this is the most optimized you can get.
BUT, if we use TypeScript, and go the mathematical route of only using one letter per var-name, we get this:

const c:Function = (l:string="", f:boolean=false) => {
    const e:boolean = ln.length == 0;
    if(e) return "<br/>";
    return f ? `<h1>${l}</h1>` : `<p>${l}</p>`;
};

Assuming people use the correct types in JS, as if we we're in a strongly typed language, we get the final result of:

const c = (l="", f=false) => {
    const e = l.length == 0;
    if(e) return "<br/>";
    return f ? `<h1>${l}</h1>` : `<p>${l}</p>`;
};

But, we can make e a one-time expression:

const c = (l="", f=false) => {
    if(l.length == 0) return "<br/>";
    return f ? `<h1>${l}</h1>` : `<p>${l}</p>`;
};

LOOK! It's a 2-liner! :O

However, (to me) this looks like the end of the road for refactorization, I don't think we can make this any smaller,- and if you can, it's because of a very niche detail.
But I think this is the best optimization from the original function.

[RRKallan]

understandable and readable is very hard in your solution.
Refactor is not to get code smaller.

I prefer === checks instead ==
I prefer !?.length instead l.length == 0

According to w3 guidelines, a space should be included before the trailing / and > of empty elements, for example, <br />. These guidelines are for XHTML documents to render on existing HTML user agents.

edited

[Calin Baenen]

understandable and readable is very hard in your solution.
Refactor is not to get code smaller.

Then I think the people who submitted those one-liners (Which are even harder to understand than my code!) misunderstood the point. :p

[RRKallan]

the one line solutions with nested ternary expressions are also difficult to understand.

[RRKallan]

Goals for refactoring code: readability, understandability, maintainability, performance, usage of latest code style / programming / functions / methods

[Calin Baenen]

According to w3 guidelines, a space should be included before the trailing / and > of empty elements, for example,

I don't think your example works as intended.

Also, why is that? Does the space do something to make the HTML more understandable to some interpreters?

[RRKallan]

edited my comment

According to w3 guidelines, a space should be included before the trailing / and > of empty elements, for example, <br />. These guidelines are for XHTML documents to render on existing HTML user agents.