> 웹 프론트엔드 > JS 튜토리얼 > JavaScript는 내부적으로 어떻게 작동하나요?

JavaScript는 내부적으로 어떻게 작동하나요?

Linda Hamilton
풀어 주다: 2025-01-01 08:11:10
원래의
334명이 탐색했습니다.

이 게시물의 목적은 JavaScript가 내부적으로 어떻게 작동하는지 간단한 방법으로 다루어 초보 프로그래머라도 개념을 파악하고 JavaScript 코딩 시 어떤 일이 일어나는지 시각화할 수 있도록 하는 것입니다.
우선, 어려움을 극복하고 논리를 내면화하는 데 집중하고 싶은 질문이 적어도 3개 이상 있습니까?
이러한 질문은 JavaScript가 암시하는 웹 개발자의 취업 면접 중에 물어볼 가능성이 있는 질문이기도 합니다.

1. JavaScript는 어떻게 작동하나요?
2. 동기식과 비동기식의 차이점을 설명해주세요.
3. 아니면 다음 진술을 설명하십시오. JavaScript는 비차단이 가능한 단일 스레드 언어입니까?

사실, 프로그램을 작성하기 위해 JavaScript가 내부적으로 어떻게 작동하는지 알 필요는 없지만, 그 뒤에 무슨 일이 일어나고 있는지 이해하고 작성하고 있는 내용을 느끼기 위해서는 배우는 것이 필수적이며 중요합니다. 통신사에서는 이 사실을 알고 싶어하지 않습니다.

먼저 알아보세요 프로그램이란 무엇인가요? 프로그램은 단순히 컴퓨터에게 무엇을 해야 하고 어떻게 작업을 실행하는지 알려주는 명령 집합입니다. 프로그램은 메모리를 할당해야 합니다. 그렇지 않으면 변수를 가질 수 없으며 컴퓨터에 파일을 저장할 수도 없습니다. 또한 프로그램은 전용 작업을 구문 분석(읽기)하고 실행해야 하며 모든 작업은 메모리에서 발생합니다.

이제 JavaScript에는 각 브라우저가 구현하는 JavaScript 엔진이라는 엔진이 있습니다. 예를 들어 Chrome에서는 V8, Mozilla Firefox에서는 Spider Monkey, Safari 브라우저에서는 JavaScript Core Webkit

이라고 합니다.

다음 이미지는 Google 크롬의 V8 엔진을 보여줍니다.
How JavaScript works underneath the hood?

JavaScript 엔진 내부에서는 어떤 일이 발생하나요?

Chrome의 V8과 같은 JavaScript 엔진은 우리가 작성한 JavaScript 코드를 읽고 이를 브라우저에 대한 기계 실행 가능 명령으로 변환합니다. 위 그림은 메모리 힙 **과 **콜 스택이라는 두 부분으로 구성된 JavaScript 엔진의 일부를 보여줍니다.

메모리 할당은 메모리 힙에서 일어나고, 파싱(읽기)과 실행은 콜 스택에서 일어난다는 점도 알아두는 것이 중요합니다. 이 외에도 프로그램 내 현재 위치를 알려주는 것이 바로 메모리 힙입니다.

JS(JavaScript) 코드로 메모리 힙의 메모리 할당을 살펴보자

const a = 4;  // now we allocated a memory. JS engine is going to remember
// that a has a value of 4. 

const Obj = {a, b, c };  // In memory, variable 'Obj' holds the object {a, b,c}

// The same as on array. the engine will remember values of the array
const Array = [1,2,3,4,5]
로그인 후 복사
로그인 후 복사
로그인 후 복사
로그인 후 복사

그렇다면 위 코드를 전역적으로 선언하면 어떤 문제가 있을까요?

