String to Integer atoi in DSA Typescript - Execution Trace

Concept Flow - String to Integer atoi

Start

↓

Trim spaces

↓

Check sign '+' or '-'

↓

Read digits one by one

↓

Convert digits to number

↓

Check overflow

↓

Apply sign

↓

Return integer

The process trims spaces, checks sign, reads digits, converts to number, checks overflow, applies sign, and returns the integer.

Execution Sample

DSA Typescript

function myAtoi(s: string): number {
  let i = 0, sign = 1, result = 0;
  while (s[i] === ' ') i++;
  if (s[i] === '+' || s[i] === '-') sign = s[i++] === '-' ? -1 : 1;
  while (s[i] >= '0' && s[i] <= '9') {
    result = result * 10 + (s[i++].charCodeAt(0) - 48);
  }
  return Math.min(Math.max(sign * result, -2147483648), 2147483647);
}

This code converts a string to a 32-bit signed integer following atoi rules.

Execution Table

Step	Operation	Index i	Current Char	Sign	Result	Action	Visual State
1	Start	0	' '	1	0	Skip spaces	i=0, result=0
2	Skip spaces	1	' '	1	0	Skip spaces	i=1, result=0
3	Skip spaces	2	'-'	1	0	Stop skipping	i=2, result=0
4	Check sign	2	'-'	1	0	Sign set to -1, i++	sign=-1, i=3
5	Read digit	3	'4'	-1	0	result = 0*10 + 4 = 4, i++	result=4, i=4
6	Read digit	4	'2'	-1	4	result = 4*10 + 2 = 42, i++	result=42, i=5
7	Read digit	5	'a'	-1	42	Non-digit stops reading	result=42, i=5
8	Apply sign	5	N/A	-1	42	result = -42	final result = -42
9	Return	5	N/A	-1	-42	Return -42	Done

💡 Stopped reading digits at non-digit character 'a' at index 5

Variable Tracker

Variable	Start	After Step 3	After Step 4	After Step 6	After Step 7	Final
i	0	2	3	5	5	5
sign	1	1	-1	-1	-1	-1
result	0	0	0	42	42	-42

Key Moments - 3 Insights

Why do we skip spaces before processing the number?

Because atoi ignores leading spaces. As shown in execution_table rows 1-3, we move index i forward until a non-space character is found.

How do we handle the sign of the number?

In row 4, we check if the current character is '+' or '-'. If '-', sign is set to -1; otherwise, it remains 1. This sign is applied after reading digits.

Why do we stop reading digits at a non-digit character?

As in row 7, when a character is not between '0' and '9', we stop reading further digits to avoid invalid input.

Visual Quiz - 3 Questions

Look at the execution_table, what is the value of 'result' after step 6?

A 42

B 4

C 0

D -42

💡 Hint

Check the 'Result' column in row 6 of the execution_table.

At which step does the sign change from 1 to -1?

A Step 2

B Step 4

C Step 3

D Step 5

💡 Hint

Look at the 'Sign' column in execution_table rows 3 and 4.

If the input string started with '+' instead of '-', what would be the sign after step 4?

A -1

B 0

C 1

D Undefined

💡 Hint

Refer to the sign assignment logic in step 4 of the execution_table.

Concept Snapshot

String to Integer (atoi) conversion:
- Trim leading spaces
- Check for optional '+' or '-' sign
- Read digits until non-digit
- Convert digits to number
- Clamp to 32-bit signed int range
- Return signed integer

Full Transcript

This visual trace shows how a string is converted to an integer using the atoi rules. We start by skipping spaces, then check for a sign character. Next, we read digits one by one, converting them to a number. Reading stops at the first non-digit character. The sign is applied to the number, and the result is clamped within the 32-bit signed integer range before returning. Variables like index, sign, and result are tracked step-by-step to understand the process clearly.

Practice

1. What does the atoi function do when given a string input?

easy

A. Converts the string to a floating-point number

B. Reverses the string characters

C. Converts the string to an integer number

D. Counts the number of characters in the string

Solution

1. Step 1: Understand the purpose of atoi

   The atoi function stands for ASCII to integer and converts a string representing a number into an integer value.

2. Step 2: Compare options with function behavior

   Only Converts the string to an integer number correctly describes this conversion. Other options describe different operations unrelated to atoi.

3. Final Answer:

   Converts the string to an integer number -> Option C

4. Quick Check:

   atoi converts string to integer [OK]

Hint: Remember atoi means ASCII to integer conversion [OK]

Common Mistakes:

• Thinking atoi converts to float
• Confusing atoi with string reversal
• Assuming atoi counts characters

2. Which of the following TypeScript function signatures correctly represents a simple atoi function?

easy

A. function atoi(str: string): number

B. function atoi(num: number): string

C. function atoi(str: number): string

