본문 바로가기

개발에 도움이 되는/JavaScript

JavaScript

- 정의 : 웹페이지에 생동감을 불어 넣기 위해 만들어진 프로그래밍 언어. 객체 기반의 스크립트 언어.

 

V8

- 특징

 

  1. 인터프리터 언어지만, 실행하는 플랫폼에 따라 인터프리팅과 컴파일이 혼합되어 사용하여 성능을 크게 향상 시킴

  자바스크립트 엔진 내부에서 실행 중 컴파일이 필요한 경우 내부에서 컴파일을 한다.

 

  2. 동적 타입 언어 : 변수 타입이 없으며, 프로그램 실행 도중에도 변수 타입이 변경될 수 있음

 

  3. 프로토타입 기반의 객체 지향 언어 : 클래스 기반(상속, 캡슐화 등)의 언어가 아닌 프로토타입 기반의 객체지향 언어

    - 프로토타입 : 어떤 객체의 원본 / 원형이 되는 객체 

 

  4. 일급 객체 함수 : 고차 함수를 구현할 수 있어 함수형 프로그래밍이 가능

    - 일급 객체 조건

       1. 무명의 리터럴로 생성할 수 있다.

       2. 변수나 자료구조에 할당할 수 있다.

       3. 다른 함수의 인자로 전달될 수 있다.

       4. 다른 함수의 결과로써 리턴될 수 있다.

 

  5. Single Thread : Stack에 함수를 올려 실행 후, 끝나면 제거 (한번에 하나의 task처리 = 동기적)

 

  6. Non-Blocking : Event loop와 Callback queue가 있기 때문에 Single Thread 기반이어도 다른 이벤트를 비동기적으로 처리할 수 있다.

 

 

 

- 강점

 

  1. HTML/CSS와 완전히 통합할 수 있음

 

  2. 간단한 일은 간단하게 처리할 수 있게 해줌 (Non Blocking I/O)

 

  3. 모든 주요 브라우저에서 지원하고, 기본 언어로 사용됨

 

JavaScript는 브라우저에서만 쓸 목적으로 고안된 언어지만, 현재는 다양한 환경에서 쓰이고 있다.

V8으로 빌드 된 JavaScript 런타임(실행 환경)인  Node.js를 통해 Back-End 개발도 가능해졌다.

ES6 (ECMAScript 6) 때 문법이 크게 바뀌어, 이후를 모던 자바스크립트라 칭함. 

 

 

- 작동 원리

  자바스크립트 런타임은 메모리 힙(Memory Heap)과 콜 스택(Call Stack)으로 구성되어 있다.

  - 메모리 힙 : 메모리 할당을 담당, 참조 타입(객체 등) 데이터가 저장된다.

  - 콜 스택 : 코드가 호출되면서 스택으로 쌓이는 곳, 변수 식별자 저장 및 스코프 체인, this 관리

  

  하나의 Main Thread에서 호출되는 함수들이 콜 스택에 쌓이고 이 함수들은 LIFO 방식으로 실행

  자바스크립트의 런타임 자체에서 비동기 API가 지원되지 않고 Node.js나 브라우저같은 런타임 환경에서 담당

 

 

자바스크립트와 런타임 환경들이 조합된 모습

  - Event Loop : 이벤트 발생 시 호출되는 Callback 함수들을 관리하여 Task Queue에 전달하고, Task Queue에 담겨있는 콜백 함수들을 Call Stack(Call Stack에 쌓여 있는 함수가 없다면)에 넘겨 줌

 

  - Task Queue : Web API에서 비동기 작업들이 실행된 후 호출되는 Callback 함수들을 기다리는 공간, 이벤트 루프가 정해준 순서대로 있으며, FIFO 방식을 따름

 

  - Web API : 브라우저에서 자체 지원하는 API, DOM 이벤트, Ajax, setTimeout 등 비동기 작업들을 수행할 수 있도록 API 지원

 

 - 실행 과정 (비동기 작업을 수행하는 코드가 실행된다고 가정할 때)

 

 1. 코드는 Call Stack에 쌓인 후 실행되면, 쉬운 작업(ex. console.log)은 바로 처리한다. (Call Stack에 쌓이면 순차적으로 바로 실행되고 제거된다)

 

 2. 시간이 걸리는 작업인 경우(ex. setTimeout 등) 자바스크립트 엔진은 비동기 작업을 Web API 또는 libuv(자세한 건 Node.js 편 바로가기) Thread에게 위임한다.

 

 3. 해당 작업은 비동기적으로 실행된다. 그동안 Main Thread는 다음 코드를 실행해나간다.

 

 4. 시간이 걸리는 작업 완료 후 Callback 함수가 있다면 Task Queue로 Callback 함수를 전달

 

 5. Task Queue에 전달되어 있던 Callback 함수가 Call Stack에 Stack이 없는 것을 확인한 후, Call Stack에 쌓고 실행

 

반응형

'개발에 도움이 되는 > JavaScript' 카테고리의 다른 글

클로저(Closure)  (0) 2022.03.13
스코프(Scope)  (0) 2022.02.27
실행 컨텍스트(Execution Context)  (0) 2022.01.15
호이스팅(Hoisting)  (1) 2022.01.05
Node.js  (0) 2022.01.03