Truthiness narrowing in Typescript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of truthiness narrowing with && operator

What is the output of the following TypeScript code?

Typescript

function checkValue(val: string | null) {
  if (val && val.length > 3) {
    return val.toUpperCase();
  }
  return "Too short or null";
}

console.log(checkValue("test"));
console.log(checkValue("no"));
console.log(checkValue(null));

A "TEST"\n"Too short or null"\n"Too short or null"

B "TEST"\n"Too short or null"\n"null"

C "TEST"\n"no"\n"Too short or null"

D "test"\n"no"\n"null"

💡 Hint

Remember that && checks if the first value is truthy before evaluating the second.

The && operator narrows val to a non-null string if val is truthy. Then val.length > 3 is checked. Only "test" passes, so it returns uppercase. Others return the fallback string.

❓ Predict Output

intermediate

Output of truthiness narrowing with if statement

What will be printed by this TypeScript code?

Typescript

function printLength(str?: string | null) {
  if (str) {
    console.log(str.length);
  } else {
    console.log("No string");
  }
}

printLength("");
printLength("hello");
printLength(null);

A 0\nNo string\nNo string

B No string\n5\nNo string

C 0\n5\nNo string

D No string\nNo string\nNo string

💡 Hint

Empty string is falsy in JavaScript/TypeScript.

The if condition checks truthiness. Empty string is falsy, so else branch runs for printLength(""). "hello" is truthy, so length 5 is printed. null is falsy, so else branch runs.

🔧 Debug

advanced

Identify the error in truthiness narrowing

What error will this TypeScript code produce when compiled or run?

Typescript

function getFirstChar(s: string | null) {
  if (s === null || s.length === 0) {
    return "Empty";
  }
  return s[0];
}

console.log(getFirstChar(null));

A Returns 'Empty' without error

B Type error: s might be null when accessing s[0]

C Syntax error: missing colon

D Runtime error: Cannot read property 'length' of null

💡 Hint

Logical OR (||) short-circuits: if the left side is truthy, the right side is not evaluated.

No error occurs. When s is null, `s === null` is true, so the `||` short-circuits and does not evaluate `s.length === 0`. The function returns "Empty" and prints it without runtime or compile errors.

📝 Syntax

advanced

Which option correctly narrows a union type using truthiness?

Which of the following TypeScript snippets correctly narrows the variable 'input' of type string | undefined using truthiness?

A if (input !== undefined && input.length > 0) { console.log(input); }

B if (input.length > 0) { console.log(input); }

C if (input && input.length > 0) { console.log(input); }

D if (input != null || input.length > 0) { console.log(input); }

💡 Hint

Check which condition safely narrows input to a string before accessing length.

Option C uses truthiness check 'input' which narrows input to string (not undefined). Then length is safely accessed. Option C is valid but more verbose. Option C causes error if input is undefined. Option C uses || which does not narrow correctly.

🚀 Application

expert

Determine the output count of filtered array using truthiness narrowing

Given this TypeScript code, how many elements will be in the filtered array?

Typescript

const values: (string | null | undefined)[] = ["apple", "", null, "banana", undefined, " "];
const filtered = values.filter(v => v && v.trim().length > 0);
console.log(filtered.length);

A 3

B 5

C 4

D 2

💡 Hint

Remember that empty string and strings with only spaces behave differently with trim().

The filter keeps elements where `v` is truthy AND `v.trim().length > 0`: - "apple": truthy, trim length 5 > 0 → keep - "": falsy → discard - null: falsy → discard - "banana": truthy, trim length 6 > 0 → keep - undefined: falsy → discard - " ": truthy, trim() = "", length 0 ≯ 0 → discard Thus, only 2 elements: ["apple", "banana"].