D. function atoi(): void

Solution

1. Step 1: Identify input and output types for atoi

   atoi takes a string input and returns a number (integer).

2. Step 2: Match function signature with correct types

   function atoi(str: string): number matches this: input is string, output is number. Other options have wrong input/output types or no parameters.

3. Final Answer:

   function atoi(str: string): number -> Option A

4. Quick Check:

   Input string, output number [OK]

Hint: atoi input is string, output is number [OK]

Common Mistakes:

• Swapping input and output types
• Using no parameters
• Using wrong parameter types

3. What is the output of the following TypeScript code?

function atoi(str: string): number {
  let i = 0, num = 0, sign = 1;
  while (str[i] === ' ') i++;
  if (str[i] === '-' || str[i] === '+') {
    sign = str[i] === '-' ? -1 : 1;
    i++;
  }
  while (i < str.length && str[i] >= '0' && str[i] <= '9') {
    num = num * 10 + (str.charCodeAt(i) - 48);
    i++;
  }
  return num * sign;
}
console.log(atoi("  -42abc"));

medium

A. -42

B. 42

C. 0

D. NaN

Solution

1. Step 1: Skip leading spaces and detect sign

   The code skips spaces, finds '-', so sign = -1, index moves past '-'.

2. Step 2: Parse digits until non-digit

   Reads '4' and '2', converts to number 42, stops at 'a'.

3. Step 3: Apply sign and return

   Returns 42 * -1 = -42.

4. Final Answer:

   -42 -> Option A

5. Quick Check:

   Parsed number with sign = -42 [OK]

Hint: Skip spaces, check sign, parse digits until non-digit [OK]

Common Mistakes:

• Not skipping spaces
• Ignoring sign character
• Parsing non-digit characters

4. The following TypeScript atoi implementation has a bug. What is the bug?

function atoi(str: string): number {
  let num = 0;
  let i = 0;
  while (i < str.length && str[i] === ' ') i++;
  for (; i < str.length; i++) {
    if (str[i] < '0' || str[i] > '9') break;
    num = num * 10 + (str.charCodeAt(i) - 48);
  }
  return num;
}

medium

A. Returns string instead of number

B. Does not handle leading spaces

C. Does not stop parsing at non-digit characters

D. Does not handle negative or positive signs

Solution

1. Step 1: Check for sign handling

   The code does not check for '+' or '-' signs before parsing digits.

2. Step 2: Verify other behaviors

   It skips leading spaces, stops parsing at first non-digit and returns number, so no issue there. The main bug is missing sign handling.

3. Final Answer:

   Does not handle negative or positive signs -> Option D

4. Quick Check:

   Missing sign handling in atoi [OK]

Hint: Check if signs '+' or '-' are handled [OK]

Common Mistakes:

• Assuming spaces are main bug
• Thinking it parses non-digit characters
• Confusing return type

5. You want to extend the atoi function to handle integer overflow by clamping the result between INT_MIN = -2147483648 and INT_MAX = 2147483647. Which code snippet correctly clamps the value before returning?

const INT_MIN = -2147483648;
const INT_MAX = 2147483647;

function atoi(str: string): number {
  let i = 0, num = 0, sign = 1;
  while (str[i] === ' ') i++;
  if (str[i] === '-' || str[i] === '+') {
    sign = str[i] === '-' ? -1 : 1;
    i++;
  }
  while (i < str.length && str[i] >= '0' && str[i] <= '9') {
    num = num * 10 + (str.charCodeAt(i) - 48);
    i++;
  }
  num = num * sign;
  // Clamp here
  // ???
  return num;
}

hard

A. if (num > INT_MIN) return INT_MIN; if (num < INT_MAX) return INT_MAX;

B. if (num < INT_MIN) return INT_MIN; if (num > INT_MAX) return INT_MAX;

C. if (num < INT_MAX) return INT_MIN; if (num > INT_MIN) return INT_MAX;

D. if (num === INT_MIN) return INT_MAX; if (num === INT_MAX) return INT_MIN;

Solution

1. Step 1: Understand clamping logic

   If number is less than INT_MIN, return INT_MIN; if greater than INT_MAX, return INT_MAX.

2. Step 2: Match correct condition and return

   if (num < INT_MIN) return INT_MIN; if (num > INT_MAX) return INT_MAX; correctly checks and returns clamped values. Other options have incorrect comparisons or swap min/max.

3. Final Answer:

   if (num < INT_MIN) return INT_MIN; if (num > INT_MAX) return INT_MAX; -> Option B

4. Quick Check:

   Clamp below min and above max correctly [OK]

Hint: Clamp with if less than min or greater than max [OK]

Common Mistakes:

• Swapping INT_MIN and INT_MAX in conditions
• Using equality instead of inequality
• Returning wrong clamp value