본문 바로가기
TIL

자바스크립트 메모리 관리 // 호이스팅, 스코프 체이닝

by 은지:) 2024. 1. 28.
728x90
반응형

 

 

1. 메모리 생명 주기

 

만들 때 메모리 할당함

할당된 변수나 함수를 읽거나 쓸 때 메모리를 사용함

메모리가 필요 없어지만 메모리에서 해제함

 

c는 메모리 할당 해제 프로그래머가 가넝함 (malloc() free())

자바스크립트는 v8엔진이 알아서 해줌

 

 

2. 힙 // 스택

 

메모리 공간은

 

힙 / 스택 / 일반 영역임

 

원시값은 스택에 저장댐

고정된 메모리를 할당하게 됨 (정적 메모리 할당)

=> 주소값의 경우 스택에 저장되는 거임

=> 실행 컨텍스트로 여기에 해당

 

 

참조값은 메모리 힙에 저장됨

힙은 동적 메모리 할당임

 

 

3. 가비지 컬렉션

 

자바스크립트 엔진이 메모리를 해제하는 방법

컴퓨터는 메모리가 필요한지 결정 못함

-> 자신을 참조하는 객체의 수를 세어서, 참조 카운트가 0이 되면 버림

 

가비지 컬렉션은 메인 스레드에서 발생함

자바스크립트가 실행되지 않는 현상이 있음 => stop-the-world

 

v8엔진은 stop the word 개선하려고

메인 스레드 혼자하던 일을 헬퍼 스레드와 균등하게 나누어 일함

 

 

 

 

 

 

 

 

 

+++++++++++ 실행 컨텍스트

 

 

 

1. 자바스크립트 코드 실행

콜스택에 전역 실행 컨텍스트를 담음

 

2. a함수 실행

a라는 함수를 실행할 때 함수의 a 실행 컨텍스트를 생성해서 콜 스택에 담음

a 안에 있는 b() 를 실행한다면 b 실행 컨텍스트를 생성해서 콜 스택에 담음

 

 

3. 함수 실행 마치면

 

b가 모두 실행되면 b 사라짐

그 다음 a가 실행되고 a가 사라짐

 

모두 다 실행이 되었다면

처음에 담았던 전역 실행 컨텍스트도 사라짐

 

 

*콜 스택은 가장 최근에 추가된 실행 컨텍스트만 활성화됨*

 

 

 

호이스팅이란?

 

console.log(a) // undefined

var a = "test"

console.log(a)// test

 

a 콘솔 찍히는 게 호이스팅임

선언 - 할당 전인데 값이 끌어올려진 것처럼 보이는 거임

 

 

1. 자바스크립트 엔진이 전체 코드 스캔함

2. 변수 같은 정보(선언문)를 실행컨텍스트 어딘가에 미리 기록함

=> 이때 기록해두는 곳이 바로 실행 컨텍스트의 recode 라는 곳임

3. 이때 환경 레코드(recode)에 새로운 식별자 a를 기록함

=> a는 var 이기 때문에 값은 undefined 임

========= 이 과정을 생성 단계라고 함 ===========

 

4. console.log() 실행함

=> 이미 기록한 환경레코드의 a를 보고 기록된 a 값을 참조해서 출력해냄

5. var a = 테스트 할당

=> 이때 환경 레코드에 기록된 a가 있기 때문에 그대로 'test'로 업데이트함

 

만약 const 라면 3 과정에서 초기화하지 않기 때문에 undefined도 안 뜸

const, let은 선언라인 이전에 식별자 참조 안됨.

 

 

console.log(a) // undefined

var a = "test"

이 구역을 일시적 사각지대라고 부름

 

 

선언 : 메모리 공간 확보, 식별자 연결

초기화 : 식별자에 암묵적으로 undefined 값 바인딩함

 

 

===== outer =======

 

 

 

 

실행 컨텍스트 

 

2. lamp = true

1. lamp = false

 

콜 스택 안에 동일한 식별자가 여럿일 때 어떻게 의사결정하는지?

=> 활성화된 레코드 먼저 확인 후 값이 있다면 그걸로 선택함

 

 

1. goto2f 함수 호출 시 함수의 실행 컨텍스트를 생성함

=> 이때 새로 생성된 실행 컨텍스트에 바깥 렉시컬 환경으로 돌아갈 수 있는 outer를 남겨놓음

=> 이렇게 하면 필요한 경우에 바깥 실행 컨텍스트도 참조할 수 있는 환경이 만들어짐

 

2. lamp 호출 시

=> 값을 결정하기 위해 환경 레코드를 봄

=> 현재 활성화된 레코드를 먼저 봄

=> 만약 lamp 가 없다면 차례대로 outer를 타고 전역 레코드까지 감 (가장 아래), 여기까지 없다면 없다고 결론 내리는 거임 (없는 식별자를 참조하려고 했기 때문에 reference error를 내뿜음)

=> 이렇게 타고 타고 찾는 걸 스코프 체인이라고 함

 

 

3. lamp = true

2. lamp = true

1. lamp = false

 

 

예를 들어 이런 형태가 있다면

3층에 있는 true 값을 선택하고 나머지 1,2 층 값은 굳이 찾지 않음

=> 동일한 식별자로 인해 상위 스코프에서 선언된 식별자의 값이 가려짐

=> 이걸 변수 섀도잉 (variable shadowing) 이라고 함

 

 

실행 컨텍스트

 

코드를 실행하는데 필요한 환경을 제공하는 객체임

이런 구조는 es5에서부터 시작함

그 전에는 동적으로 스코프를 하나하나 만들고 연결하는 스코프 체인을 따로 만들어줘야했음

지금은 하나의 컨텍스트로 묶어 놓은 형태임

 

 

 

 

 

 

출처 10분 테코톡

https://www.youtube.com/watch?v=1BoJZqxFYfQ

https://www.youtube.com/watch?v=EWfujNzSUmw

728x90
반응형

'TIL' 카테고리의 다른 글

팩토리 패턴  (0) 2024.02.05
얕은 복사 깊은 복사 다시보기  (0) 2024.01.28
static  (1) 2024.01.28
싱글톤  (1) 2024.01.28
커링  (1) 2023.12.26

댓글