JavaScript는 어떻게 작동합니까?

더 깊이 들어가 브라우저 엔진 내에서 JavaScript 실행을 이해해 봅시다.

우리 모두 알다시피 JavaScript는 고급 기능과 비차단 이벤트 루프 동시성 모델을 갖춘 고급 프로토타입 기반 객체 지향, 해석 또는 JIT(Just-In-Time) 컴파일, 단일 스레드 프로그래밍 언어입니다.

그리고 그것은 날이 갈수록 점점 더 인기를 얻고 있습니다. 이 기사는 JavaScript와 그것이 실제로 어떻게 작동하는지 더 깊이 파고드는 것을 목표로 합니다.

개요

이 블로그 게시물은 초보자에게 친숙하며 숙련된 JS 개발자에게도 유용합니다.
이러한 모든 개념을 자세히 살펴보고 JavaScript가 실제로 실행되는 방식을 설명합니다.

이 게시물에서는 실행 컨텍스트(메모리 생성 단계 및 코드 실행 단계), CallStack 실행 및 JavaScript 엔진 및 런타임 환경에 대해 설명합니다. 또한 이벤트 루프 및 스택 흐름의 개념을 이해합니다.

이것은 스크립트 실행과 관련된 모든 핵심 구성 요소에 대한 개요 연습입니다.
여기서는 다음 구성 요소에 대해 설명합니다.

1. 자바스크립트 엔진.
2. JavaScript 런타임 환경.
3. 실행 컨텍스트.
4. 호출 스택 실행 및 스택 흐름.
5. 이벤트 루프.

이전에 들었듯이 JavaScript는 해석된 프로그래밍 언어 입니다. 이는 소스 코드가 실행되기 전에 바이너리 코드로 컴파일되지 않음을 의미합니다.
즉, 한 줄씩 실행 되지만 100% 사실은 아닙니다.
JS는 JIT(Just In Time) 컴파일 언어입니다. 이 현대적인 동작은 웹 애플리케이션에서 빠르게 만듭니다. 그렇지 않으면 해석된 유형에 따라 애플리케이션 렌더링 속도가 느려집니다. 따라서 JS는 JIT(Just-in-time) 컴파일 언어라고 생각합니다.

JavaScript 엔진은 단순히 JavaScript 코드를 실행하는 컴퓨터 프로그램입니다. JavaScript 엔진은 오늘날 모든 최신 브라우저에 내장되어 있습니다.

좋아요 : (몇 가지 엔진이 있습니다.)
# V8은 Chrome용 JavaScript 엔진입니다.
# 모질라 파이어폭스용 거미원숭이.
# Microsoft Edge용 차크라.
# Safari 등을 위한 JavaScript 코어.

우리가 알고 있듯이 Chrome 브라우저 엔진 "V8"은 JavaScript에 매우 인기가 있으며 두 가지 주요 구성 요소
로 구성 됩니다 . 저장됩니다.

그쪽으로 JavaScript 런타임 환경(JRE):

JS 엔진에 대해 논의했지만 JS 엔진은 다른 구성 요소와 함께 JRE 내에서 실행됩니다. 일부 비동기 요청 및 호출과 같습니다.
구성 요소는 다음과 같이 나열됩니다.

1. JS 엔진
2. 웹 API
3. 콜백 큐 또는 메시지 큐
4. 이벤트 루프

JS 코드가 실행되면 전역 실행 컨텍스트(GEC) 가 생성됩니다.
이 실행은 2단계로 생성됩니다.
1: 메모리 생성 단계 및
2: 코드 실행 단계.

예를 들어보자 ;

위 코드 스니펫의 경우
먼저 GEC가 생성 되고 메모리 단계 가 생성되고 모든 변수에 대해 정의되지 않은 값을 할당하고 전체 함수 블록 {} 을 메모리 공간에 fnxn 값으로 넣습니다.

