자바스크립트 클로저 & 스코프 체인

김민지·2020년 9월 21일
0
function outer() {
   var a =1;
   console.log(a);
}

outer();

1이 찍힘
console.log에 a에 무슨 값이 들어있는지 찾아야하는데

무슨 값이 있는지 찾는 곳이 바로 스코프

어떤 변수나 함수명을 가지고 거기 들어있는 값을 찾을 때 들여다보는 곳이 스코프임

그래서 a 값을 찾을 때 a는 함수 outer에 속해있음, 즉 outer의 범위임

자바스크립트는 함수단위로 스코프가 생성됨

스코프의 기본은 함수단위임

두번째 예시로

function outer() {
   var a =1;
   
   function inner(){
    var a=2;
    console.log(a);
    }
    inner();
}

outer();

2가 찍힘

함수단위니까 inner용 스코프가 생겨서 2가 나옴

뭔가 찾을 때 함수단위 실행될때 표를 찾는게 스코프

세번째 예시

function outer() {
   var a =1;
   var b ='B';
   function inner(){
    var a=2;
    console.log(b);
    }
    inner();
}

outer();

b가 찍힘

inner에서 먼저 찾다가 없으니까 b가 없음.
inner가 생성된 곳이 즉 범위가 outer 안에 안에 있으니까
outer에서 찾음

네번째 예시

var d=''X';//글로벌 스코프

function outer() {
   var a =1;
   var b ='B';
   function inner(){
    var a=2;
    console.log(d);
    }
    inner();
}

outer();

d를 찍으니 X가 나옴 var d='X';가 제일 밑에있어도 X찍힘

outer를 선언한 곳은 글로벌임

스코프끼리 연결되어있으니까 이게 스코프체인임


클로져

var d=''X';//글로벌 스코프

function outer() {
   var a =1;
   var b ='B';
   function inner(){
    var a=2;
    console.log(b);
    }
   return inner
}

var someFun = outer();
someFun();

outer가 하는일은 inner function을 리턴하는 것이다.

inner function에서는 b를 출력한다

someFun function은 outer에서 리턴값을 받으니까 inner를 받는거임

outer함수가 실행되는 outer내부에서 선언한 변수는 outer가 실행하는 순간
리턴하고 끝나면 b의 변수는 사라진다라고 생각하는데 근데 여기서는 b가 찍힌다
이게 클로져임 생성한 시점에 스코프체인을 계속 들고있는다는거임
들고있기때문에 그게 일종의 클로져임
클로져때문에 outer가 실행한 다음에도 inner function이 outer에 대한 스코프를 들고있고
글로벌한애도 들고있는거임밖으로꺼낸다음에도 outer가 실행한 다음에도 스코프를 계속 접근할 수 있다

profile
Welcome~!

0개의 댓글