String type behavior in Typescript - Step-by-Step Execution

Concept Flow - String type behavior

Declare string variable

↓

Assign string value

↓

Use string methods or operations

↓

Get new string or output

↓

Strings are immutable, original unchanged

This flow shows how a string variable is declared, assigned, used with methods, and how strings remain unchanged because they are immutable.

Execution Sample

Typescript

let greeting: string = "Hello";
let shout = greeting.toUpperCase();
console.log(shout);
console.log(greeting);

This code converts a string to uppercase and shows that the original string stays the same.

Execution Table

Step	Action	Variable	Value	Output
1	Declare greeting	greeting	"Hello"
2	Call toUpperCase()	shout	"HELLO"
3	Print shout	shout	"HELLO"	HELLO
4	Print greeting	greeting	"Hello"	Hello
5	End			Execution complete

💡 All steps executed; strings are immutable so greeting remains "Hello"

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	After Step 4	Final
greeting	undefined	"Hello"	"Hello"	"Hello"	"Hello"	"Hello"
shout	undefined	undefined	"HELLO"	"HELLO"	"HELLO"	"HELLO"

Key Moments - 2 Insights

Why does greeting stay "Hello" after calling toUpperCase()?

Because strings are immutable in TypeScript, toUpperCase() returns a new string without changing the original greeting variable, as shown in steps 2 and 4 of the execution_table.

What does toUpperCase() do exactly?

It creates and returns a new string with all letters in uppercase, without modifying the original string variable, demonstrated by the new value assigned to shout in step 2.

Visual Quiz - 3 Questions

Look at the execution_table, what is the value of greeting after step 3?

A undefined

B "Hello"

C "HELLO"

D "hello"

💡 Hint

Check the 'Variable' and 'Value' columns for greeting at step 3 in the execution_table.

At which step is the new uppercase string stored in shout?

A Step 3

B Step 1

C Step 2

D Step 4

💡 Hint

Look at the 'Action' and 'Variable' columns in the execution_table to see when shout gets its value.

If we changed greeting to "hello" (all lowercase), what would shout be after step 2?

A "HELLO"

B "hello"

C "Hello"

D undefined

💡 Hint

toUpperCase() converts all letters to uppercase regardless of original casing, see step 2 behavior.

Concept Snapshot

String type behavior in TypeScript:
- Strings are immutable (cannot change once created).
- Methods like toUpperCase() return new strings.
- Original string variables stay unchanged.
- Use string methods to get new transformed strings.
- Always assign method results to new variables or overwrite.

Full Transcript

This example shows how string variables behave in TypeScript. We declare a string variable greeting with value "Hello". When we call greeting.toUpperCase(), it returns a new string "HELLO" which we store in shout. Printing shout shows "HELLO". Printing greeting still shows "Hello" because strings are immutable and the original string does not change. This teaches that string methods return new strings and do not modify the original variable.