{"componentChunkName":"component---src-templates-blog-post-js","path":"/JavaScript/Call_Stack/","result":{"data":{"site":{"siteMetadata":{"title":"JULog","author":"[Ju Chan Hwang]","siteUrl":"https://julog.netlify.app","comment":{"disqusShortName":"","utterances":"JuChanHwang/gatsby-starter-bee"},"sponsor":{"buyMeACoffeeId":"jbee"}}},"markdownRemark":{"id":"ee8c4067-0732-5f29-bcfb-4f45c87e008c","excerpt":"javascript의 가장 큰 특징중의 하나는 single-threaded 언어라는 점이다. javascript의 엔진은 한 번에 한 가지 일밖에 하지 못한다. 즉, 단일 호출스택을 갖고 있다. javscript engine Memory Heap: 메모리 할당이 이루어지는 곳 Run Time 자바스크립트의 엔진은 브라우저가 제공하는 웹 API 즉, DOM, AJAX, 을 사용한다. API(application programming interface) - API…","html":"

javascript의 가장 큰 특징중의 하나는 single-threaded 언어라는 점이다.

\n

javascript의 엔진은 한 번에 한 가지 일밖에 하지 못한다. 즉, 단일 호출스택을 갖고 있다.

\n

\"javscript

\n\n

Run Time

\n\n

\"RunTime\"

\n

stack(자료 구조)

\n\n

Call Stack

\n\n
function multiply(x, y) {\n    return x * y;\n}\n\nfunction printSquare(x) {\n    var s = multiply(x, x);\n    console.log(s);\n}\n\nprintSquare(5);
\n

\"stack_img\"

\n

1. synchronous example

\n
function foo(b) {\n  var a = 5;\n  return a * b + 10;\n}\n\nfunction bar(x) {\n  var y = 3;\n  return foo(x * y);\n}\n\nconsole.log(bar(6));
\n

2. asynchronous example

\n
const sec = 3000;\n\nfunction callMe() {\n  setTimeout(function timeout() {\n    console.log('hi');\n    foo();\n  }, sec);\n}\n\nfunction foo() {\n  setTimeout(function timeout() {\n    bar();\n    console.log('solomon!!');\n  }, sec);\n}\n\nfunction bar() {\n  setTimeout(function timeout() {\n    console.log('juchan!!');\n  }, sec);\n}\n\ncallMe();\n/*\nvisualize code\n\n(http://latentflip.com/loupe/?code=Y29uc3Qgc2VjID0gNDAwMDsKCmZ1bmN0aW9uIGNhbGxGaXJzdCgpIHsKICBzZXRUaW1lb3V0KGZ1bmN0aW9uIHRpbWVvdXQoKSB7CiAgICBjb25zb2xlLmxvZygnaGknKTsKICAgIGNhbGxTZWNvbmQoKTsKICB9LCBzZWMpOwp9CgpmdW5jdGlvbiBjYWxsU2Vjb25kKCkgewogIHNldFRpbWVvdXQoZnVuY3Rpb24gdGltZW91dCgpIHsKICAgIGNvbnNvbGUubG9nKCdteSBuYW1lIGlzJyk7CiAgICBjYWxsVGhpcmQoKTsKICB9LCBzZWMpOwp9CgpmdW5jdGlvbiBjYWxsVGhpcmQoKSB7CiAgc2V0VGltZW91dChmdW5jdGlvbiB0aW1lb3V0KCkgewogICAgY29uc29sZS5sb2coJ2p1Y2hhbiEhJyk7CiAgfSwgc2VjKTsKfQoKY2FsbEZpcnN0KCk7Cg%3D%3D!!!PGJ1dHRvbj5DbGljayBtZSE8L2J1dHRvbj4%3D)\n*/
\n

3. asynchronous example

\n
function first() {\n\tsetTimeout(function timeout() {\n  \tconsole.log(\"The First function has been called.\")\n  }, 1000)\n}\n\nfunction second() {\n\tsetTimeout(function timeout() {\n  \tconsole.log(\"The Second function has been called.\")\n  }, 999)\n}\n\nfirst();\nsecond();
\n

4. My Question

\n
for (var i = 0; i < 5; i++) {\n  setTimeout(function timeout() {\n    console.log(i)\n  }, 0)\n}\n//결과 값?
\n

결론

\n

- 자바스크립트는 싱글 쓰레드 기반의 언어이다.

\n

- 자바스크립트 엔진은 V8 엔진만으로 구동되는 것이 아니라 웹 API, Call Back Que, eventloop와의 상호작용을 한다.

\n

- 호출 스택은 후입선출의 구조이다.

\n

- 함수가 호출되는 시점에서 스택에 쌓이고 함수가 반환될때 스택에서 삭제된다

\n
\n

추가로 알아두면 좋은 개념들

\n\n
","frontmatter":{"title":"Call Stack","date":"August 14, 2019"}}},"pageContext":{"slug":"/JavaScript/Call_Stack/","previous":{"fields":{"slug":"/JavaScript/this_call_apply_and_bind/"},"frontmatter":{"title":"this, call, apply, and bind","category":"JavaScript","draft":false}},"next":{"fields":{"slug":"/JavaScript/Coercion_in_Javascript/"},"frontmatter":{"title":"Coercion In Javascript","category":"JavaScript","draft":false}}}},"staticQueryHashes":["3128451518","96099027"]}