메모리 누수라는 것이 있습니다. 위에서 언급했듯이 변수 선언은 메모리 힙에서 이루어지며 할당할 수 있는 크기가 제한되어 있습니다. 숫자가 아닌 매우 큰 배열, 심지어 사용되지 않는 전역 변수를 계속 선언하면 메모리가 가득 차서 메모리 누수가 발생합니다. 정리하는 것을 잊어버리면 이 메모리 힙이 가득 차서 결국 브라우저가 작동하지 않게 되기 때문에 전역 변수가 나쁘다는 말을 듣게 될 것입니다.

콜 스택은 어떻습니까?

기억해보면 스크립트를 읽고 실행하는 것이 콜스택입니다. 이를 명확하게 하기 위해 코드를 사용해 보겠습니다.

const a = 4;  // now we allocated a memory. JS engine is going to remember
// that a has a value of 4. 

const Obj = {a, b, c };  // In memory, variable 'Obj' holds the object {a, b,c}

// The same as on array. the engine will remember values of the array
const Array = [1,2,3,4,5]
로그인 후 복사
로그인 후 복사
로그인 후 복사
로그인 후 복사

위 코드를 사용하면 call sack이 첫 번째 줄을 읽습니다 console.log(“x”); 호출 스택에 넣으면 JavaScript 엔진은 console.log가 추가되었음을 인식한 다음 이를 호출 스택에 넣고 실행하고 x를 출력합니다. 그런 다음 실행이 완료되면 첫 번째 console.log를 제거하고 두 번째 console.log(“y”)에 배치하고 호출 스택에 추가합니다. y를 실행하고 두 번째 console.log를 제거합니다. 마지막으로 동일한 프로세스를 사용하여 console.log(“z”)를 가져옵니다.

이것은 가장 간단한 데모입니다. 좀 더 복잡한 예를 들어보면 어떨까요? 전형적인 예를 들어보겠습니다:

// Example Call Stak

console.log("x");
console.log("y");
console.log("z");

// Result in browser

// x
// y
// z
로그인 후 복사
로그인 후 복사
로그인 후 복사

이제 호출 스택에 따르면 위 코드에서는 어떤 일이 발생했나요? 위의 코드 블록이 어떻게 실행되는지 살펴보겠습니다.

//콜 스택

함수 example1()이 먼저 실행된 다음 함수 example2()가 호출 스택의 맨 위에 와서 실행되어 있는지 확인한 후 숫자 7을 출력으로 인쇄합니다. 실행할 다른 코드. 이후에는 console.log('7'), example2(), example1()부터 순서대로 호출 스택에서 제거되기 시작하며 이제 호출 스택은 비어 있습니다.

> 우리는 이 말을 기억합니까? JavaScript는 비차단이 가능한 단일 스레드 언어입니다.

단일 스레드호출 스택이 하나만 있음을 의미합니다. 한 번에 한 가지 작업만 수행할 수 있으며 콜 스택도 스택처럼 First In Last Out이라는 점을 강조하는 것이 중요합니다.

다른 언어에는 멀티 스레드라고 하는 많은 호출 스택이 있을 수 있는데, 작업을 계속 기다리지 않도록 여러 호출 스택을 갖는 것이 더 유리할 수 있습니다.

> 그런데 왜 JavaScript는 단일 스레드로 설계되었습니까?

이 질문에 답하려면 멀티 스레드 환경에서 발생하는 복잡한 시나리오가 없기 때문에 일반적으로 단일 스레드에서 코드를 실행하는 것이 매우 쉬울 수 있습니다. 실제로 신경 써야 할 것이 하나 있습니다. 멀티 스레드에서는 교착 상태와 같은 문제가 발생할 수 있습니다. 이 이론을 통해 우리는 동기 프로그래밍의 의미가 무엇인지 쉽게 알 수 있습니다.

동기 프로그래밍은 간단히 말해서 코드의 첫 번째 줄이 실행되고 두 번째 줄이 이어지며 세 번째 줄이 실행되는 등을 의미합니다.

좀 더 명확하게 말하면 console.log(“x”)가 끝나고 console.log가 완료될 때까지 console.log(“y”)를 실행할 수 없다는 뜻입니다. (“z”)호출이기 때문에 처음 두 개가 끝날 때까지 시작되지 않습니다. 쌓다.

