이 글은 아래의 유투브 코드종 채널 영상을 보면서 필기한 내용을 정리한 글입니다.
참조: https://www.youtube.com/watch?v=MbYShFxp-j0
노션에다가 혼잣말하듯 생각나는 대로 정리한 거라... 제 자신한테 하는 반말이 섞여있으니 읽으실 때 기분 나쁘지 않으시기를..
누군가가 만약 읽으신다면..ㅠ
클로저와 스코프체인을 간단하게 이해해보자
스코프체인
function outer(){
let a=1;
console.log(a);//1
}
outer();이 코드를 실행시키면 예상가능하듯 1이 찍힌다.
콘솔에다가 로그를 찍는데, a를찍으래⇒ a에 무슨값이 들어있을까? ⇒ a에 무슨값이 들어있는지 찾는 곳이 바로 스코프다.
일종의 표같은게 그려져있다고 생각하면 편하다
아래는 outer의 스코프
이 표가 바로 스코프. 변수나 함수명을 가지고 거기에 들어있는 값을 찾을 때 들여다보는 곳이 스코프라고 생각하면 편하다
자바스크립트는 함수단위로 스코프가 생성된다고 생각하면 된다
function outer(){
let a=1;
function inner(){
let a=2;
console.log(a);//2
}
inner();
}
outer();찍어보면 2가 찍힌다.
console.log(a)를 할때 저 a가 outer의 a인지 inner의 a인지 알아야하는데..어떻게 판별하느냐?
스코프는 함수단위라고 했잖아, inner용 스코프가 생긴다.
그니까 inner(); 이 실행될때 들여다보는 곳, 표가 스코프다.
즉, inner의 표를 보니까 a가 2네? 그러니까 console.log(a); 했을때 2가 나온다.
function outer(){
let a=1;
let b="B";
function inner(){
let a=2;
console.log(a);//2
console.log(b);//B
}
inner();
}
outer();보면 inner함수 내부에서 console.log(b)를 했다
하지만 inner의 스코프 내부를 들여다보니 b가없네?..
그럼 그 다음에 둘러볼 표가 outer이 된다.
왜냐하면, inner함수가 생성된 곳이 outer함수의 범위 안이기 때문에..
만약 outer 외부에도 어떤 함수가 있다? 그러면 그 함수만의 스코프가 또 있겠지?
만약 위의 예제에서 찾으려는 b의 값이 inner에도 없고 outer에도없고 그 outer을 감싸는 다른 함수에 선언되어있다?
그러면 그 스코프로 연결이 되어서 outer함수를 감싸는 함수의 스코프에서 값을 찾아온다.
스코프끼리 계속 연결되어있잖아? 이게 바로 스코프체인이다!!
정리하려고 보니 설명이 개떡같긴 하다.
클로저란
스코프를 설명할때 작성한 코드를 살짝 수정해보자.
function outer(){
let a=1;
let b="B";
function inner(){
let a=2;
console.log(a);//2
console.log(b);//B
}
return inner();
}
let someFunc=outer();
someFun(); //여기에 inner(); 이 들어있다고 보면 된다.다른 언어의 경우에는, outer()이 실행되는 순간 그 내부에 있는 변수들은 사라진다고 생각한다
하지만 여기에서는 "B"가 찍힌다.
생성한 시점의 스코프체인을 계속 들고있는다.
들고있기 때문에 그게 일종의 클로저고 이 클로저 때문에 outer이 실행된 다음에도 inner은 outer의 스코프를 계속 들고있는거...
약간 말로 클로저를 풀어서 설명하자면, 클로저는 내부함수가 외부함수의 맥락(context)에 접근할 수 있는 것을 가르킨다.
