Start learning free

LESSON 139 OF 348 · LOOPS & GLOBAL VARIABLES

Array Sum in TypeScript: Fixing the Buggy Code

Practice Read the full explanation

Inside the code editor we've tried to write a function that takes an array nums as argument and prints to the console the sum of all numbers in that list.

So when we called printSum([1, 2, 3]), we expected our code to print:

6

because 1 + 2 + 3 = 6. But it seems like we made some mistakes because when we run our code, it prints:

1
2
3

Assignment:

Your task is to fix our function such that it correctly computes and prints the desired sum.

STEP 1 OF 1
    Ctrl + Enter to check

    TYPESCRIPT · LOOPS & GLOBAL VARIABLES

    Buggy Code Array Sum in TypeScript, explained

    What the code is supposed to do

    The function printSum takes an array of numbers, nums, and should print the sum of all of them, once. Called with [1, 2, 3] it should print 6, because 1 + 2 + 3 = 6. Instead, the code you start with prints three lines:

    1
2
3

    Here is that code. The call on the last line must stay exactly as it is:

    function printSum(nums: number[]): void {
    for (const num of nums) {
        let sum: number = 0;
        sum += num;
        console.log(sum);
    }
}
// Do not change this code:
printSum([1, 2, 3]);

    There are two mistakes. Each one hides the other: fix only one and the output is still wrong.

    What goes wrong

    Trace the loop by hand. The body runs once for each number, and each run does the same three things.

    1. The first pass, num = 1. let sum: number = 0 creates a new variable holding 0. Then sum += num makes it 1, and console.log(sum) prints 1.
    2. The second pass, num = 2. A brand-new sum is created, again holding 0. After the addition it is 2, and 2 is printed.
    3. The third pass, num = 3. The same thing happens, and 3 is printed.

    The two mistakes are visible in that trace:

    • The total is declared inside the loop. A variable declared in a loop body is created again on every pass and disappears at the end of it. Nothing carries over from one number to the next, so sum never holds more than one number's worth.
    • The print is inside the loop. console.log(sum) runs once per number. The total isn't complete until the last number has been added, so the print belongs after the loop.

    Why fixing only one is not enough

    Move let sum: number = 0 above the loop but leave the print inside it, and sum does accumulate. The function then prints a running total: 1, 3, 6. The last line is right, but the first two are extra output.

    Move only the print below the loop and the compiler reports Cannot find name 'sum', because the variable lives only inside the loop body, and that code still reaches the print. Even when the JavaScript runs anyway, it fails there, because no sum exists outside the loop.

    Fixing it step by step

    1. Move the declaration above the loop. let sum: number = 0 now runs once, before the first number is looked at. It is declared with let and not const, because the loop changes it.
    2. Leave the addition in the loop. sum += num adds the current number to the total, and the total now survives from one pass to the next.
    3. Move the print below the loop. When the loop ends, every number has been added, and one console.log(sum) prints the finished total.
    4. Leave the call alone. printSum([1, 2, 3]) is unchanged.

    The fixed code in TypeScript

    function printSum(nums: number[]): void {
    let sum: number = 0;
    for (const num of nums) {
        sum += num;
    }
    console.log(sum);
}
printSum([1, 2, 3]);

    This prints 6. The details worth knowing:

    • Scope. A let variable exists only inside the nearest pair of braces. That is why a declaration in the loop body is fresh on each pass, and why the fixed version has to declare sum outside the loop to use it after the loop.
    • const num is fine. In a for...of loop each pass gets its own num that is never reassigned, so const works. sum does change, so it needs let.
    • The void return type. The function prints and returns nothing, so its type is void. Like every annotation, it is erased when the code is compiled to JavaScript.
    • Printing, not returning. This function prints the total; it does not give it back to the caller. A function that returned the sum would end with return sum; instead of console.log(sum);.

    Common mistakes

    • Printing inside the loop. It gives one line per number, either the numbers themselves or a running total.
    • Declaring the total in the loop. It resets to 0 on every pass.
    • Starting the total at something other than 0. The sum would then be off by that starting value.
    • Using = instead of +=. sum = num keeps only the last number, so the output would be 3.
    • An empty array. The loop never runs, and the fixed function prints 0, the sum of nothing.

    Checking your fix

    Run the code in the editor above. A correct fix prints a single line, 6. If you see 1, 3, 6 on three lines, the print is still inside the loop. If you see 1, 2, 3, the declaration is still inside it.

    Keep going with TypeScriptAbout 340 step-by-step lessons, from your first line of code to coding interviews. Free to start.
    Start learning free