일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | ||||
4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 | 27 | 28 | 29 | 30 | 31 |
Tags
- CORS
- undeclared
- 서버 사이드 렌더링
- 리액트
- 주소창에 naver 입력시 일어나는 일
- 이벤트 캡처링
- 이벤트 버블링
- 프로미스
- 자바스크립트
- 세션 스토리지
- 얕은 복사
- props와 state 차이점
- MPA
- 변수 생성 단계
- react
- async/await
- 리액트의 생명 주기
- 클라이언트 사이드 렌더링
- 자바스크립트의 클래스
- 로컬 스토리지
- 호이스팅
- 깊은 복사
- 브라우저 렌더링원리
- 자바스크립트 함수
- 스코프 체인
- webpack
- 가상 dom
- CSS
- polyfill
- 실행 컨텍스트
Archives
- Today
- Total
Gapus Dev Blog
[자바스크립트] 실행 컨텍스트 본문
- 실행 컨텍스트
- 코드가 실행되는 환경
- 변수, 함수 선언 등의 정보를 담고있는 레코드
- 레코드는 실행 컨텍스트 스택에 쌓이며, 현재 실행중인 컨텍스트가 무엇인지 추적한다.
- 코드가 실행될 때 단계적으로 생성되며, 실행 컨텍스트 스택에 쌓이고 제거된다.
- 스택의 가장 상단에 있는 실행 컨텍스트가 현재 실행 중인 컨텍스트이다.
- 함수가 호출될 때마다 새로운 실행 컨텍스트가 생성되어 스택에 추가되며,
함수 실행이 완료되면 해당 컨텍스트가 스택에서 제거된다. - 구성 요소
- 변수 객체
- 해당 컨텍스트에서 선언된 변수와 함수 선언이 저장되는 공간
- 이 객체는 실행 컨텍스트가 생성될 때 생성되며, 변수와 함수 선언은
초기화되지만 할당은 이후에 이뤄진다.
- 스코프 체인
- 변수 객체의 리스트로, 현재 컨텍스트의 변수 및 함수를 참조할 수 있는 범위를 낸다.
- 스코프 체인은 실행 컨텍스트가 생성될 때 생성되며, 함수를 실행할 때마다 변경될 수 있다.
- this
- this는 함수를 호출할 때 정해지는 참조 변수로, this가 가리키는 객체를 참조한다.
- this 값은 실행 컨텍스트가 생성될 때 결정되며, 함수 호출 방식에 따라 다르게 동작한다.
- 변수 객체
- 역할
- 변수 및 함수 선언의 호이스팅
- 실행 컨텍스트는 코드 실행 전에 변수와 함수 선언을 미리 처리
- 따라서 코드 내에서 변수와 함수를 선언하기 전에도 사용 가능
- 스코프 체인 관리
- 실행 컨텍스트는 스코프 체인을 생성하여 변수 및 함수에 대한 접근 권한을 제공
- 스코프 체인은 중첩된 함수에서 변수를 찾을 때 사용되며,
변수를 찾을 때까지 상위 스코프로 올라간다.
- 클로저 생성
- 실행 컨텍스트는 클로저를 생성하는 환경을 제공
- 클로저는 함수와 그 함수가 접근할 수 있는 변수의 조합으로,
함수 외부에서 내부 변수에 접근할 수 있게 해준다.
- 변수 및 함수 선언의 호이스팅
- 종류
- 전역 실행 컨텍스트(Global Execution Context)
- 코드의 가장 바깥 영역에서 실행되는 컨텍스트
- 전역 변수와 전역 함수가 포함
- 스크립트가 로드될 때 자동으로 생성되며, 페이지가 닫힐 때까지 유지
- 함수 실행 컨텍스트(Function Execution Context)
- 함수가 호출될 때마다 생성되는 컨텍스트
- 함수가 실행되는 동안 필요한 지역 변수와 매개변수가 포함
- 함수 실행이 끝나면 해당 컨텍스트는 스택에서 제거
- Eval 실행 컨텍스트(Eval Execution Context)
- eval() 함수로 실행되는 코드의 컨텍스트
- eval() 함수는 문자열로 표현된 자바스크립트 코드를 실행할 때 사용
- eval() 함수가 호출될 때마다 해당 컨텍스트가 생성되며, 실행이 끝나면 스택에서 제거
- 현재 보안상의 이유로 권장하지 않는다.
- 전역 실행 컨텍스트(Global Execution Context)
'프론트엔드 > JavaScript' 카테고리의 다른 글
[자바스크립트] CSR (1) | 2023.10.31 |
---|---|
[자바스크립트] 비동기 처리(콜백, 프로미스 , anync/await) (0) | 2023.10.30 |
[자바스크립트] 클로저 (0) | 2023.10.28 |
[자바스크립트] null, undefined, undeclared, NaN (0) | 2023.10.22 |
[자바스크립트] var, let, const 차이점 (0) | 2023.10.22 |