자바스크립트

정적인 HTML문서를 프로그램 구현을 통해 동적페이지로 변경하거나 사용자와의 상호작용을 담당한다

특징

• JS로 작성한 프로그램을 script라고 부른다

  • script는 웹페이지의 html 안에 작성할 수 있으며, 웹페이지를 불러올 때 script가 자동으로 실행된다.

• JS는 브라우저 뿐만아니라 서버에서도 실행가능하다(Node.js)

  • JS엔진이 들어있는 모든 디바이스에서도 동작한다.

  • node.js 환경) 임의의 파일을 읽거나 쓰고, 네트워크 요청을 수행하는 함수를 지원한다.

  • 브라우저 환경) 웹페이지 조작, 클라이언트-서버 간 상호작용에 관한 모든 일을 한다.

• 일반 프로그램언어와 비슷한 구조를 가지고있다

• 동적이며 타입을 명시할 필요가 없는 인터프리터 언어이다

• 객체지향 프로그래밍과 함수형 프로그래밍을 모두 표현할 수 있다

• HTML의 내용,속성,스타일을 변경할 수 있다

• 이벤트를 처리하고 사용자와의 상호작용을 가능하게 한다

• AJAX 기술을 이용하여 서버와 실시간 통신 기능을 제공한다

• ECMAScript 문법을 통해 브라우저마다 표준화된 JS를 동작시킬 수 있다

자바스크립트 엔진

자바스크립트 코드를 해석하고 실행하는 인터프리터이다

ex) 구글의 V8(node.js에서도 사용함), 파이어폭스의 SpiderMonkey

자바스크립트 엔진 특징

브라우저마다 다른 엔진을 사용한다

구성요소

1. 메모리힙

데이터 메모리 할당이 일어나는 곳

• 데이터 임시저장, 변수 선언, 함수 저장, 호출 등의 작업이 발생하는 공간이다.
• 가비지 컬렉션이 메모리를 자동으로 관리하고 사용하지 않는 메모리는 자동으로 해제한다.

메모리힙 작동 예시
const num1 = 531; 라는 코드는 num1이라는 변수를 위해 메모리 공간을 할당하고, 그 공간에 531이라는 값을 할당하는 것

가비지 컬렉션(Garbage Collection)

쓸모 없어진 객체가 차지하는 메모리를 자동으로 해제하는 것

동적 할당된 메모리 영역(메모리힙) 가운데 더 이상 사용할 수 없게 된 영역을 탐지하여 자동으로 해제하는 기법이다. 여기서 더 이상 사용할 수 없게 된 영역이란, 어떤 변수도 가리키지 않게 된 영역을 의미한다.

2. 콜 스택(호출스택)

코드가 실행될 때마다 호출 스택이 쌓이는 곳

• 코드를 읽어내려가면서 수행할 작업들을 밑에서부터 하나씩 쌓고, 메모리 힙에서 작업 수행에 필요한 것들을 찾아서 작업을 수행하는 공간이다.
• 실제로 코드를 실행했을 때, 다음에 실행되어야 할 코드를 순서대로 기록을 하며, 순차적으로 코드를 실행할 수 있게 도와준다.
  즉, 기본적으로 우리가 프로그램 상에서 어디에 있는지를 기록하는 자료구조이다.
• 호출 스택은 전역함수 -> 지역함수 순으로 쌓인다.
  즉, 전역함수가 제일 먼저 호출 된 후, 지역함수가 순차적으로 쌓이게 된다.

콜스택 실행 순서
함수를 실행하면 > 그 함수가 콜스택의 가장 상단에 위치하게 된다.(선입후출) > 함수의 실행이 종료되면 > 그 함수는 스택에서 제거(pop)된다.

호출 스택의 각 단계를 스택프레임이라고 한다.

Call Stack은 정해진 스택 사이즈가 존재하고, 하나씩 쌓이기 때문에 정해진 용량을 초과하면 에러가 발생된다. 이것을 Stack Overflow라고 한다.

기본적으로 자바스크립트는 하나의 Call Stack을 가지고 코드를 순차적으로 처리하기 때문에 (싱글)단일 스레드이며 동기식 언어라고 할 수 있다.
한번에 한가지 작업만 실행하기 때문에 무한루프는 발생할 수 있어도 동기화 문제인 데드락은 발생할 수 없다.

