{"componentChunkName":"component---src-templates-blog-post-js","path":"/JavaScript/callStack_memoryHeap/","result":{"data":{"site":{"siteMetadata":{"title":"Progress Not Perfection","author":"Sunmin","siteUrl":"https://sunmin.netlify.com","comment":{"disqusShortName":"","utterances":"Sunmin0520/blog"}}},"markdownRemark":{"id":"6b79179e-89e0-582b-be57-5b9bea0d60dc","excerpt":"콜스택, 힙 V8 엔진을 비롯한 대부분 JS엔진은 메모리힙(메모리할당 이루어짐)과 콜스택으로 구성 콜스택 소스코드의 평가 과정에서 생성된 실행 컨텍스트가 추가 및 제거되는 스택 JS…","html":"<h2 id=\"콜스택-힙\" style=\"position:relative;\"><a href=\"#%EC%BD%9C%EC%8A%A4%ED%83%9D-%ED%9E%99\" aria-label=\"콜스택 힙 permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>콜스택, 힙</h2>\n<ul>\n<li>V8 엔진을 비롯한 대부분 JS엔진은 메모리힙(메모리할당 이루어짐)과 콜스택으로 구성</li>\n</ul>\n<h3 id=\"콜스택\" style=\"position:relative;\"><a href=\"#%EC%BD%9C%EC%8A%A4%ED%83%9D\" aria-label=\"콜스택 permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>콜스택</h3>\n<ul>\n<li>소스코드의 평가 과정에서 생성된 <strong>실행 컨텍스트가 추가 및 제거</strong>되는 스택</li>\n<li>JS에서 <strong>원시값과 함수호출은 콜스택에 저장</strong></li>\n<li>스택 프레임: 스택 영역에 저장되는 함수의 호출 정보(코드 실행되면서 스택프레임이 쌓임)</li>\n</ul>\n<h3 id=\"힙\" style=\"position:relative;\"><a href=\"#%ED%9E%99\" aria-label=\"힙 permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>힙</h3>\n<ul>\n<li><strong>객체가 저장되는 메모리 공간</strong></li>\n<li><strong>콜스택의 요소인 실행컨텍스트는 힙에 저장된 객체를 참조</strong></li>\n<li>객체는 원시값과 달리 크기 안 정해져있음 -> 할당해야 할 메모리 크기를 런타임에 결정(동적 할당) => 힙은 구조화되어 있지 않다.</li>\n</ul>\n<p>\n<br>\n<img src=\"https://user-images.githubusercontent.com/60782131/107713969-b72c4180-6d0f-11eb-87da-3e2526fb1758.png\" width=\"200\">\n<img src=\"https://user-images.githubusercontent.com/60782131/107714241-42a5d280-6d10-11eb-9a21-e24ee7aac101.png\" width=\"300\"></p>\n<img src=\"https://user-images.githubusercontent.com/60782131/107713966-b5fb1480-6d0f-11eb-9f78-2acca010e5b0.png\" width=\"200\">\n<img src=\"https://user-images.githubusercontent.com/60782131/107714223-3c175b00-6d10-11eb-8ec8-387dce37d34b.png\" width=\"300\">\n<ul>\n<li>\n<p>순서</p>\n<ul>\n<li>\n<ol>\n<li>변수의 고유 식별자 생성(myArray)</li>\n</ol>\n</li>\n<li>\n<ol start=\"2\">\n<li><strong>콜스택의 메모리에 주소 할당</strong>(런타임에 할당)</li>\n</ol>\n</li>\n<li>\n<ol start=\"3\">\n<li><strong>힙에 할당된 메모리주소</strong>를 <strong>콜스택의 value</strong>로 저장(런타임에 할당)</li>\n</ol>\n</li>\n<li>\n<ol start=\"4\">\n<li>\n<p>힙의 메모리 주소에 할당된 값(이 예제의 경우 []) 저장\n<br /> </p>\n</p>\n</li>\n</ol>\n</li>\n</ul>\n</li>\n</ul>\n<div class=\"gatsby-highlight\" data-language=\"js\"><pre class=\"language-js\"><code class=\"language-js\"><span class=\"token keyword\">const</span> myArray <span class=\"token operator\">=</span> <span class=\"token punctuation\">[</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span>\nmyArray<span class=\"token punctuation\">.</span><span class=\"token function\">push</span><span class=\"token punctuation\">(</span><span class=\"token number\">1</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\nmyArray<span class=\"token punctuation\">.</span><span class=\"token function\">push</span><span class=\"token punctuation\">(</span><span class=\"token number\">2</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n<span class=\"token operator\">...</span>\nmyArray <span class=\"token operator\">=</span> <span class=\"token number\">3</span><span class=\"token punctuation\">;</span><span class=\"token comment\">//에러: 콜스택에서 새로운 메모리 주소 할당 -> const는 이를 허용X</span>\nmyArray <span class=\"token operator\">=</span> <span class=\"token punctuation\">[</span><span class=\"token string\">'a'</span><span class=\"token punctuation\">]</span><span class=\"token comment\">//에러: 콜스택에서 새로운 메모리 주소 할당 -> const는 이를 허용X</span></code></pre></div>\n<ul>\n<li>myArray=[]에서 새로운 값을 push해서 <strong>값이 변경돼도 참조값인 변수 myArray가 참조하는 메모리 주소는 같다.</strong></li>\n<li>즉 <strong>재할당 === 콜스택의 메모리주소가 바뀐다</strong>.let은 이를 허용O, const는 허용X</li>\n</ul>\n<h2 id=\"settimeout의-지연-시간은-정확히-보장되는가\" style=\"position:relative;\"><a href=\"#settimeout%EC%9D%98-%EC%A7%80%EC%97%B0-%EC%8B%9C%EA%B0%84%EC%9D%80-%EC%A0%95%ED%99%95%ED%9E%88-%EB%B3%B4%EC%9E%A5%EB%90%98%EB%8A%94%EA%B0%80\" aria-label=\"settimeout의 지연 시간은 정확히 보장되는가 permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>setTImeout의 지연 시간은 정확히 보장되는가?</h2>\n<ul>\n<li>\n<p>JS엔진 역할: 태스크 요청 되면 -> only 콜스택 통해 요청된 작업 순차적 실행</p>\n<ul>\n<li>비동기처리에서 소스코드의 평가와 실행 제외한 모든 처리는 JS를 구동하는 환경인 브라우저, Node.js에서 담당 => 이를 위해 브라우저는 태스크큐,이벤트루프 제공</li>\n<li>예)JS엔진: setTimeout의 평가와 실행/브라우저,Node.js:타이머 설정, 콜백함수 등록</li>\n</ul>\n</li>\n</ul>\n<div class=\"gatsby-highlight\" data-language=\"js\"><pre class=\"language-js\"><code class=\"language-js\"><span class=\"token keyword\">function</span> <span class=\"token function\">foo</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">{</span>\n  console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token string\">'foo'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n\n<span class=\"token keyword\">function</span> <span class=\"token function\">bar</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">{</span>\n  console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token string\">'bar'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n\n<span class=\"token function\">setTimeout</span><span class=\"token punctuation\">(</span>foo<span class=\"token punctuation\">,</span> <span class=\"token number\">0</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n<span class=\"token function\">bar</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span></code></pre></div>\n<ul>\n<li>위의 경우 지연시간이 0이지만 4ms이면 최소 지연시간 4ms 지정 -> <strong>4ms후에 콜백함수 foo가 태스크큐로 푸시되어 대기</strong></li>\n<li>이처럼 setTimeout함수로 호출 스케줄링한 함수는 <strong>정확히 지연시간 후에 호출된다는 보장은 없다</strong>. 지연 시간 이후에 태스크큐로 넘어가지만 콜스택이 비어야 호출되므로 약간의 시간차 발생 가능</li>\n</ul>\n<h2 id=\"브라우저\" style=\"position:relative;\"><a href=\"#%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80\" aria-label=\"브라우저 permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>브라우저</h2>\n<ul>\n<li>\n<p>자바스크립트는 싱글스레드 방식으로 동작. 이 때 <strong>싱글스레드로 동작하는 것은 브라우저가 아닌 브라우저에 내장된 자바스크립트 엔진</strong></p>\n<ul>\n<li>즉, 자바스크립트 엔진은 싱글스레드로 동작하고, 브라우저는 멀티스레드로 동작.</li>\n</ul>\n</li>\n<li>\n<p>브라우저는 자바스크립트 엔진 외에도 Web API 제공</p>\n<ul>\n<li>Web API: 브라우저에서 제공하는 API이고 DOM API, 타이머함수, HTTP요청(Ajax)과 같은 비동기 처리</li>\n<li>즉 브라우저와 자바스크립트 엔진이 협력하여 비동기 처리</li>\n</ul>\n</li>\n</ul>\n<p>\n<br />\n<br />\n</p>\n<p><strong>출처</strong> </p>\n<ul>\n<li>이웅모, 모던 자바스크립트 Deep Dive(위키북스, 2020)</li>\n<li><a href=\"https://junwoo45.github.io/2019-11-04-memory_model/\">자바스크립트의 메모리 모델</a></li>\n</ul>","frontmatter":{"title":"[JS] 자바스크립트 엔진, 런타임, 콜스택, 메모리힙, 지연시간","date":"February 12, 2021"}}},"pageContext":{"slug":"/JavaScript/callStack_memoryHeap/","previous":{"fields":{"slug":"/CS/memory/"},"frontmatter":{"title":"[CS] 메모리","category":"cs","draft":false}},"next":{"fields":{"slug":"/Retrospective/2021/Feb_2nd/"},"frontmatter":{"title":"[회고] 2월 둘째 주 회고(2/8 ~ 2/15)","category":"retrospective","draft":false}}}},"staticQueryHashes":["3128451518","521680639"]}