지역변수와 전역변수의 차이

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

canvas.width = window.innerWidth - 100;
canvas.height = window.innerHeight - 100;

const dino = {
    x : 10,
    y : 200,
    width : 50,
    height : 50,
    draw() {
        ctx.fillstyle = 'green';
        ctx.fillRect(this.x, this.y, this.width, this.height)
    }
}

class Cactus {
    constructor() {
        this.x = 500;
        this.y = 200;
        this.width = 50;
        this.height = 50;
    }
    draw() {
        ctx.fillstyle = 'red';
        ctx.fillRect(this.x, this.y, this.width, this.height)
    }
}

function makeCactus() {
    requestAnimationFrame(makeCactus);
    let timer = 0;
    timer++;
    ctx.clearRect(0,0, canvas.width, canvas.height);
    
    if(timer % 120 === 0){
        const cactus = new Cactus();
        cactus.draw();
    }
    
    dino.draw();
}

makeCactus();


-----------------------------

자바스크립트 ES6 장애물 피하기 게음을 만들면서 질문 있습니다. makeCactus 함수에서 timer을 지역변수로 설정하면(코드 내의 굵은 글씨)
함수 내의 timer로 이루어진 if문이 작동하지 않지만
timer을 선생님이 강의에서 설정했듯이 전역변수로 설정하면 makerCactus 함수의 if문이 잘 작동합니다. 
왜 그런지 알 수 있을까요???