String to Integer atoi in DSA Typescript - Build from Scratch

String to Integer atoi

📖 Scenario: Imagine you are building a simple calculator app that takes user input as text. You need to convert the typed numbers from strings into actual numbers to perform calculations.

🎯 Goal: Build a function that converts a string into an integer number, handling spaces, optional plus/minus signs, and ignoring invalid trailing characters.

📋 What You'll Learn

Create a string variable called input with the exact value " -42 is the answer".

Create a variable called index to track the current position in the string.

Create a variable called sign to store the number sign, initialized to 1.

Create a variable called result to store the final integer, initialized to 0.

Write a loop to skip leading spaces in input using index.

Check for optional plus or minus sign and update sign and index accordingly.

Write a loop to convert digit characters to an integer until a non-digit is found.

Print the final integer value after applying the sign.

💡 Why This Matters

🌍 Real World

Converting user input strings to numbers is common in calculators, form validations, and data parsing.

💼 Career

Understanding string parsing and conversion is essential for software developers working with input processing and data cleaning.

1

Create the input string

Create a string variable called input with the exact value " -42 is the answer".

DSA Typescript

# Create a string variable called input with value "   -42 is the answer"
# Your code here

Hint

Use const input: string = " -42 is the answer"; to create the string.

2

Initialize helper variables

Create a variable called index initialized to 0, a variable called sign initialized to 1, and a variable called result initialized to 0.

DSA Typescript

const input: string = "   -42 is the answer";
# Create variables index = 0, sign = 1, and result = 0
# Your code here

Hint

Use let index: number = 0;, let sign: number = 1;, and let result: number = 0;.

3

Parse the string to integer

Write a while loop to skip spaces in input using index. Then check if the character at index is '-' or '+' to update sign and increment index. Then write a while loop to convert digit characters to an integer and update result until a non-digit is found.

DSA Typescript

const input: string = "   -42 is the answer";
let index: number = 0;
let sign: number = 1;
let result: number = 0;

# Skip spaces
# Check for sign
# Convert digits to integer
# Your code here

Hint

Use while loops to skip spaces and convert digits. Use if to check for sign.

4

Print the final integer

Print the final integer value by multiplying result with sign using console.log.

DSA Typescript

const input: string = "   -42 is the answer";
let index: number = 0;
let sign: number = 1;
let result: number = 0;

while (index = '0' && input[index] <= '9') {
    result = result * 10 + (input.charCodeAt(index) - '0'.charCodeAt(0));
    index++;
}

# Print the final integer value
# Your code here

Hint

Use console.log(sign * result); to print the final number.

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