How Strings Work Differently Across Languages in DSA Typescript - Visual Walkthrough

Concept Flow - How Strings Work Differently Across Languages

Create String Object

↓

Immutable or Mutable?

Immutable→Store characters in fixed memory

↓

Allow in-place changes

↓

Language-specific behaviors

↓

Operations: Concatenate, Slice, Modify

↓

Result depends on language rules

Strings are created as objects that can be immutable or mutable depending on the language, affecting how operations like concatenation or modification work.

Execution Sample

DSA Typescript

let s = "hello";
s = s + " world";
console.log(s);

Concatenate two strings in TypeScript, showing immutability by creating a new string.

Execution Table

Step	Operation	String Value	Memory Behavior	Visual State
1	Create string s = "hello"	"hello"	Allocate fixed memory for "hello"	"hello"
2	Concatenate s + " world"	"hello world"	Create new string in new memory	"hello world"
3	Assign new string to s	"hello world"	s points to new string	"hello world"
4	Print s	"hello world"	Output string	"hello world"
5	End	-	-	-

💡 All operations complete; string s now holds "hello world" as a new immutable string.

Variable Tracker

Variable	Start	After Step 2	After Step 3	Final
s	"hello"	"hello"	"hello world"	"hello world"

Key Moments - 3 Insights

Why does concatenating strings create a new string instead of modifying the original?

Because strings are immutable in TypeScript, concatenation creates a new string in memory rather than changing the original, as shown in execution_table step 2 and 3.

What happens to the original string after concatenation?

The original string remains unchanged in memory; the variable points to the new string, as seen in variable_tracker where s changes from "hello" to "hello world".

Do all languages treat strings as immutable?

No, some languages like C++ allow mutable strings, enabling in-place changes, unlike TypeScript which uses immutable strings as shown in the concept_flow.

Visual Quiz - 3 Questions

Look at the execution_table at step 2, what happens to the string in memory?

A The string is deleted

B The original string is modified in place

C A new string is created in new memory

D Memory is freed for the original string

💡 Hint

Refer to execution_table row with Step 2 under Memory Behavior

At which step does the variable s point to the new concatenated string?

A Step 3

B Step 2

C Step 1

D Step 4

💡 Hint

Check variable_tracker column After Step 3 for s value

If strings were mutable, how would the execution_table change at step 2?

A A new string would still be created

B The original string would be modified in place without creating a new string

C The string would be deleted

D Concatenation would not be possible

💡 Hint

Look at concept_flow where mutable strings allow in-place changes

Concept Snapshot

Strings can be immutable or mutable depending on the language.
In TypeScript, strings are immutable.
Concatenation creates new strings in memory.
Original strings remain unchanged.
Mutable strings allow in-place modification (not in TypeScript).

Full Transcript

This visual execution shows how strings behave differently across languages focusing on TypeScript. We start by creating a string s with value "hello". Since strings are immutable in TypeScript, concatenating " world" creates a new string "hello world" in new memory. The variable s then points to this new string, leaving the original unchanged. This behavior contrasts with mutable strings in other languages where in-place modification is possible. The execution table tracks each step, showing string values and memory behavior. The variable tracker follows s's value changes. Key moments clarify why concatenation creates new strings and how original strings remain intact. The quiz tests understanding of memory changes and variable assignments during concatenation.

Practice

1. In TypeScript, what is the type of a string when you use single quotes like 'hello' compared to double quotes like "hello"?

easy

A. Both are of type string and behave the same

B. Single quotes create a character, double quotes create a string

C. Single quotes create a string, double quotes create a character

D. Single quotes are invalid syntax in TypeScript

Solution

1. Step 1: Understand string literals in TypeScript

   TypeScript treats both single and double quotes as string delimiters, so both create string values.

2. Step 2: Confirm no character type in TypeScript

   Unlike some languages, TypeScript does not have a separate character type; single quotes do not create characters.

3. Final Answer:

   Both are of type string and behave the same -> Option A

4. Quick Check:

   Single and double quotes create strings = A [OK]

Hint: Single and double quotes both create strings in TypeScript [OK]

Common Mistakes:

• Thinking single quotes create characters
• Confusing TypeScript with languages like C
• Assuming single quotes are invalid

2. Which of the following is the correct way to declare a multi-line string in TypeScript?

easy

A. Using double quotes with + operator: const s = "line1" + "line2";

B. Using single quotes with \n: const s = 'line1\nline2';

C. Using backticks: const s = `line1\nline2`;

D. Using triple quotes: const s = '''line1\nline2''';

Solution

1. Step 1: Identify multi-line string syntax in TypeScript

   TypeScript supports template literals using backticks (`) which allow multi-line strings directly.

2. Step 2: Check other options for correctness

   Single and double quotes require explicit \n for new lines; triple quotes are invalid in TypeScript.

3. Final Answer:

   Using backticks: const s = `line1\nline2`; -> Option C

4. Quick Check:

   Backticks allow multi-line strings = A [OK]

Hint: Use backticks for multi-line strings in TypeScript [OK]

Common Mistakes:

• Using triple quotes like Python
• Expecting single or double quotes to support multi-line directly
• Forgetting to escape newlines in single/double quotes

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

const s = `Hello\nWorld`;
console.log(s.length);

medium

A. Error

B. 12

C. 10

D. 11

Solution

1. Step 1: Understand the string content

   The string is a template literal with an actual newline character between Hello and World, not the two-character escape sequence.

2. Step 2: Count characters including the newline

   Characters: H(1) e(2) l(3) l(4) o(5) \n is a single newline character (counts as 1), W(6) o(7) r(8) l(9) d(10). So length is 11.

3. Final Answer:

   11 -> Option D

4. Quick Check:

   Template literals interpret \n as newline character = A [OK]

Hint: Template literals interpret \n as a single newline character [OK]

Common Mistakes:

• Assuming \n is two characters in length
• Counting only visible characters
• Expecting runtime error due to escape

4. Identify the error in this TypeScript code snippet:

const greeting = 'Hello;
console.log(greeting);

medium

A. Missing closing single quote for the string

B. Incorrect use of backticks instead of single quotes

C. Missing semicolon after console.log statement

D. No error, code runs fine

Solution

1. Step 1: Check string syntax

   The string starts with a single quote but does not have a closing single quote before the newline.

2. Step 2: Understand string literal rules

   Single-quoted strings cannot span multiple lines without escape; missing closing quote causes syntax error.

3. Final Answer:

   Missing closing single quote for the string -> Option A

4. Quick Check:

   Unclosed string literal = D [OK]

Hint: Strings must be closed before newline unless using backticks [OK]

Common Mistakes:

• Thinking backticks are required here
• Ignoring missing quote errors
• Assuming semicolon omission causes error

5. Given the following TypeScript code, what will be the output?

const s1 = 'café';
const s2 = 'cafe\u0301';
console.log(s1 === s2);

Note: \u0301 is a Unicode combining acute accent.

hard

A. true

B. false

C. SyntaxError

D. RuntimeError

Solution

1. Step 1: Understand Unicode normalization in strings

   s1 uses a single character 'é' (U+00E9), while s2 uses 'e' plus combining accent (U+0301).

2. Step 2: Compare strings with different Unicode forms

   Direct equality compares code units; different Unicode sequences mean s1 !== s2.

3. Final Answer:

   false -> Option B

4. Quick Check:

   Unicode composed vs decomposed forms differ = C [OK]

Hint: Unicode composed and decomposed strings are not equal by default [OK]

Common Mistakes:

• Assuming visually same means equal
• Ignoring Unicode combining characters
• Expecting automatic normalization in equality