Logic behind If completed condition with not statement

I am following a memory-game tutorial and the next piece of code was used so we can know which cards were flipped. Now i am trying to grasp my little head around this piece of code and i know its super simple, but i can't seem to understand it.

var allTheCards = document.querySelectorAll('.card');

allTheCards.forEach(element => element.addEventListener('click', flipTheCard));

    var flipCard = false;
    var firstCard, secondCard;

    function flipTheCard() {
        this.classList.add('flip');
        debugger;
            if (!flipCard) {
                flipCard = true;
                firstCard = this;

            } 
            else {
                flipCard = false;
                secondCard = this;
                console.log(flipCard);

            };
    };

First we declare flipCard as false and later in the if statement the condition is (!flipCard) which is basically true. I followed the debugger and after the first conditions it returns the flipCard as true, but how is that condition fulfilled really? (does the click on the element do it... or what)

If anyone can tell me this in plain English, it would be really helpfull, i did lose most of my day yesterday banging my head at this.