String to Integer atoi in DSA Javascript - 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

↓

Return final integer

The process starts by trimming spaces, then checks for a sign, reads digits to form a number, checks for overflow, and returns the integer.

Execution Sample

DSA Javascript

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

This code converts a string to an integer by trimming spaces, detecting sign, reading digits, and clamping to 32-bit integer range.

Execution Table

Step	Operation	Index i	Sign	Current char	Number formed	Action	Notes
1	Initialize variables	0	1		0	Start scanning	i=0, sign=1, num=0
2	Skip spaces	1	1		0	Increment i	Skip space at i=0
3	Skip spaces	2	1	-	0	Increment i	Skip space at i=1
4	Check sign	2	-1	-	0	Set sign to -1 and increment i	Sign detected '-'
5	Read digit	3	-1	4	4	num = 0*10 + 4	First digit read
6	Read digit	4	-1	2	42	num = 4*10 + 2	Second digit read
7	Read digit	5	-1	7	427	num = 42*10 + 7	Third digit read
8	Read digit	6	-1	a	427	Stop reading digits	Non-digit char at i=6
9	Apply sign	6	-1	a	-427	Multiply num by sign	Final number before clamp
10	Clamp to 32-bit	6	-1	a	-427	No clamp needed	Number within range
11	Return result	6	-1	a	-427	Return -427	End of function

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

Variable Tracker

Variable	Start	After Step 2	After Step 4	After Step 7	Final
i	0	2	3	6	6
sign	1	1	-1	-1	-1
num	0	0	0	427	427

Key Moments - 3 Insights

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

Because in the execution_table at Step 8, the character 'a' is not a digit, so the loop stops to avoid invalid number formation.

How is the sign determined and applied to the number?

At Step 4, the sign is set to -1 because the character is '-', then at Step 9 the number is multiplied by this sign to get the final value.

Why do we clamp the number to the 32-bit integer range?

To prevent overflow errors, as shown in Step 10, the number is limited between -2147483648 and 2147483647 to fit in a 32-bit signed integer.

Visual Quiz - 3 Questions

Look at the execution_table at Step 5, what is the value of 'num' after processing the character '4'?

A 4

B 0

C 40

D 14

💡 Hint

Check the 'Number formed' column at Step 5 in the execution_table.

At which step does the function stop reading digits from the string?

A Step 7

B Step 8

C Step 9

D Step 10

💡 Hint

Look for the step where the 'Current char' is not a digit in the execution_table.

If the input string started with '+', what would be the value of 'sign' after Step 4?

A -1

B 0

C 1

D Undefined

💡 Hint

Refer to the 'Sign' column in the variable_tracker and execution_table for sign detection.

Concept Snapshot

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

Full Transcript

This visual trace shows how a string is converted to an integer step-by-step. First, spaces are skipped. Then the sign is checked and stored. Next, digits are read one by one and combined into a number. Reading stops when a non-digit character is found. The number is then multiplied by the sign and clamped to the 32-bit integer range before returning. Variables like index, sign, and number are tracked throughout to understand the process clearly.

Practice

1. What is the main purpose of the atoi function in programming?

easy

A. Check if a string contains only digits

B. Convert an integer into a string

C. Sort characters in a string alphabetically

D. Convert a string representing a number into an integer

Solution

1. Step 1: Understand the function name

   atoi stands for ASCII to integer, meaning it converts strings to integers.

2. Step 2: Identify the function's purpose

   It takes a string input and returns its integer value if possible.

3. Final Answer:

   Convert a string representing a number into an integer -> Option D

4. Quick Check:

   atoi = string to integer conversion [OK]

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

Common Mistakes:

• Confusing atoi with integer to string conversion
• Thinking atoi sorts strings
• Assuming atoi validates string digits only

2. Which of the following JavaScript code snippets correctly converts the string "123" to an integer using a method similar to atoi?

easy

A. const num = Number.toString("123");

B. const num = parseInt("123");

C. const num = "123".toString();

D. const num = "123" + 0;

Solution

1. Step 1: Identify the correct conversion method

   parseInt converts a string to an integer in JavaScript, similar to atoi.

