<commit_before>---
layout: post
title: "[JS] Concurrency Model and Event Loop"
description: "싱글스레드 기반으로 동작하는 자바스크립트는 많은 작업을 어떻게 동시에 처리할까?"
tags:
  - "javascript"
comments: true
share: true
date: 2017-6-24
---


# Concurrency model and Event Loop

- *Javascript는 싱글 스레드로 동작한다.*
- *node.js는 이벤트 루프 기반 싱글 스레드다*

등등 이런 말을 많이 들었다. 싱글 스레드는 동시에 하나의 작업만 처리 가능하다. 하지만 js가 실행되는 환경에서는 많은 작업이 동시에 처리되고 있다.

정답은 동시성(Concurrency) 모델과 이벤트 루프에 있다.
JS는 이벤트 루프를 통해 비동기 방식으로 동시성을 지원한다.

사실 무슨말인지 이해하기 힘들다. 먼저, JS가 동작하는 환경과 엔진을 살펴보자.

JS 엔진은 JS로 작성한 코드를 해석하고 실행하는 인터프리터다. 주로 웹 브라우저에서 이용된다.

JS엔진은 3가지 영역을 가진다.

![concurrency model 1](/images/conccurency-model/conccurency_model_1.png)

## Call Stack (a.k.a. run to completion)

JS는 단 하나의 호출 stack을 사용한다. (그래서 Run To Completion)
1개 함수가 실행되면 call stack에 push되어 다른 함수는 실행되지 못한다.
실행이 끝나면 pop이 되고 다음 함수가 실행된다.

```javascript
function test1(){
	console.log("test1");
}
function test2(){
	test1();
	console.log("test2");
}

test2();
```

![concurrency model 2](/images/conccurency-model/conccurency_model_2.png)

![concurrency model 3](/images/conccurency-model/conccurency_model_3.png)

1. 먼저, 전역 환경에 대한 코드 블록이 먼저 스택에 쌓인다.
- 전역 환경은 가상의 익명함수로 감싸져 있다고 생각하자.
- 그래서, 마지막 라인까지 실행되어야 스택에서 제거 된다.

2. `test2()`라인을 만나고 `test2` 함수에 대한 코드 블록이 쌓인다.
3. 그 다음에는 `test1()`에 대한 코드 블록이 형성된다.

4. `test1()`에서 `"test1"`을 출력 후 함수 종료와 함께 스택에서 제거된다.
5. `test2()`로 돌아와서 `"test2"`를 출력 후 함수 종료와 함께 스택에서 제거된다.
6. 모든 전역환경에 대한 코드를 수행하였으므로 익명 함수도 제거된다.

<commit_msg>마크다운 오류 수정<commit_after>---
layout: post
title: "Concurrency Model and Event Loop"
description: "싱글스레드 기반으로 동작하는 자바스크립트는 많은 작업을 어떻게 동시에 처리할까?"
tags:
  - "javascript"
comments: true
share: true
date: 2017-6-24
---


# Concurrency model and Event Loop

- *Javascript는 싱글 스레드로 동작한다.*
- *node.js는 이벤트 루프 기반 싱글 스레드다*

등등 이런 말을 많이 들었다. 싱글 스레드는 동시에 하나의 작업만 처리 가능하다. 하지만 js가 실행되는 환경에서는 많은 작업이 동시에 처리되고 있다.

정답은 동시성(Concurrency) 모델과 이벤트 루프에 있다.
JS는 이벤트 루프를 통해 비동기 방식으로 동시성을 지원한다.

사실 무슨말인지 이해하기 힘들다. 먼저, JS가 동작하는 환경과 엔진을 살펴보자.

JS 엔진은 JS로 작성한 코드를 해석하고 실행하는 인터프리터다. 주로 웹 브라우저에서 이용된다.

JS엔진은 3가지 영역을 가진다.

![concurrency model 1](/images/conccurency-model/conccurency_model_1.png)

## Call Stack (a.k.a. run to completion)

JS는 단 하나의 호출 stack을 사용한다. (그래서 Run To Completion)
1개 함수가 실행되면 call stack에 push되어 다른 함수는 실행되지 못한다.
실행이 끝나면 pop이 되고 다음 함수가 실행된다.

```javascript
function test1(){
	console.log("test1");
}
function test2(){
	test1();
	console.log("test2");
}

test2();
```

![concurrency model 2](/images/conccurency-model/conccurency_model_2.png)

![concurrency model 3](/images/conccurency-model/conccurency_model_3.png)

1. 먼저, 전역 환경에 대한 코드 블록이 먼저 스택에 쌓인다.
- 전역 환경은 가상의 익명함수로 감싸져 있다고 생각하자.
- 그래서, 마지막 라인까지 실행되어야 스택에서 제거 된다.
2. `test2()`라인을 만나고 `test2` 함수에 대한 코드 블록이 쌓인다.
3. 그 다음에는 `test1()`에 대한 코드 블록이 형성된다.
4. `test1()`에서 `"test1"`을 출력 후 함수 종료와 함께 스택에서 제거된다.
5. `test2()`로 돌아와서 `"test2"`를 출력 후 함수 종료와 함께 스택에서 제거된다.
6. 모든 전역환경에 대한 코드를 수행하였으므로 익명 함수도 제거된다.


{'fraction_non_alphanumeric': 0.11469780219780219, 'fraction_numerical': 0.023351648351648352, 'mean_word_length': 3.5092879256965945, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2213469', 'n_tokens_mistral': 2072, 'n_tokens_neox': 2637, 'n_words': 453}