🔴 자바스크립트 메모리
◾ 자바스크립트는 웹 브라우저에서 사용되는 언어로써
C++기반으로 구현된 Google V8 엔진으로 구현되어 있다.(거의 대표적으로) 자바스크립트는 이 엔진을 통해 콜스택과 메모리힙이라는 메모리 구조를 통해 데이터 관리 및 실행을 한다. 자바스크립트와 메모리 구조에 대해서 자세하게 알아보자!
✔ 자바스크립트 엔진 동작 원리
자바스크립트는 콜스택과 메모리힙이라는 메모리 구조를 통해 데이터가 관리한다.
-메모리 힙 : 메모리 할당이 일어나는 곳
-콜 스택 : 코드 실행에 따라 호출 스택이 쌓이는 곳
✔ 호출 스택
자바스크립트는 작업을 싱글스레드로 처리한다. 스택에 쌓인 함수나 코드를 위에서부터 아래로 차례로 실행한다. 차례로 실행하므로 하나의 작업이 끝날 때까지 또 다른 작업을 실행하지 않는다.
function first(){
second();
console.log("first");
}
function second(){
third();
console.log("second");
}
function third(){
console.log("third");
}
first() //first함수 호출 first함수가 호출되고 first함수 안에 scond함수가 호출되고, 마지막에 third가 호출된다. 그러므로
main() 함수는 처음 실행시 전역 컨텍스트이다. third, second, first, main 순으로 pop되고 main까지 실행완료되면 스택이 비워진다.
출력하면 third > scecond > first순으로 실행되는것을 알 수 있다.
✔ 자바스크립트 런타임
자바스크립트 엔진 밖에서 자바스크립트에 관여하는 요소들이 있다. 비동기처리되는 요소들인것이다.(DOM, AJAX, SetTimeout) 이런 비동기로 호출되는 함수들은 스택에 쌓이지 않고 테스크 큐로 보내진다.
console.log("A")
setTimeout(function() {
console.log("B")
}, 0);
console.log("C");위의 코드는 동기처리 과정에서 A를 먼저 출력하고 B를 출력하는 것이 아니라 C를 출력한다. setTimeout으로 인해 비동기 처리되어 예약하는 처리만 하고, 그 다음 바로 코드가 실행되기 때문이다.
이와 같이 비동기처리를 쓰는이유는 클라이언트가 서버에 API 등을 통해 데이터 요청을 했을 때 서버가 언제 그 요청에 응답을 할지 모르기 때문에 동기적으로 실행되던 코드를 중간에 멈추고 기다릴 수 없기 때문에 비동기처리는 꼭 필요하다.
✔ 콜스택, 메모리힙의 데이터 구조
-변수a는 10이라는 값이 원시값으로 콜스택에 저장된다.
10이 저장된 공간에 메모리의 주소값이 저장되는 것이다.
원시값을 변경하지 못하기 때문에 변수를 재할당을 통해 변경한다.
-변수b,c,d는 참조타입 데이터이다.
배열,객체,함수 등은 참조타입으로 메모리 힙에 저장된다.
참조값은 재할당을 하지않고도 값 변경이 가능하다.
지금까지 자바스크립트의 기본적인 동작원리와 함께 메모리구조를 간단하게 알아보았다. 다음에는 자바스크립트에서의
동기와 비동기
에 대해 알아보도록 하자!
👍올바른 피드백은 언제든지 환영입니다~!
