String manipulation types (Uppercase, Lowercase) in Typescript - Step-by-Step Execution

Concept Flow - String manipulation types (Uppercase, Lowercase)

Start with a string

↓

Choose operation

↓

Convert to Uppercase

↓

Output transformed string

↓

End

This flow shows starting with a string, choosing to convert it to uppercase or lowercase, then outputting the result.

Execution Sample

Typescript

let text = "Hello World";
let upper = text.toUpperCase();
let lower = text.toLowerCase();
console.log(upper);
console.log(lower);

This code converts a string to uppercase and lowercase, then prints both.

Execution Table

Step	Variable	Operation	Value Before	Value After	Output
1	text	Initialize	undefined	"Hello World"
2	upper	toUpperCase()	"Hello World"	"HELLO WORLD"
3	lower	toLowerCase()	"Hello World"	"hello world"
4	console.log(upper)	Print	"HELLO WORLD"	"HELLO WORLD"	HELLO WORLD
5	console.log(lower)	Print	"hello world"	"hello world"	hello world

💡 All operations done, program ends.

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	Final
text	undefined	"Hello World"	"Hello World"	"Hello World"	"Hello World"
upper	undefined	undefined	"HELLO WORLD"	"HELLO WORLD"	"HELLO WORLD"
lower	undefined	undefined	undefined	"hello world"	"hello world"

Key Moments - 2 Insights

Why does the original string 'text' not change after calling toUpperCase() or toLowerCase()?

Because strings are immutable in TypeScript, methods like toUpperCase() return a new string without changing the original. See execution_table steps 2 and 3 where 'text' stays the same.

What happens if you call toUpperCase() on an already uppercase string?

The string stays the same because converting uppercase letters to uppercase again has no effect. This is shown in step 2 where 'HELLO WORLD' is the result.

Visual Quiz - 3 Questions

Look at the execution table, what is the value of 'upper' after step 2?

A "hello world"

B "HELLO WORLD"

C "Hello World"

D undefined

💡 Hint

Check the 'Value After' column for 'upper' at step 2 in the execution_table.

At which step is the lowercase version of the string created?

A Step 3

B Step 2

C Step 1

D Step 4

💡 Hint

Look for the step where 'lower' variable is assigned in the execution_table.

If we changed the original string to "TypeScript", what would 'lower' be after step 3?

A "TYPESCRIPT"

B "TypeScript"

C "typescript"

D "typesCript"

💡 Hint

toLowerCase() converts all letters to lowercase, see variable_tracker for 'lower'.

Concept Snapshot

String manipulation in TypeScript:
- Use str.toUpperCase() to get uppercase version
- Use str.toLowerCase() to get lowercase version
- Original string stays unchanged (immutable)
- Both methods return new strings
- Useful for case-insensitive comparisons or formatting

Full Transcript

This visual execution shows how to convert strings to uppercase and lowercase in TypeScript. We start with a string variable 'text' holding "Hello World". Then we create 'upper' by calling text.toUpperCase(), which returns "HELLO WORLD" without changing 'text'. Next, we create 'lower' by calling text.toLowerCase(), which returns "hello world". Finally, we print both 'upper' and 'lower'. The key point is that the original string does not change because strings are immutable. This helps beginners understand how string methods work step-by-step.