What the heck is a Closure?(SIMPLE JS DEFINITION)

I remember my first job interview when the interviewer asked me to define Closure. It was a nightmare because I didn’t know the technical term. But deep inside, I had a feeling that I understood what it meant, even if I couldn’t explain it.

After the interview ended (spoiler: I wasn’t selected), I rushed to Google to read about closures. The first term I encountered was Lexical Scoping = _What?

Don't worry, Lexical Scoping is just a fancy term for something simple!

So let’s dive in and understand it step by step.

Lexical Scoping explained

Think of your house. Imagine you’re in your bedroom and want to turn on the bedroom lamp. You can only turn on the lamp that’s in the room you’re currently in. This is Lexical Scoping: you can only access and modify things (like the lamp) that are within your current context.

const bedroom = () => {
  let bedroomLamp = 'off'

  const turnOnBedroomLamp = () => {
    bedroomLamp = 'on'
  }

  const turnOffBedroomLamp = () => {
    bedroomLamp = 'off'
  }
}

The functions turnOnBedroomLamp and turnOffBedroomLamp exist inside the bedroom context, so they can access and modify the bedroomLamp variable.

Now, imagine you’re in the kitchen and try to turn off the bedroom lamp. This won’t work because you’re in a different context, and the kitchen doesn’t have access to the bedroomLamp variable:

const kitchen = () => {
  const turnOnBedroomLamp = () => {
    bedroomLamp = 'on' // You can't do this!!
  }
}

Very simple, right?

What’s the Relation Between Lexical Scoping and Closure?

Now let’s take it further. Imagine your house has a remote control that lets you turn on the bedroom lamp, no matter which room you’re in. This remote control "remembers" the bedroom lamp it controls, even if you're in the kitchen.

This "memory" is what a Closure is!

Here’s an example in code:

const bedroom = () => {
  let bedroomLamp = 'off'

  const turnOnBedroomLamp = () => {
    bedroomLamp = 'on'
  }

  return turnOnBedroomLamp // Returning the function
}

const remoteControl = bedroom() // Creating the closure
remoteControl() // Using the closure to turn on the bedroom lamp

In this example:

The bedroom function creates a local variable bedroomLamp and a function turnOnBedroomLamp.

turnOnBedroomLamp remembers the context in which it was created (the bedroom function).

When we call remoteControl (the returned function), it still has access to the bedroomLamp variable, even though we’re now outside the bedroom function.

See? It is a very simple idea, is just Javascript remembering things so you can use in different places in different ways.

Now thinking in a real context of code, let's see how we can use closure in our days. The code below creates a function to add discounts in a product value.

const createDiscount = (discount) => {
  return (price) => price - price * discount
}

const tenPercentOff = createDiscount(0.1) // 10% off
const twentyPercentOff = createDiscount(0.2) // 20% off

// Using discount functions
console.log(tenPercentOff(100)) // returns 90
console.log(twentyPercentOff(200)) // returns 160

Now you're aware about closure and prepared when some interview ask you the definition. For more content, check references section.

References

Closure - MDN Web Docks

Closure in JavaScript - GeeksForGeeks

The above is the detailed content of What the heck is a Closure?(SIMPLE JS DEFINITION). For more information, please follow other related articles on the PHP Chinese website!