둘째, 이제 2단계, 즉 코드 실행 단계 에서 전체 코드를 한 줄씩 검토하기 시작합니다.
그리고 var a = 3을 찾았으므로 정의되지 않은 변수에 3을 할당 하고 다음 줄로 이동하여 정의되지 않은 b 변수에 4를 할당합니다. 이제 함수 add()를 위해 다음 줄로 이동합니다. 실행할 것이 없으므로 동일하게 유지하고 var c에 대해 다음 줄로 이동합니다.

이 줄에서 새 실행 컨텍스트가 생성되고, 함수 add(3,4)에 대한 로컬 실행 컨텍스트 로 이름이 지정되고 이제 다시 2단계가 생성됩니다. 메모리 생성 단계
의 경우 변수 num1, num2 및 결과에 대해 정의되지 않음 을 할당합니다 . 그런 다음 코드 실행 단계 에서 add()의 함수 블록 { }에서 한 줄씩 시작합니다. num1에 3을 할당하고 num2에 4를 할당 한 다음 var 결과 = num1+num2에 대해 할당하고 결과 변수에 7을 할당합니다. 그 후 결과를 반환하고 실행 제어는 var c = 7 에서 9행으로 돌아갑니다 .

return 키워드를 만나면 호출된 줄로 컨트롤을 반환하고 함수 실행 컨텍스트도 삭제합니다.
다음 줄인 10줄로 이동합니다. c의 값을 콘솔로 출력합니다.

이것은 실행 컨텍스트가 실제로 장면 뒤에서 작동하는 방식입니다.

Javascript는 Call Stack 의 도움으로 코드 실행 컨텍스트 생성 및 삭제를 관리합니다 ( 나중에 Call Stack에서 설명하겠습니다 ) .

호출 스택:

호출 스택은 실행 컨텍스트 의 실행 순서를 유지합니다 . 프로그램 스택, 제어 스택, 런타임 스택, 머신 스택, 실행 컨텍스트 스택이라고도 합니다.
그리고 우리는 JS가 단일 스레드 프로그래밍 언어 라는 것을 알고 있습니다 . 즉, 단일 스택을 가지며 한 번에 한 줄씩 실행됩니다.

위의 코드 참조를 사용하여 동일한 코드 스니펫에 대해 호출 스택이 작동하는 방식을 설명합니다.

여기에서 GEC가 생성되어 스택에 들어간 다음 다음 로컬 실행 컨텍스트가 스택에 들어온 다음 실행 후 튀어나와 GEC로 돌아갑니다.
그런 다음 console.log(c)가 팝 인되고 실행 후 팝 아웃된 다음 다시 GEC로 핀터링합니다.
그 실행이 완료된 후 GEC도 스택에서 팝 아웃되고 스택은 IDLE 조건으로 비어 있게 됩니다.

이벤트 루프:

JavaScript 언어는 동기식과 비동기식의 두 가지 방식으로도 볼 수 있습니다.

동기식 JS에서 코드는 한 줄씩 실행됩니다. 즉, 순차적인 방식을 의미합니다. &
비동기식 JS에서는 아무 것도 순차적이지 않습니다. 즉, 한 줄의 코드가 무시되고 주로 웹 API로 알려진 동작에 따라 나중에 실행됩니다.

따라서 이벤트 루프는 콜백 큐가 있는 비동기 부분을 처리하는 데 사용되며 스택이 비워질 때까지 기다린 다음 실행을 위해 스택으로 보냅니다.

이벤트 루프는 메인 스택이 비어 있는지 지속적으로 확인하는 JS의 기능입니다. 그리고 비어 있으면 Callback Queue를 확인합니다. 큐에 실행할 코드가 있으면 하나씩 호출 스택으로 전송됩니다. 코드가 실행된 후 스택을 떠나고 대기열이 비워질 때까지 대기열의 다음 코드가 나타납니다.

얘들아 일을 마무리하고 다음 게시물에서 만나자…