javascripthtmltypeoftemplate-strings

What is the difference between these two functions involving typeof


My teacher in JavaScript gave me an assignment to master functions. I tried to solve the assignment which requires me to make the output like the second code:

function showDetails(name = "unknown", age = "unknown", booleanez = "unknown") {
  let name22ez,num22ez,bool22ez;

  typeof booleanez === 'boolean'
    ? (bool22ez = booleanez)
    : typeof booleanez === "number"
    ? (bool22ez = age)
    : (bool22ez = name);

  typeof name === "string"
    ? (name22ez = name)
    : typeof name === "number"
    ? (name22ez = age)
    : (name22ez = booleanez);

  typeof age === "number"
    ? (num22ez = age)
    : typeof age === "string"
    ? (num22ez = name)
    : (num22ez = booleanez);
  return `Hello ${name22ez}, Your Age Is ${num22ez}, You ${
    bool22ez === true ? bool22ez =`Are` : bool22ez = `Are Not`
  } Available For Hire`;
}

document.write(showDetails("Osama", 38, true));
document.write(`<hr>`);
document.write(showDetails(38, "Osama", true));
document.write(`<hr>`);
document.write(showDetails(true, 38, "Osama"));
document.write(`<hr>`);
document.write(showDetails(false, "Osama", 38));

The Output Was:

Hello Osama, Your Age Is 38, You Are Available For Hire
Hello Osama, Your Age Is 38, You Are Available For Hire
Hello Osama, Your Age Is 38, You Are Available For Hire
Hello 38, Your Age Is false, You Are Available For Hire 

I tried so many times, for like 4 hours, to fix it, but I didn't so, I took the answer from another student and his answer was this:

function checkStatus(a, b, c) {
    let str, num, bool;
    typeof a === "string"
        ? (str = a)
        : typeof b === "string"
        ? (str = b)
        : (str = c);
    typeof a === "number"
        ? (num = a)
        : typeof b === "number"
        ? (num = b)
        : (num = c);
    typeof a === "boolean"
        ? (bool = a)
        : typeof b === "boolean"
        ? (bool = b)
        : (bool = c);
    return `Hello ${str}, Your Age Is ${num}, You ${
        bool ? "Are" : "Are Not"
    } Available For Hire`;
}

document.write(checkStatus("Osama", 38, true));
document.write(checkStatus(38, "Osama", true));
document.write(checkStatus(true, 38, "Osama"));
document.write(checkStatus(false, "Osama", 38));

The output was correct:

Hello Osama, Your Age Is 38, You Are Available For Hire 
Hello Osama, Your Age Is 38, You Are Available For Hire 
Hello Osama, Your Age Is 38, You Are Available For Hire 
Hello Osama, Your Age Is 38, You Are Not Available For Hire

What's the difference between mine and my fellow's code?


Solution

  • The original code checks the type of each parameter. The parameter whose type is string is used as the name, the parameter whose type is number is used as the age, and the parameter whose type is boolean is used as the availability for hire.

    Your conditional logic is totally mystifying to me. The first test in each ternary is correct -- if booleanez is boolean then it should be used for bool22ez. But the rest make no sense. If booleanez is a number, why does that mean that the age parameter should be assigned to bool2ez?

    You need to use the same logic as the original, testing each parameter for a particular type, then using that as the value to assign to the variable that requires that type.

      typeof booleanez === 'boolean'
        ? (bool22ez = booleanez)
        : typeof age === "boolean"
        ? (bool22ez = age)
        : (bool22ez = name);
    

    And since you're assigning the same variable, you should use the ternary just in the value part of the assignment rather than repeating the variable to assign to.

    bool22ez = 
        typeof booleanez === 'boolean'
            ? booleanez
            : typeof age === "boolean"
            ? age
            : name;