궁금한 내용을 검색해보세요!
이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
서근 개발노트
티스토리에 팔로잉
FRONT-END/TIL

[TIL] 230125 Scope

서근
QUOTE THE DAY

-
Written by SeogunSEOGUN

반응형

스코프 Scope

식별자가 유효한 범위를 나타냄. (식별자 : 변수, 함수, 클래스 이름)

즉, 변수나 함수나 클래스 이름이 어디까지 유효한지 나타내는 범위 영역이다.

 

선언된 위치에 따라 유효 범위가 결정된다.

 

스코프 밖에서는 스코프 내부에 있는것을 접근할 수 없지만, 스코프 내부에서는 외부에 있는 부모 데이터를 접근할 수 있다. (스코프 체인을 통해)

{
    // 블럭 안의 변수는 블럭 안에서만 유효
    // 블럭 안에서 a라는 변수를 생성했다면, 블럭 밖에서는 참조 하지 못한다.
    // ( 이름 충돌 방지 및 메모리 절약 )
}

변수는 최대한 필요한 곳에서 정의를 해야한다.

Garbage Collection

프로그램은 원래 개발자가 직접 메모리 관리(메모리 청소)를 해야 한다. 메모리 관리를 제대로 하지 않으면 앱이 죽을수도 있기 때문!

 

반면 JS에서는 메모리 관리를 관리자가 직접 할 필요없고 다쓴 메모리도 알아서 청소해준다.

 

바로 내장되어있는 Garbage Collector(GC)가 있기 때문! 그렇다고 아무렇게나 프로그래밍 하면 안된다. 메모리가 잘 관리 되는지, 그리고 청소가 잘 되고있는지를 꼭 확인해야 한다.

 

그 누구도 Oject를 참조하고 있지 않을 때 GC가 나타난다. GC는 주기적으로 누가 Object를 참조하고 있는지 확인하는데, 아무도 참조하고 있지 않다면, 더이상 필요하지 않다고 판단하고 메모리에서 깔끔하게 청소를 해준다.

 

즉, 자바스크립트에서 엔진 백그라운드 프로세스는 Garbage Collection!

 

불필요한 메모리를 너무많이 만들거나 재할당 하지말고 필요한 만큼 쓰는것이 가장 중요하다.

실행 컨텍스트 Execution Context

코드의 실행 순서와 스코프를 기억하자!

CleanShot 2023-01-25 at 08 24 34

  • 전역에 선언된것 : 전역 스코프
  • 블럭 내부에 선언된 것: 블럭1스코프 / 블럭2스코프 ...

각각의 블록은 Lexical Environtment 라는 내부 오브젝트를 가지고 있다. 그래서 각각 블럭마다 어떤 변수들을 가지고 있는지, 부모는 누구인지 모든 정보를 가지고 있는 오브젝트가 존재한다. 이것을 렉시컬 환경 이라 칭함.

 

렉시컬 환경 내부에는 두가지 종류로 나뉘게 된다,

  1. 환경 레코드 Environment Record : 블럭 마다 어떤 변수들을 가지고 있는지를 파악
  2. 외부 환경 참조 Outer Lexical Environment Reference: 부모가 누구인지를 파악

CleanShot 2023-01-25 at 08 31 24

실행 컨텍스트의 스택의 과정을 보자면

 

전역 렉시컬 환경 실행 (여기서 외부 렉시컬 환경 참조는 null) ➜ 블럭1 렉시컬 환경 실행 (전역 렉시컬 환경을 참조함 - 스코프 체인이라 칭함) ➜ 블럭2 렉시컬 환경 실행 ➜ 블럭이 끝나면 역순으로 스택에서 빠지게 됨 ➜ 전역이 다 끝나면 스택에 아무것도 남아있지 않음.

 

CleanShot 2023-01-25 at 08 39 15

주의할 점은, 각 렉시컬 환경의 어떤 레코드가 있는지 즉, 변수가 들어있는지 파악을 한다.  그런데 존재하지 않은 변수에 접근을 한다면, 바로 상위에 있는 부모 렉시컬 환경에서 변수를 찾아 검사한다.

 

이를 통해 메모리 절약 뿐 아니라, 성능을 위해 변수는 최대한 필요한 스코프 안에서 정의해야한다는것을 알 수 있다.

 

 

GitHub - Seogun95/JAVASCRIPT_GRAMMAR

Contribute to Seogun95/JAVASCRIPT_GRAMMAR development by creating an account on GitHub.

github.com

 

'FRONT-END > TIL' 카테고리의 다른 글

[TIL] 230126 동기, 비동기, 콜백  (1) 2023.01.26
[TIL] 230126 This, Closure  (1) 2023.01.26
[TIL] 230124 built-in  (0) 2023.01.25
[TIL] 230123 class #1  (0) 2023.01.24
[TIL] 230122 String, toString  (0) 2023.01.23

잘못된 내용이 있으면 언제든 피드백 부탁드립니다.


서근


위처럼 이미지 와 함께 댓글을 작성할 수 있습니다.