프로그래머는 stackoverflow.com 사이트를 사용할 가능성이 높습니다. 이름은 무엇을 의미합니까? 잘. 보자:

How JavaScript works underneath the hood?
Stack Overflow가 발생하는 방식

위 이미지는 메모리 누수가 어떻게 발생하고 JavaScript 엔진의 메모리 힙이 오버플로될 수 있는지 보여줍니다. 여기서 호출 스택은 크기보다 더 큰 입력을 많이 받아 오버플로됩니다.

코드의 도움으로 스택 오버플로를 시연할 수 있습니다.

const a = 4;  // now we allocated a memory. JS engine is going to remember
// that a has a value of 4. 

const Obj = {a, b, c };  // In memory, variable 'Obj' holds the object {a, b,c}

// The same as on array. the engine will remember values of the array
const Array = [1,2,3,4,5]
로그인 후 복사
로그인 후 복사
로그인 후 복사
로그인 후 복사

JavaScript는 한 번에 하나의 문만 실행되는 단일 스레드라는 점에 유의하세요. 여기에 문제가 있습니다. 다음 코드 블록의 console.log(“y”)에 더 오랜 시간이 걸리는 큰 작업이 있으면 어떻게 될까요? 예를 들어 수천 또는 수백만 개의 항목이 있는 배열을 반복하면서 실행됩니까? 거기서 무슨 일이 일어날까요?

// Example Call Stak

console.log("x");
console.log("y");
console.log("z");

// Result in browser

// x
// y
// z
로그인 후 복사
로그인 후 복사
로그인 후 복사

첫 번째 줄이 실행되고 두 번째 줄에 수행할 작업이 많다고 가정하므로 세 번째 줄은 실행되기까지 오랜 시간이 걸립니다. 위의 예에서는 큰 의미가 없지만, 무거운 작업을 수행하는 대규모 웹사이트를 생각해 보면 사용자는 아무것도 할 수 없습니다. 웹사이트는 작업이 완료되고 사용자가 그곳에서 기다릴 때까지 정지됩니다. 공연에 있어서는 안 좋은 경험이에요.

음, 동기식 작업의 경우 시간이 많이 걸리는 기능이 하나 있다면 그 기능이 버틸 것입니다. 따라서 비차단 기능이 필요한 것 같습니다. 위에서 언급한 내용을 기억하세요. JavaScript는 비차단이 가능한 단일 스레드 언어입니다.

이상적으로는 JavaScript에서는 시간이 걸리는 일을 기다리지 않습니다. 그렇다면 이 문제를 어떻게 해결할 수 있을까요?

구원으로는 비동기 프로그래밍이 있습니다. 그럼 이게 뭔데?

비동기를 동작처럼 생각하세요. 동기 실행은 예측 가능하기 때문에 훌륭합니다. 동기식에서는 먼저 무슨 일이 일어나는지, 다음에 무슨 일이 일어나는지 등을 알지만 속도가 느려질 수 있습니다.

이미지 처리나 API 호출과 같이 네트워크를 통한 요청과 같은 작업을 수행해야 할 때 우리는 비동기식인 동기 작업 이상의 것을 사용합니다.

코드를 사용하여 비동기 프로그래밍을 수행하는 방법을 살펴보겠습니다.

const a = 4;  // now we allocated a memory. JS engine is going to remember
// that a has a value of 4. 

const Obj = {a, b, c };  // In memory, variable 'Obj' holds the object {a, b,c}

// The same as on array. the engine will remember values of the array
const Array = [1,2,3,4,5]
로그인 후 복사
로그인 후 복사
로그인 후 복사
로그인 후 복사

이제 위 코드를 토대로 보면 두 번째 줄을 건너뛰고 세 번째 줄을 실행하고 3초 동안 기다렸다가 결과를 출력한 것처럼 보입니다. 이는 비동기적으로 발생합니다.

