String concatenation for “undefined” variable with space in Javascript

Question

I am trying to display a name and I am finding it difficult to concatenate undefined strings.

I want to display displayName if it's present or concatenate firstName and lastName and display it or go to defaultName if it's not present.

If my variables are present

let displayName = "John Doe";
let firstName = "Super";
let lastName = "Man";
let defaultName = "NIL";

console.log(displayName || firstName + " " + lastName || defaultName);

Output: John Doe 

If variables are undefined

  let displayName = undefined; let firstName = undefined; let lastName = undefined; let defaultName = "NIL"; console.log(displayName || firstName + " " + lastName || defaultName); 

Output: undefined undefined

It works when there is no whitespace as it treats it like an arithmetic operator but the output will be SuperMan due to lack of whitespace .

How do I solve it?

Answer 1

This assumes that only if firstName and lastName both have values, you want the second option to display otherwise show the defaultName

 let displayName = undefined; let firstName = undefined; let lastName = undefined; let defaultName = "NIL"; console.log(displayName ? displayName : firstName && lastName ? `${firstName} ${lastName}` : defaultName); 

Your firstName + " " + lastName as coded is always going to return a value which in JavaScript will have it evaluate to true which is the cause for what you are currently seeing.

Answer 2

Queue jokes about 'foo' + + 'foo'.

A || B in javascript really means "If A is truthy, pass A. Otherwise, pass B". And types are out the window, Javascript will attempt to concatenate to a fault. Final wrench in the system is weird order of operation.

displayName || firstName   +  " "  + lastName  || defaultName
(displayName || firstName) + ((" " + lastName) || defaultName)
(        undefined       ) + (" undefined"     || defaultName)
         undefined         + " undefined"
"undefined undefined"

If you want to do this right, you have a bunch of good alternative options. I'd say something like

function forceGoodString(input) {
    if (typeof input === "string" && input.length) {
        return input;
    }   else    {
        return "";
    }
}

...I'm not actually sure what you expect with three undefined variables, " NIL" or just "NIL"? In any event, you need a few more lines. Nothing wrong with readability, not everything has to be fancy fancy ${garbage} and ternary one liners.

if (displayName) {
    console.log(displayName);
}   else if (firstName && lastName) {
    console.log(firstName + " " + lastName);
}   else    {
    console.log(defaultName);
}

And if you ever get sick of the loose types in JS, you could always learn go!

Answer 3

... respect operator precedence and take advantage of type casting as well as of truthy and falsy values ...

 let displayName; let firstName; let lastName; let defaultName = 'NIL'; console.log( displayName || ((firstName || '') + ' ' + (lastName || '')).trim() || defaultName ); displayName = ''; firstName = 'John'; console.log( displayName || ((firstName || '') + ' ' + (lastName || '')).trim() || defaultName ); displayName = ''; firstName = ''; lastName = 'Doe'; console.log( displayName || ((firstName || '') + ' ' + (lastName || '')).trim() || defaultName ); displayName = ''; firstName = 'John'; console.log( displayName || ((firstName || '') + ' ' + (lastName || '')).trim() || defaultName ); displayName = ''; firstName = ''; lastName = ''; console.log( displayName || ((firstName || '') + ' ' + (lastName || '')).trim() || defaultName ); 

 .as-console-wrapper { max-height: 100%!important; top: 0; }