본문 바로가기
Front-End/JavaScript

클로저(Closure)

by kk님 2023. 4. 5.

코딩앙마: 자바스크립트 중급 강좌 #11 클로저(Closure) 5분만에 이해하기

 

클로저

: 함수와 렉시컬 환경의 조합. 함수가 생성될 당시의 외부 변수를 기억. 생성 이후에도 계속 접근이 가능하다.

function makeAdder(x){
    return function(y){
        return x+y;
    }
}

const add3 = makeAdder(3);
console.log(add3(2));

const add10 = makeAdder(10);
console.log(add10(5));
console.log(add3(1));

add3과 add10은 동일하게 makeAdder()함수를 참조하지만,

makeAdder(10)을 호출한 이후에도, add3에는 아무런 변화가 없다.

add10과 add3은 서로 다른 환경을 갖고 있는 것

 

add3 함수가 생성된 이후에도 상위 함수인 makeAdder의 x에 접근 가능

 

function makeCounter(){
	let num = 0;
    
    return function (){
    	return num++;
    }
}

let counter = makeCounter();

console.log(counter()); //0
console.log(counter()); //1
console.log(counter()); //2

임의로 num을 100 등으로 바꿀 수 없음

 

은닉화에 성공.