2. Step 2: Check each option

   const num = parseInt("123"); uses parseInt correctly. const num = "123".toString(); converts string to string, no change. const num = Number.toString("123"); is invalid syntax. const num = "123" + 0; concatenates string and number, resulting in a string.

3. Final Answer:

   const num = parseInt("123"); -> Option B

4. Quick Check:

   parseInt("123") = 123 [OK]

Hint: Use parseInt() to convert string to integer [OK]

Common Mistakes:

• Using toString() which returns a string
• Trying Number.toString() incorrectly
• Adding 0 to string results in string concatenation

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

function myAtoi(str) {
  let i = 0, sign = 1, result = 0;
  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') {
    result = result * 10 + (str[i].charCodeAt(0) - '0'.charCodeAt(0));
    i++;
  }
  return sign * result;
}
console.log(myAtoi("  -42abc"));

medium

A. 0

B. 42

C. -42

D. NaN

Solution

1. Step 1: Skip leading spaces and check sign

   The function skips spaces, finds '-', sets sign to -1, moves index forward.

2. Step 2: Convert digits until non-digit

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

3. Step 3: Apply sign and return

   Returns -1 * 42 = -42.

4. Final Answer:

   -42 -> Option C

5. Quick Check:

   myAtoi(" -42abc") = -42 [OK]

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

Common Mistakes:

• Not skipping spaces before sign
• Ignoring sign and returning positive number
• Parsing non-digit characters

4. Identify the bug in this myAtoi function implementation:

function myAtoi(str) {
  let i = 0, sign = 1, result = 0;
  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') {
    result = result * 10 + (str[i] - '0');
    i++;
  }
  return sign * result;
}

medium

A. Subtracting characters directly without charCodeAt causes NaN

B. Missing check for empty string input

C. Sign is not applied correctly

D. Loop does not skip spaces

Solution

1. Step 1: Analyze digit conversion

   Expression str[i] - '0' tries to subtract strings, which results in NaN in JavaScript.

2. Step 2: Correct approach

   Use str[i].charCodeAt(0) - '0'.charCodeAt(0) to get numeric value of digit character.

3. Final Answer:

   Subtracting characters directly without charCodeAt causes NaN -> Option A

4. Quick Check:

   String subtraction needs charCodeAt() [OK]

Hint: Use charCodeAt() to convert char digits to numbers [OK]

Common Mistakes:

• Subtracting characters directly causing NaN
• Not handling empty or invalid input
• Ignoring sign application

5. You want to implement myAtoi that converts a string to a 32-bit signed integer. Which approach correctly handles overflow and returns the clamped value if the number is out of range?

function myAtoi(str) {
  let i = 0, sign = 1, result = 0;
  const INT_MAX = 2147483647;
  const INT_MIN = -2147483648;
  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') {
    let digit = str[i].charCodeAt(0) - '0'.charCodeAt(0);
    if (result > Math.floor(INT_MAX / 10) || (result === Math.floor(INT_MAX / 10) && digit > INT_MAX % 10)) {
      return sign === 1 ? INT_MAX : INT_MIN;
    }
    result = result * 10 + digit;
    i++;
  }
  return sign * result;
}

hard

A. Correctly clamps overflow and returns 32-bit integer limits

B. Does not handle overflow, may return incorrect large numbers

C. Returns NaN on overflow instead of clamping

D. Ignores sign when clamping overflow values

Solution

1. Step 1: Check overflow condition

   The code checks if adding the next digit causes overflow by comparing with INT_MAX/10 and last digit.

2. Step 2: Return clamped value

   If overflow detected, returns INT_MAX or INT_MIN depending on sign, correctly clamping the value.

3. Step 3: Otherwise accumulate result

   Accumulates digits safely within 32-bit integer range.

4. Final Answer:

   Correctly clamps overflow and returns 32-bit integer limits -> Option A

5. Quick Check:

   Overflow check and clamp = correct behavior [OK]

Hint: Check overflow before multiply, clamp to INT_MAX/INT_MIN [OK]

Common Mistakes:

• Not checking overflow before multiplication
• Returning wrong values on overflow
• Ignoring sign when clamping