👀Closure란?
내부함수에서 외부함수의 지역변수를 사용하기 위해, 외부함수의 환경을 기억하는것
Closure이해하기
위의 내부함수에서 외부 ... 와 같은 정의는 이해하기 쉽지않다.
예제를 통해서 클로저를 이해해보자.
👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻
Closure예제
상황: 0이 할당되어 있는 count라는 변수는 1씩 증가시키는 함수에 의해서만 증가해야한다.
이 같은 상황일 때 우리는 countPlus라는 함수를 만들어서, 필요할 때 실행할 것이다.
let count = 0; //이 count를 1씩 증가시키는 함수가 필요해!
function countPlus(){ //증가시키고 싶을 때 countPlus 함수를 실행시켜.
count++;
}
console.log(count)// 0
countPlus();
console.log(count)// 1
countPlus();
console.log(count)// 2
.
.
.
잘 동작한다!
그.런.데
위의 문제를 해결하고 나서, 다른 수~많은 코드들을 작성하다가 누군가가 count = 100; 이라는 코드를 작성하였다면?
0 let count = 0;
1 function countPlus(){
2 count++;
3 }
4 console.log(count)// 0
5
.
.
.
.
.
101 count = 100;
102 console.log(count)// 100
103 countPlus();
104 console.log(count)// 101
주의! 다시 한번 맨 위의 "상황"으로 돌아가서,
우리는 countPlus 함수로만 count의 값을 증가시켜야만 하는 상황이다.
현재는 count라는 변수가 전역변수이기에, 어디에서나 접근이 가능하고 다른 값을 할당할 수 있기에 우리가 원하는 방향이 아니다.
그렇다면 count라는 변수에 접근을 못하게 하면 되지 않을까?
이 때 필요한 것이 Closure이다.
count변수를 closure함수의 지역범위에 선언했다.
그러면 closure함수 밖에서는 count변수에 접근하지 못하게 되어, 우리가 원하는 방향대로 코드를 작성할 수 있을 것이다.
그러나 countPlus함수 또한 closure함수내부에 있기 때문에 실행시킬 수 없다.
function closure(){
let count = 0;//closure의 내부에 있기 때문에, 외부에서 접근불가.
function countPlus(){// 그런데, 이 함수는 접근해야하는데,,
count++;
}
}그 해결책으로 closure햠수 의 리턴값으로 countPlus함수를 작성해 준다.
추가적으로, 우리는 count의 값이 1씩 증가하는 것을 보고 싶기에 , count를 보여주는 함수 또한 작성할 필요가 있다.
function closure(){
let count = 0;
function countPlus(){
count++
}
function printCount(){
console.log(count)
}
return {
countPlus,
printCount // 리턴해줄테니 밖에서 써.
}
}
const countClosure = closure(); // closure함수를 실행한 값을 할당
-------------------------------------------------------------------------------
console.log(countClosure)
// {countPlus : [Function : countPlus], printCount :[Function : printCount]}
countClosure.printCount(); // 0
countClosure.countPlus();
countClosure.printCount(); //1
console.log(count) //Reference Error => 지역변수 count에 접근하지 못하니 당연히 에러비로소 외부의 다른 영향을 받지 않고, 우리가 원하는 방향대로 기능을 동작할 수 있게 되었다!
왜 쓰는데?
전역 변수의 남용을 막을 수 있고 변수 값을 은닉하는 용도로도 사용할 수 있다.
