[공부 필기] JavaScript 문법 공부 3일차 (1)

※ 필자는 자바스크립트 초보자입니다

※ 피드백/잘못된 사항 지적은 언제든지 환영합니다

 

---

 

왜 다시 공부를 시작했는지 등은 이전 글을 참고

2022.02.19 - [2. 개발 공부/JavaScript] - [공부 필기] JavaScript 문법 공부 1일차

[공부 필기] JavaScript 문법 공부 1일차

 

1. 이 글은 이렇게 작성될 계획..

너무 좋은 자료(https://ko.javascript.info/)에, 너무 좋은 필기들, 너무 좋은 댓글들이 이미 있기 때문에

별도로 필기를 하며 공부하지는 않고 그냥 글을 쭉쭉 읽어가면서

더 추가적으로 공부한 내용이나, 개인적으로 필기해놓고 싶은 내용, 실습해보기 위해 작성해본 소스코드 등만 본 글에 필기할 계획이다.

2. 사담

왜 티스토리에는 템플릿 복제 같은 기능이 없을까.

본 자바스크립트 필기글 같은 경우 매번 비슷한 템플릿으로 글을 쓰고 있는데, 복사해서 오려니 귀찮기 짝이 없다.

차라리 노션(notion)처럼 복제라도 가능했으면 좋겠다.

(이 참에 노션으로 옮겨가야하나)

 

어쨌든 저번에 자바스크립트 엔진의 동작 원리에 대해서 아주 간단하게 공부를 했으니

이번에는 자바스크립트 엔진을 구성하는 요소인 memory heap과 call stack에 대해서 서칭하고 공부하며 필기를 해보려고 한다.

---

- 자바스크립트 엔진의 memory heap과 call stack

이전 글에서 자바스크립트 엔진을 구성하는 요소에는 memory heap, call stack이 있다고 배웠다.

그 외 parser, compiler, interpreter 등도 있다고 배웠었다.

 

parser, interpreter 등은 이해했는데, memory heap과 call stack은 아직 이해하지 못해서 이 부분을 많이 공부하려고 한다.

 

공부할 때 참고한 자료는 아래의 글들이다.

(항상 능력 좋은 분들의 잘 정리된 글을 통해 공부할 수 있어서 영광입니다)

 

참고한 글1:

https://soldonii.tistory.com/53

자바스크립트 런타임 : 콜스택과 메모리 힙

 

memory heap은 변수, 함수 등을 저장하거나 호출하는 등 작업이 발생하는 공간이라고 한다.

   변수를 저장할 때도 메모리 힙(memory heap)이라는 공간에 저장되고, 함수가 저장될 때도 마찬가지이다.

   만약 함수를 호출하거나 하는 등 저장한 데이터를 불러와야 하는 일이 생긴다면

   자바스크립트 엔진이 메모리 힙에 저장된 주소를 전달해주는 듯 하다.

   개념만 보기로는 C언어에서 메모리(스택, 힙)에 데이터가 저장되고, 호출할 때는 주소값을 가져오는 것처럼

   그와 비슷한 공간인 듯 하다.

 

call stack은 코드를 한줄씩 읽어 내려가면서 수행할 작업들을 밑에서 부터 하나씩 쌓는다고 한다.

   콜스택이 가장 생소한 개념이다.

   위의 글에서 말하기로는 '메모리에 존재하는 공간 중 하나'인데

   '코드를 읽어내려가면서 수행할 작업들을 밑에서 부터 하나씩 쌓고, 메모리 힙에서 작업 수행에 필요한 것들을 찾아서 작업을 수행하는 공간'이라고 한다.

   메모리 중에서도 스택(stack)과 비슷한 개념인 것 같다.

   위의 '참고한 글1'을 보면 예시 코드와 함께 설명을 해주시는데, 읽으면 이해를 하는데 큰 도움이 된다.

 

 

즉, 콜스택에는 수행할 작업들이 아래에서부터 차곡차곡 쌓이는데

콜스택에 쌓인 작업을 하나씩 수행할 때는 메모리 힙에서 필요한 데이터(변수 등)를 찾아서 작업하는 것으로 보인다.

작업이 완료되면 콜스택에서 하나씩 제거되는 것을 보면 마치 선입후출 방식과 유사한 듯 하다.

 

또한 자바스크립트도 스택 오버플로우가 발생할 수 있다고 한다.

   콜스택의 공간이 유한하기 때문에 콜스택에 작업이 계속 쌓이고 쌓이고 쌓여서 크기를 넘어가는 경우를 말한다고 한다.

 

이 콜스택과 메모리 힙의 공간을 효율적으로 쓰기 위해 가비지 컬렉터(Garbage Collector)가 특정 역할을 수행한다고 한다.

   가비지 컬렉터(Garbage Collector)는 더이상 사용하지 않는, 사용이 종료된 데이터를 메모리 힙(memory heap)에서 제거하는 역할을 한다고 한다.

   자세한 내용은 글을 더 읽어보자.

   https://soldonii.tistory.com/53

자바스크립트 런타임 : 콜스택과 메모리 힙

더 심화하여 공부하면 좋겠지만 아직 자바스크립트 문법도 떼지 않은 상황에서 공부해봤자 이해도 못할 것 같다.

그래서 이렇게만 공부하고 넘어가기로 했다.

 

글이 길어지니까 자바스크립트 엔진에 대한 공부는 이 글을 끝으로 마치고

이제 정말 자바스크립트 문법(syntax)을 공부하러 가야겠다.

 

---

3. 마무리

사실 자바스크립트가 이렇게 많은 개념과 원리를 이해해야하는 언어인 줄 몰랐다.

초보자가 익히기에도 쉬운 언어라고 해서 너무 쉽게 생각했던 것 같다.

크게 반성해야할 듯..