String manipulation types (Uppercase, Lowercase) in Typescript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

What is the output of this TypeScript code?

Consider this code snippet that changes the case of a string:

const greeting = "Hello World";
const result = greeting.toUpperCase();
console.log(result);

What will be printed to the console?

Typescript

const greeting = "Hello World";
const result = greeting.toUpperCase();
console.log(result);

A "HELLO WORLD"

B "hello world"

C "Hello World"

D "HeLLo WoRLD"

💡 Hint

Think about what toUpperCase() does to each letter.

The toUpperCase() method converts all letters in the string to uppercase. So "Hello World" becomes "HELLO WORLD".

❓ Predict Output

intermediate

What is the output of this TypeScript code?

Look at this code that changes string case:

const text = "TypeScript";
const lower = text.toLowerCase();
console.log(lower);

What will be printed to the console?

Typescript

const text = "TypeScript";
const lower = text.toLowerCase();
console.log(lower);

A "TYPESCRIPT"

B "typescript"

C "TypeScript"

D "TyPeScRiPt"

💡 Hint

Remember what toLowerCase() does.

The toLowerCase() method converts all letters in the string to lowercase. So "TypeScript" becomes "typescript".

❓ Predict Output

advanced

What is the output of this TypeScript code with mixed case methods?

Check this code that uses both uppercase and lowercase methods:

const phrase = "JavaScript Rocks!";
const part1 = phrase.substring(0, 10).toLowerCase();
const part2 = phrase.substring(10).toUpperCase();
console.log(part1 + part2);

What will be printed to the console?

Typescript

const phrase = "JavaScript Rocks!";
const part1 = phrase.substring(0, 10).toLowerCase();
const part2 = phrase.substring(10).toUpperCase();
console.log(part1 + part2);

A "javascript ROCKS!"

B "JAVASCRIPT rocks!"

C "javascript rocks!"

D "JavaScript ROCKS!"

💡 Hint

Look carefully at how substring and case methods combine.

The first 10 characters "JavaScript" become lowercase "javascript". The substring from index 10 is " Rocks!" which becomes uppercase " ROCKS!". Concatenated, it prints "javascript ROCKS!".

❓ Predict Output

advanced

What is the output of this TypeScript code using chaining?

Observe this code that chains string methods:

const input = "  Mixed CASE String  ";
const output = input.trim().toLowerCase().replace(/ /g, "_");
console.log(output);

What will be printed to the console?

Typescript

const input = "  Mixed CASE String  ";
const output = input.trim().toLowerCase().replace(/ /g, "_");
console.log(output);

A "Mixed_CASE_String"

B "MIXED_CASE_STRING"

C "mixed_case_string"

D "mixed CASE String"

💡 Hint

Think about what each method does step by step.

trim() removes spaces at start and end, toLowerCase() makes all letters lowercase, and replace(/ /g, "_") replaces all spaces with underscores. Result is "mixed_case_string".

🧠 Conceptual

expert

Which option will cause a runtime error in TypeScript when manipulating string cases?

Consider these four code snippets. Only one will cause a runtime error when run. Which one is it?

A

const s: string = "hello";
console.log(s.toLowerCase());

B

const s: string | undefined = undefined;
console.log(s?.toLowerCase());

C

const s: string | null = null;
console.log(s?.toUpperCase());

D

const s: any = 123;
console.log(s.toUpperCase());

💡 Hint

Think about what happens if you call a string method on a non-string value.

Option D assigns a number to s and calls toUpperCase() on it. Numbers do not have this method, so it causes a runtime error. Other options safely handle null, undefined, or valid strings.

Practice

1. Which TypeScript string method converts all characters in a string to uppercase?

easy

A. convertCase()

B. toLowerCase()

C. toTitleCase()

D. toUpperCase()

Solution

1. Step 1: Understand string case methods

   TypeScript strings have built-in methods to change letter cases, including toUpperCase() and toLowerCase().

2. Step 2: Identify method for uppercase

   The method toUpperCase() changes all letters to uppercase, while toLowerCase() changes to lowercase.

