스코프(Scope) 호이스팅(Hoisting), 클로저(Closure)

하연·2022년 1월 5일
0

HTML/JavaScript

목록 보기
10/10

스코프(Scope):

현재 접근할 수 있는 변수들의 범위, 즉 변수 생존 주기
다르게 말하면 현재 위치에서 볼 수 있는 변수들의 범위라고 볼 수 있다. 자바스크립트는 함수단위로 OUTER 스코프가 생성되기 때문에 스코프가 많아지면 함수 실행이 느려진다.
이런 스코프가 계층적으로 연결되어 있는 것을 스코프 체인이라고 부른다.

스코프 레벨

블록 레벨 스코프
if문, for문, let, const 등
함수 레벨 스코프
자바스크립트에서 var키워드로 선언된 변수나, 함수 선언식으로 만들어진 함수, 즉 함수 내부 전체에서 유효한 식별자가 된다.

호이스팅(Hoisting):

함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것을 말한다. 자바스크립트 함수는 실행되기 전에 함수 안에 필요한 변수값들을 모두 모아서 유효 범위의 최상단에 선언하지만 실제 메모리에는 변화가 없다.
*var 변수 선언과 함수선언문에서만 호이스팅이 일어난다.
-var 변수/함수의 선언만 위로 끌어 올려지며, 할당은 끌어 올려지지 않는다.
-let/const 변수 선언과 함수표현식에서는 호이스팅이 발생하지 않는다.

참고하면 좋은 영상: https://www.youtube.com/watch?v=HsJ4oy_jBx0

클로저(Closure):

특정 함수가 참조하는 변수들이 선언된 렉시컬 스코프는 계속 유지되는데, 그 함수와 스코프를 묶어서 클로저라고 한다. 함수와 함수의 렉시컬 환경의 조합으로 함수가 생성될 당시의 외부 변수를 기억하고 생성 이후에도 계속 접근 가능하다.
렉시컬 스코프
outer스코프 는 동적 스코프와 정적스코프로 나뉜다. 동적 스코프는 함수가 호출되는 시점에 스코프가 결정되는것이고 정적 스코프는 함수가 태어나는, 정의되는 시점에 결정되는 것을 말하는데 이 정적 스코프를 다른 말로 렉시컬 스코프라고 한다.

클로저를 사용하면 메모리를 소모하고 스코프 생성과 이후 변수 조회에 따른 퍼포먼스 손해가 있지만 반복적으로 같은 작업을 할 때, 같은 초기화 작업이 지속적으로 필요할 때, 콜백 함수에 동적인 데이터를 넘겨주고 싶을때 클로저를 사용한다.

0개의 댓글