클로저란 도대체 무엇입니까?(간단한 JS 정의)

첫 면접에서 면접관이 Closure를 정의하라고 물었을 때를 기억합니다. 기술적인 용어를 몰랐기 때문에 악몽이었습니다. 하지만 속으로는 설명할 수는 없어도 그 의미를 이해하고 있다는 느낌이 들었습니다.

인터뷰가 끝난 후(스포일러: 저는 선정되지 않았습니다) 서둘러 Google에 접속해 폐쇄 소식을 읽었습니다. 제가 처음 접한 용어는 Lexical Scoping = _What?

이었습니다.

걱정하지 마세요. 어휘 범위 지정은 단순한 것을 가리키는 멋진 용어일 뿐입니다!

그럼 차근차근 살펴보고 이해해 볼까요.

어휘 범위 지정 설명

당신의 집을 생각해 보세요. 당신이 침실에 있고 침실 램프를 켜고 싶다고 상상해보십시오. 현재 있는 방에 있는 램프만 켤 수 있습니다. 이것이 어휘 범위 지정입니다. 현재 컨텍스트 내에 있는 항목(예: 램프)에만 액세스하고 수정할 수 있습니다.

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

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

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

turnOnBedroomLamp 및 TurnOffBedroomLamp 함수는 침실 컨텍스트 내에 존재하므로 BedroomLamp 변수에 액세스하고 수정할 수 있습니다.

이제 부엌에 있다고 상상하고 침실 램프를 꺼보세요. 다른 컨텍스트에 있고 주방이 BedroomLamp 변수에 액세스할 수 없기 때문에 이 방법은 작동하지 않습니다.

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

아주 간단하죠?

어휘 범위 지정과 종결 사이의 관계는 무엇입니까?

이제 좀 더 자세히 살펴보겠습니다. 집에 어느 방에 있든 침실 램프를 켤 수 있는 리모컨이 있다고 상상해 보세요. 이 리모컨은 사용자가 부엌에 있더라도 제어하는 ​​침실 램프를 '기억'합니다.

이 "기억"이 클로저입니다!

다음은 코드의 예입니다.

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

이 예에서는:

침실 함수는 지역 변수 BedroomLamp와 TurnOnBedroomLamp 함수를 생성합니다.

turnOnBedroomLamp는 그것이 만들어진 맥락(침실 기능)을 기억합니다.

remoteControl(반환된 함수)을 호출하면 이제 침실 함수 외부에 있더라도 여전히 BedroomLamp 변수에 액세스할 수 있습니다.

보셨나요? 매우 간단한 아이디어입니다. Javascript가 사물을 기억하므로 다양한 장소에서 다양한 방식으로 사용할 수 있습니다.

이제 실제 코드 맥락에서 생각하면서 오늘날 클로저를 어떻게 사용할 수 있는지 살펴보겠습니다. 아래 코드는 제품 값에 할인을 추가하는 함수를 생성합니다.

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

이제 종결에 대해 인식하고 인터뷰에서 정의를 묻는 질문에 대비했습니다. 더 많은 콘텐츠를 보려면 참고자료 섹션을 확인하세요.

참고자료

폐쇄 - MDN 웹 독

JavaScript의 클로저 - GeeksForGeeks

위 내용은 클로저란 도대체 무엇입니까?(간단한 JS 정의)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!