이와 무슨 일이 일어났는지 이해하기 위해 다음 그림을 활용해 보겠습니다.

How JavaScript works underneath the hood?
JavaScript 런타임 환경

JavaScript를 실행하려면 메모리 힙과 콜 스택 이상의 것이 필요합니다. 브라우저의 일부인 JavaScript Run-Time이 필요합니다. 브라우저에 포함되어 있습니다. 엔진 위에는 그림과 같이 웹 API, 콜백 큐이벤트 루프가 있습니다.

이제 setTimeout 함수를 사용하는 코드에 대해 논의해 보겠습니다.

// Example Call Stak

console.log("x");
console.log("y");
console.log("z");

// Result in browser

// x
// y
// z
로그인 후 복사
로그인 후 복사
로그인 후 복사

setTimeout 함수는 JavaScript의 일부가 아닌 웹 API의 일부입니다. 대신 비동기 프로그래밍을 수행할 수 있도록 브라우저에서 제공하는 함수입니다. 그럼 이해를 돕기 위해 좀 더 자세한 내용을 알려드리겠습니다.

CALL STACK: console.log(“x”)가 호출 스택으로 들어가 실행되고 console.log가 브라우저에 기록됩니다. 그 후, setTimeout(() =>{console.log(“y”);},3000); 첫 번째 작업이 완료되었으므로 호출 스택에 들어간 다음 두 번째 작업으로 이동합니다.

이제 코드를 읽는 동안 호출 스택이 setTimeout 함수가 설정되어 있고 이는 JavaScript의 일부가 아니라 웹 API의 일부임을 감지합니다( JavaScript Run-Time Environment 그림을 참조하세요. 특별한 특징이 있습니다. setTimeout이 WEB API를 트리거하고 Web API에 알림이 전송되므로 해당 함수가 호출 스택에서 제거됩니다.

이제 웹 API는 3초 안에 작업을 수행해야 한다는 것을 알고 3초 타이머를 시작합니다. 여기서 기억하세요. 호출 스택이 비어 있기 때문에 JavaScript 엔진은 console.log("z")인 3번째 줄을 계속 진행합니다. 실행해 보세요. 이것이 x,z 결과를 ​​얻었지만 웹 API에는 setTimeout이 3초인 이유입니다. 그런 다음 3초 후에 제한 시간이 지나면 setTimeout이 실행되어 그 안에 무엇이 있는지 확인하고 완료됩니다. 작업이 완료되면 웹 API는 setTimeout의 callback() 함수가 있음을 인식하고 이를 실행할 준비가 된 CALLBACK QUEUE에 추가합니다.

마지막 부분인** EVENT LOOP*에 이르렀습니다. 이것은 호출 스택이 비어 있는지 항상 확인합니다. 비어 있고 현재 JavaScript 엔진에서 실행 중인 항목이 없으면 콜백 대기열을 확인하고 console.log(“z”)를 사용하여 **callback()* 함수를 찾은 다음 CALL STACK에 넣으면 실행됩니다. 완료되면 호출 스택에서 팝합니다. 이제 모든 것이 비어 있고 x z y 결과를 얻습니다.

결론: 이 게시물에서 우리는 동기식 및 비동기식으로 수행되는 두 작업 모두 JavaScript 논리를 완전히 이해하기 위해 내부적으로 어떤 일이 발생하는지에 대한 많은 정보를 확인했습니다.

이 내용이 고급 로직을 이해할 때 시작하는 기초이기 때문에 신규 및 고급 JavaScript 프로그래머가 ReactJS 또는 AngularJS와 같은 JavaScript 관련 프레임워크에서 코딩을 즐기는 데 도움이 되기를 바랍니다.

> 즐거운 코딩

참고자료

https://www.freecodecamp.org/news/how-javascript-works-behind-the-scenes.
https://www.simplilearn.com/tutorials/javascript-tutorial/callback-function-in-javascript#

위 내용은 JavaScript는 내부적으로 어떻게 작동하나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:dev.to
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