[JS] 클로저 closure

·2022년 10월 11일
0

JavaScript

목록 보기
14/25

closure

중단하다 ,폐쇄하다

자스에는 함수 스코프가 있고, 함수 내부에서 정의된 변수라면 함수 어느 부분에서든 접근할 수 있다
내부 함수에서 자신을 포함하는 외부 함수의 스코프에 접근할 수 있다

let outer = function(){
	let a = 1;
let inner = function(){
	let b = 5;
	let c = 6;
	a = a + b + c;
	console.log(a);
};
	inner();
}
outer();
// 12

inner 함수는 자기 상위의 부모 함수에 접근할 수 있는 권한이 있다

내부 함수가 외부 함수보다 오래 살아있는 경우, 외부 함수에 있던 변수들은 어떻게 되지?

let outer = function(){
	let a = 1;
let inner = function(){
	let b = 5;
	let c = 6;
	a = a + b + c;
	console.log(a);
};
	return inner;
}
let newInner = outer();
newInner();

newInner 함수 실행 -> outer 함수 실행 -> outer 함수의 실행 결과는 return inner;
inner는

function(){
	let b = 5;
	let c = 6;
	a = a + b + c;
	console.log(a);

이 함수
결국 newInner(); 함수가 실행된다는 것은 inner 함수가 실행된다는 것과 같다!
그러니 실행 결과 // 12

이너 함수가 뉴이너 함수라는 변수에 실려서 나중에 실행이 된다
newInner 함수 실행 -> outer 함수 실행 -> return inner;함수 실행
outer 함수에서 return inner 함수를 바깥으로 내보낸 순간 outer 함수는 파괴되고 함수의 생명이 끝나게 됨
그 다음 inner 함수가 실행됨
이게 바로 내부 함수가 외부 함수보다 오래 살아있는 경우! 외부 함수에 있던 변수들은 어떻게 되지?
여기선 외부 함수에 있던 변수라 함은 a = 1;
돌려봤는데 결과값이 잘 나왔었지? 즉 a값에 접근할 수 있었다
inner는 outer가 이미 반환된 후에도 outer의 a에 대한 접근 권한을 가진다
함수는 자신을 포함하는 함수의 스코프에 접근할 수 있기 때문
비록 outer 함수가 실행되어 메모리에서 해제되었음에도 a는 메모리에서 해제되지 않았다
클로저 : 폐쇄된 공간에 대한 접근 권한을 가진 함수
이러한 특징을 이용해 비공개 데이터를 가진 객체를 만들 수 있다

let person = (function(){
	let age = 10;
    return {
    name : "kon",
    getAge : function(){
    console.log(age);
    return age;
    },
    setAge : function(val){
		age = val;
        console.log(age)
        }
   };
})();

person이라는 즉시 실행 함수를 만들기 위해 () .. 완성되자마자 실행
person.getAge(); // 10
person.setAge(20); // 20
person.age = 30;
person.getAge(); // 10 (객체 접근 방식으로 age에 30을 세팅했는데 초깃값이 나오네 ..! age에 접근하려면 getAge, setAge 함수를 통해서만 age 변수에 접근할 수 있다)

  • 자스는 내부 함수에서 자신을 포함하는 외부 함수의 스코프에 접근할 수 있다
  • 내부 함수가 살아있는 상태에서 외부 함수가 파괴되면 외부 함수의 변수들에 대한 접근 권한은 오직 내부 함수만 가지게 된다
  • 이렇게 폐쇄된 공간에 대한 접근 권한을 가진 함수가 클로저!
profile
주니어 프론트엔드 웹 개발자 🐛

0개의 댓글