이렇게 하나씩만, 그것도 순서대로 처리하는 자바스크립트 런타임에서 어떻게 비동기처럼 보일까 ?
처리가 오래걸리는 함수(event)를 효율적으로 관리할 수 있는 방법 ?
정답은 JavaScript 런타임에서 제공하는 비동기 콜백을 만드는것은 이벤트 루프이다.

자바스크립트 엔진 동작원리

자바스크립트를 웹 브라우저에서 작동하기 위해서는 JS 엔진, Web APIs, Callback Queue(Task Queue), Event Loop 영역이 필요하다

실행 순서
1. 코드가 Call Stack에 쌓인 후, 비동기 함수는 Web API에게 위임한다
2. Web API는 비동기 작업을 수행하고, 콜백 함수를 Callback Queue에 push한다
3. 이벤트 루프는 Call Stack에 비어있을 때, Callback Queue에 대기하고 있던 콜백 함수를 콜스택으로 push한다
4. 콜스택에 쌓인 콜백 함수가 실행되고, 콜스택에서 pop 된다

JS 엔진

JS 엔진에서는 콜스택을 이용하여 동기적으로 요청을 처리하고 나머지 영역에서 웹브라우저 환경 속에서의 자바스크립트가 비동기적으로 처리할 수 있게 지원해주는 역할을 한다

Web APIs

브라우저 자체에서 제공하는 api로, 비동기 작업등을 실행할 수 있는 DOM, Ajax, setTimeout 등이 있다

Web APIs는 JS엔진 밖에 존재하며, 자바스크립트를 비동기적으로 작동시킬 수 있다.

Callback Queue(Task Queue)

비동기 적으로 실행된 콜백함수가 보관되는 영역, 선입선출로 출력된다.

• Web API에서 비동기 작업들이 실행된 후 호출되는 콜백함수들이 기다리는 공간이며, 이벤트 루프가 정해준 순서대로 위치하게 된다.
  ex) setTimeout에서 타어머가 완료 되고 실행되는 함수(첫번째 인자), addEventListener에서 click 이벤트가 발생했을 때 실행되는 함수(두번째 인자) 등이 저장된다

  • Task Queue
    setTimeout, setInterval, setImmediate, I/O, UI 렌더링 등의 콜백 함수가 저장된다.
  • MicroTask Queue
    ES6에 들어오면서 새로운 컨셉인 MicreTask Queue가 도입되다.
    Promise, Object.observe 등의 콜백 함수가 저장된다.
  • Animation Frames
    requestAnimationFrame 콜백 함수가 저장됩니다

• Event Loop에서 콜백 함수를 꺼내서 처리할 때 우선순위는 Microtask Queue -> Animation Frames -> Task Queue
  
  

Event Loop

콜스택을 사용하는 자바스크립트 엔진과 상호연동하기 위해서 사용하는 장치

• 이벤트 루프를 통해서 동시성을 지원받을 수 있다.
• 이벤트 루프는 Call Stack과 Callback Queue를 감시하여, Call Stack이 비어있을 경우 Callback Queue에서 함수를 꺼내 Call Stack에 추가하는 기능을 한다.
• 이벤트 루프가 Callback Queue에서 Call Stack으로 콜백 함수를 넘겨주는 작업은 콜스택에 쌓여있는 함수가 없을 때만 수행한다.
  => 이와 같은 반복적인 행동을 틱(tick)이라고한다.

* 이벤트 루프가 반드시 Call Stack이 비어져있는 상태에서만 Call Stack으로 Push 하는 이유는 ?
자바스크립트가 싱글 스레드 언어이면서 동기화 문제를 피하기 위함이다.
ex) Call Stack에서 어떤 함수를 잘 처리하도 있는데 갑자기 이벤트 루프가 새로운 함수를 보내면 작업중이던 함수를 중단하고 새 함수를 처리해야한다. => 이 경우 예상한 결과값을 도출해내지 못한다

• requestAnimationFrame : 브라우저에게 수행하기를 원하는 애니메이션을 알리고 다음 리페인트가 진행되기 전에 해당 애니메이션을 업데이트하는 함수를 호출한다. 이 메서드는 리페인트 이전에 실행할 콜백 인자로 받는다
• Parser : 파서는 컴파일러의 일부로서 컴퍼일러나 인터프리터에서 원시프로그램을 읽어들여, 그 문장의 구조를 알아내는 구문분석을 행하는 프로그램이다.
• AST : 컴파일러를 만들 때 사용하는 데이터 자료구조다

자바스크립트 기초
자바스크립트 엔진 동작원리
자바스크립트 런타임
자바스크립트 엔진의 실행방식
JS 런타임 이벤트 루프