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