3. Final Answer:

   toUpperCase() -> Option D

4. Quick Check:

   Uppercase method = toUpperCase() [OK]

Hint: Uppercase method always has 'Upper' in its name [OK]

Common Mistakes:

• Confusing toUpperCase() with toLowerCase()
• Thinking toTitleCase() exists in TypeScript
• Assuming convertCase() is a valid method

2. Which of the following is the correct syntax to convert a string variable name to lowercase in TypeScript?

easy

A. name.toLowerCase()

B. toLowerCase(name)

C. name.lowercase()

D. lowerCase(name)

Solution

1. Step 1: Recall method call syntax on strings

   In TypeScript, string methods are called on the string variable using dot notation.

2. Step 2: Identify correct method name and usage

   The method to convert to lowercase is toLowerCase(), called as name.toLowerCase(). Other options are invalid syntax or incorrect method names.

3. Final Answer:

   name.toLowerCase() -> Option A

4. Quick Check:

   Lowercase method called on variable = name.toLowerCase() [OK]

Hint: String methods use dot notation like variable.method() [OK]

Common Mistakes:

• Using function style like toLowerCase(name)
• Using incorrect method names like lowercase()
• Missing parentheses after method name

3. What will be the output of the following TypeScript code?

const text = "Hello World";
console.log(text.toUpperCase());

medium

A. "hello world"

B. SyntaxError

C. "HELLO WORLD"

D. "Hello World"

Solution

1. Step 1: Understand the input string and method

   The string is "Hello World" and the method toUpperCase() converts all letters to uppercase.

2. Step 2: Apply toUpperCase() to the string

   Applying toUpperCase() changes "Hello World" to "HELLO WORLD".

3. Final Answer:

   "HELLO WORLD" -> Option C

4. Quick Check:

   toUpperCase() output = "HELLO WORLD" [OK]

Hint: toUpperCase() makes all letters big exactly [OK]

Common Mistakes:

• Expecting lowercase output instead
• Thinking original string is unchanged in output
• Confusing method name causing syntax error

4. Identify the error in this TypeScript code snippet:

let greeting = "Hi There";
console.log(greeting.toLowercase());

medium

A. Missing semicolon after string declaration

B. toLowercase() is not a valid method; correct is toLowerCase()

C. Variable greeting should be const, not let

D. Console.log should be console.Log

Solution

1. Step 1: Check method name spelling

   The method to convert string to lowercase is toLowerCase() with capital 'C'. The code uses toLowercase() with lowercase 'c', which is invalid.

2. Step 2: Verify other syntax elements

   Semicolon is optional in TypeScript, let is valid for variable, and console.log is case-sensitive and correct as written.

3. Final Answer:

   toLowercase() is not a valid method; correct is toLowerCase() -> Option B

4. Quick Check:

   Method name case matters: toLowerCase() correct [OK]

Hint: Method names are case-sensitive; watch capital letters [OK]

Common Mistakes:

• Ignoring case sensitivity in method names
• Thinking semicolon is mandatory error
• Confusing console.log capitalization

5. You have an array of strings: const fruits = ["Apple", "BANANA", "Cherry"];
How do you create a new array where all fruit names are lowercase using TypeScript?

hard

A. fruits.map(fruit => fruit.toLowerCase())

B. fruits.toLowerCase()

C. fruits.forEach(fruit => fruit.toLowerCase())

D. fruits.map(fruit => toLowerCase(fruit))

Solution

1. Step 1: Understand array transformation

   To change each string in an array, use map() to create a new array with transformed values.

2. Step 2: Apply toLowerCase() inside map callback

   Inside map, call fruit.toLowerCase() to convert each string to lowercase. This returns a new array with all lowercase fruits.

3. Final Answer:

   fruits.map(fruit => fruit.toLowerCase()) -> Option A

4. Quick Check:

   Use map() with toLowerCase() for array lowercase [OK]

Hint: Use map() with toLowerCase() to transform arrays [OK]

Common Mistakes:

• Calling toLowerCase() directly on array
• Using forEach which returns void, not new array
• Trying to call toLowerCase() as a standalone function