Use of 'var' vs 'let' keyword in a function

Hi,

In the JavaScript practice workshop on using the 'let' and 'var' keyword, there is a function as below that counts the total no. of treehouse courses and teacher as below:

const courses = ['Introducing JavaScript',
                'JavaScript Basics',
                'JavaScript Loops, Arrays and Objects',
                'Getting Started with ES2015',
                'JavaScript and the DOM',
                'DOM Scripting By Example'];

var i = courses.length;

function printTreehouseSummary() {

  for (var i = 0; i < teachers.length; i++) {
     console.log(`${teachers[i].name} teaches ${teachers[i].topicArea}`);
    }

  console.log(`Treehouse has ${i} JavaScript courses, and ${teachers.length} Javascript teachers`);
}

On output, why does this print 3 instead of 6 courses? The usage of 'var i' in the for loop is within the scope of a function, and from what I remember, any variable declared inside the scope of a function is exclusive to that function. Then why in the above scenario we see the 'variable shadowing' occurring whereby the 'var i' initialised in the for loop under the printTreehouseSummary function is overwriting the 'var i' variable declared and initialised at the global scope level? Please help me understand this.