Two Sum - JS Solution

Editorial

Editorial solutions and visualizations are prepared with care, but we do not guarantee 100% accuracy or completeness. Please use your own judgment to verify results. Visucodize is not responsible for decisions made based on this content.

const COMPLEMENTING_NUM = 'complementing_num', COMPLEMENTING_NUM_COLOR = 'green';
const CURRENT_NUM_INDEX = 'current_num_index', CURRENT_NUM_INDEX_COLOR = 'orange';
const COMPLEMENTING_INDEX = 'complementing_index', COMPLETING_INDEX_COLOR = 'blue';

function visMainFunction(inputNums, target) {
    initClassProperties();

    startBatch();
    const nums = new VisArray(...inputNums);
    makeVisVariable(target).options({'label': 'target'}).createVis(true);
    const valueToIndex = new VisMap();

    let index = 0;
    makeVisVariable(index).registerAsIndexPointer(nums, CURRENT_NUM_INDEX);
    endBatch();

    explanationNotification();
    notification(`
        🎨 <b>Color Palette Guide</b><br/><br/>
        • ${makeColoredSpan("Orange", "orange")} → <b>Current number's index</b><br/>
        • ${makeColoredSpan("Green", "green")} → <b>Complementing number</b><br/>
        • ${makeColoredSpan("Blue", "blue")} → <b>Complementing number's index</b><br/>
    `);

    // Note: Visucodize does not support observing assignments or declarations in a for loop’s expressions.
    // Otherwise, a for loop would be preferred here instead of the while loop.
    while (index < nums.length) {
        // Close the batch that was started at the end of the previous loop iteration.
        // On the very first run, there is no matching startBatch(), so calling endBatch() here has no effect.
        index > 0 && endBatch();

        const currentNumber = nums[index];
        const complementingNum = target - currentNumber;
        
        startPartialBatch();
        makeVisVariable(currentNumber).options({label: 'currentNumber'}).createVis(true);
        makeVisVariable(complementingNum).options({label: 'complementingNum'}).createVis(true);
        notification(`
          🧮 <b>Compute complement:</b> target (${target}) − currentNumber (${makeColoredSpan(currentNumber, CURRENT_NUM_INDEX_COLOR)}) = 
          ${makeColoredSpan(complementingNum, COMPLEMENTING_NUM_COLOR)} (<b>complementingNum</b>).
          <br/>
          🔎 Next, check <b>valueToIndex</b> for this complement.
        `);
        endBatch();

        if (valueToIndex.has(complementingNum)) {
            const complementingIndex = valueToIndex.get(complementingNum);
            startPartialBatch()
            highlightComplementingElements(valueToIndex, nums, complementingNum, complementingIndex);
            notification(`
              ✅ Found complement ${makeColoredSpan(complementingNum, COMPLEMENTING_NUM_COLOR)}
              at ${makeColoredSpan(`index ${complementingIndex}`, COMPLETING_INDEX_COLOR)}.
              <br/>
              Current value is at ${makeColoredSpan(`index ${index}`, CURRENT_NUM_INDEX_COLOR)}.
              <br/>
              📦 Return [index, complementingIndex] → [${index}, ${complementingIndex}]
            `);
            endBatch();
            return [index, complementingIndex];
        }
        else {
            notification(`
              ❌ Not in map yet: ${makeColoredSpan(complementingNum, COMPLEMENTING_NUM_COLOR)} is not in <b>valueToIndex</b>.
              <br/>
              ➕ Insert currentNumber → ${makeColoredSpan(index, CURRENT_NUM_INDEX_COLOR)} and continue searching.
            `)
        }

        valueToIndex.set(currentNumber, index);  
        index += 1;
        startBatch(); // start a batch for destroying the visvariables at once
    }
}

function initClassProperties() {
    setClassProperties(COMPLEMENTING_NUM, {
       'backgroundColor': COMPLEMENTING_NUM_COLOR
   });

   setClassProperties(CURRENT_NUM_INDEX, {
    'backgroundColor': CURRENT_NUM_INDEX_COLOR
   });

   setClassProperties(COMPLEMENTING_INDEX, {
    'backgroundColor': COMPLETING_INDEX_COLOR
   });
}

function highlightComplementingElements(numToIndex, nums, complementingNum, complementingIndex) {
    startBatch();
    numToIndex.makeVisManagerForKey(complementingNum).addClass(COMPLEMENTING_NUM);
    numToIndex.makeVisManagerForValue(complementingNum).addClass(COMPLEMENTING_INDEX);
    nums.makeVisManagerForIndex(complementingIndex).addClass(COMPLEMENTING_INDEX);
    endBatch();
}

Approach

Goal

Given an array of numbers and a target sum, find two indices such that the numbers at those indices add up to the target.

Key Idea (Intuition)

To form the target, for each number we need its complement (target − currentNumber). If we already know where the complement appeared earlier, we have the answer immediately. Thus, while traversing the array once, we maintain a map (valueToIndex) from number → index. This allows constant-time lookup of complements and ensures we can find the pair in O(n) time.

Traversal

🚶 Traverse the array: start from index 0 and move forward one element at a time.

🧮 At each index: compute the complement using target − currentNumber.

📖 Use the valueToIndex map: this map stores numbers that have already been seen as number → index pairs. It allows quick lookup to check whether the current complement was encountered earlier.

🔎 Check the map: if the complement exists in valueToIndex, you have found two numbers that add up to the target.

✅ If found: return the pair [currentIndex, complementingIndex].

❌ If not found: store currentNumber → index in the map and continue traversing.

Return Value

📦 When a complement is found during traversal, return [index, complementingIndex] immediately.

Time Complexity

O(n), since the array is traversed once.

Space Complexity

O(n), for storing numbers in the valueToIndex map.

Input-1

Two Sum - JS Solution

Solution code

Solution explanation

Solution explanation

Approach

Goal

Key Idea (Intuition)

Traversal

Return Value

Time Complexity

Space Complexity