Question on real world use of closures

JavaScript
1

So, I’ve been trying to tackle the concept of closures and have been watching multiple people explain it. From my understanding it’s having access to the scope of a parent function after the parent function has already run and closed.

I’m somewhat understanding them and what they are, but I don’t understand why you would actually use them.

everything I’ve seen so far explains pretty well what they are, but no one seems to explain why you would use them.

I get confused on why someone wouldn’t do something like this.

let globalvariable = 'global'

function outerFunction() {
    let outerVariable = 'outer'

    function innerFunction() {
        let innerVariable = 'inner'
        console.log(`${globalvariable} ${outerVariable} ${innerVariable}`)
    }
    
    innerFunction()
}

outerFunction()

over something like this.

let globalvariable = 'global'

function outerFunction() {
    let outerVariable = 'outer'

    function innerFunction() {
        let innerVariable = 'inner'
        console.log(`${globalvariable} ${outerVariable} ${innerVariable}`)
    }
    
    return innerFunction
}

let innerFunct = outerFunction()
innerFunct()
2

Honestly, this is not the greatest challenge to explain why you would use closure with the example given.

Below is a more realistic use of closure.

function counter(counterName) {
    let count = 0;

    function counterInfo() {
        count++;
        console.log(`${counterName} - Count: ${count}`)
    }
    
    return counterInfo;
}
let counter1 = counter('Number1');
counter1(); // Number1 - Count: 1
counter1(); // Number1 - Count: 2

let counter2 = counter('Number 2');
counter2(); // Number2 - Count: 1
counter2(); // Number2 - Count: 2
counter2(); // Number2 - Count: 3

In this example, we want to be able to create multiple counters that keep track of how many times they have been called. The main function counter returns the inner function counterInfo. It is really counterInfo that gets called after initializing a variable with a call to counter. The count variable is accessible to the counterInfo function, so it can return its value when the intialized counter gets called.

1 Like
3

So, I rewrote your example into what I was using in the previous example.

function counter(counterName) {
    let count = 0;

    function counterInfo() {
        count++;
        console.log(`${counterName} - Count: ${count}`)
    }
    
    counterInfo()
}

counter('number1')
counter('number1')
counter('number2')
counter('number2')
counter('number2')

Now I think I can really see the difference. In the example I’m using it’s calling counter which is resetting the value of count back to 0 every time.

in your example it’s ONLY calling counterInfo and not counter and is able to get the value of count without resetting it back to 0

Am I correct in that?

4

In your example above, you are calling counter twice with number1 as the argument and 3 times with number2 as the argument. But since, counter just calls counterInfo each time, count will always be 1 as each time counter is called, count starts at 0.

In my example, I assign the call of counter to two variables. Each time I call counter, a new count is set to 0 and since I return the counterInfo function instead of just calling it, I preserve the current count for variable where counter is called.

Yes, you seem to understand the difference better now.

1 Like
5

Thank you, now that I have more of an understanding, I’m going to go over some more lessons and see if I can grasp it better!

6

See this article for a more detailed explanation of closure and better examples.

7

I’ll take a look here shortly, thank you!

8

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.