JavaScript(자바스크립트)는 객체 기반의 스크립트 프로그래밍 언어이다. 이 언어는 웹 브라우저 내에서 주로 사용되며, 다른 응용 프로그램의 내장 객체에도 접근할 수 있는 기능을 가지고 있다. 또한 Node.js와 같은 런타임 환경과 같이 서버 프로그래밍에도 사용되고 있다. [출처: 위키백과]
- 특징
- 가벼운 인터프리터(just-in-compiled)를 이용한 일급함수(first-class functions)를 가진 프로그래밍 언어이다.
- 웹페이지만을 위한 스크립트 언어로 잘 알려진 것과는 반대로, 자바스크립트 엔진이 있는 어떤 곳에서든 사용할 수 있다.
- 자바스크립트는 prototype-based(프로토타입을 기반으로 하는) multi-paradigm 언어로 절차지향, 객체지향, 함수형 프로그래밍이 모두 가능하다.
- single-threaded(한번에 하나의 스레드를 실행)이다.
- dynamic(동적으로 타입이 결정되는) 언어이다. 즉, 변수에 타입을 명시적으로 지정하지 않고 코드가 실행되는 런타임에 변숫값이 할당될 때 해당 값의 타입에 따라 변수 타입이 결정된다.
- 자바스크립트는 브라우저뿐만 아니라 서버에서도 실행 가능하며, 자바스크립트 엔진이 들어 있는 모든 디바이스에서 동작한다.
- V8: Chrome, Opera
- SpiderMonkey: Firefox
- ECMAScript
자바스크립트의 문법의 규격사항, 표준사항을 명시(변수 선언, 반복문 정의 등)한 것으로, 개별의 브라우저(크롬, 사파리, 파이어폭스 등)는 고유의 자바스크립트 엔진을 이용하여 해당 엔진이 채택한 번역 방식을 이용하여 자바스크립트 언어를 해석하게 된다. ⇒ 자바스크립트로 구현된 웹이 브라우저의 웹과의 호환이 가능케 한다.
일급함수(first-class function)
일반 객체처럼 모든 연산이 가능한 함수로 함수의 매개변수로 전달이 가능하고, 함수의 반환값이 될 수 있고, 변수에 할당할 수 있으며 동일 비교가 가능하다.
자바스크립트의 객체 지향 구현
자바스크립트는 프로토타입 체인, 클로저 등으로 객체지향의 상속, 캡슐화(정보 은닉) 등의 개념을 구현한다. 정보 은닉(information hiding)이란 어떤 모듈 내 로직에 대해 외부로의 노출을 최소하하여, 모듈 간의 결합도를 낮추고 유연성을 높이고자 하는 것이다.
폴리필(polyfill), 트랜스파일(transpile)
폴리필은 브라우저가 지원하지 않는 코드를 브라우저에서 사용할 수 있도록 변환한 코드 조각이나 플러그인이다. 트랜스파일은 최신 버전의 코드를 예전 버전의 코드로 변환하는 과정이다. 두 개념 모두 최신 기능을 구버전의 실행 환경에서 동작할 수 있게 바꿔주는 역할을 한다. 폴리필 라이브러리로는 대표적으로 core.js, polyfill.io가 있고, 트랜스파일러로는 바벨(Babel)이 있다.
개념
자바스크립트 런타임
자바스크립트가 실행되는 환경으로, 대표적인 예시로는 크롬과 사파리 같은 인터넷 브라우저와 Node.js 등이 있다. 자바스크립트 런타임은 자바스크립트 엔진, Web API, 콜백 큐, 이벤트 루프, 렌더 큐 등으로 구성된다.
런타임(Runtime)
소스코드의 컴파일이 완료된 후 프로그램이 메모리에 적재되어 실행되기 까지의 시간
브라우저에서 할 수 있는 일/없는 일
있는 일
- 페이지에 새로운 HTML 추가/수정, 스타일 수정
- 마우스 클릭이나 포인터의 움직임, 키보드 키 눌림 등과 같은 사용자 행동에 반응
- 네트워크를 통한 원격 서버로의 요청, 파일 다운로드 및 업로드
- 쿠키 관리
- 사용자에게 질문하기 또는 메시지 보여주기
- 클라이언트 측 데이터 저장
없는 일
사용자 보안을 위해 브라우저 상에서 할 수 없는 일이 존재한다.
- 운영체제가 지원하는 기능을 브라우저가 직접 쓰지 못하게 막혀있다. 파일에 접근하려면 사용자의 상호작용, 이를테면 브라우저에 파일을 드롭다운하거나
<input>태그를 통해 파일을 선택하는 행위가 일어나야 한다. 카메라, 마이크 같은 디바이스 접근 시에도 사용자의 명시적인 허가가 이뤄져야 한다.
동작 원리
일반적인 작업은 콜 스택에서 이루어진다. 시간이 소요되는 작업들은 WebAPI에서 대기 후 콜백 큐로 보내진다. 콜 스택이 비워져있을 때만 콜백 큐에 저장되어있던 작업들을 콜 스택으로 보낸다.
[출처:https://beomy.github.io/tech/javascript/javascript-runtime/]
-
구성 요소
-
매크로 태스크 큐:
자바스크립트의 이벤트 루프에서 사용되는 큐로, setTimeout, setInterval, 이벤트 핸들러 등에서 등록된 콜백 함수들이 순차적으로 실행되기 위해 저장된다. 동기 코드 실행이 끝난 후, 마이크로태스크 큐의 작업이 모두 처리된 후 이 작업들이 실행된다. -
마이크로태스크 큐:
프로미스의 then, catch, finally 콜백이나 MutationObserver와 같이 빠르게 실행되어야 하는 작업들이 저장되는 큐이다. 현재 실행 중인 콜 스택이 비워진 직후, 태스크 큐보다 우선하여 처리되므로 비동기 작업의 결과를 보다 빠르게 반영할 수 있다. -
Animation Frames:
브라우저의 requestAnimationFrame API를 통해 등록된 애니메이션 업데이트 함수들이 모이는 큐이다. 브라우저가 최적의 타이밍에 화면을 갱신할 수 있도록 도와주어, 부드러운 애니메이션 효과를 제공한다.
-
콜백 큐
콜백 큐에는 태스크 큐, 마이크로태스크 큐, Animation Frames가 있으며, 실행 우선순위는 마이크로태스크>Animation Frames>태스크 순이다.
- 태스크 큐:
- 마이크로태스크 큐:
- Animation Frames:
Strict mode
리액트와 같은 자바스크립트 프레임워크는 기본적으로 엄격모드로 동작한다.
- 특징
- 기존에 무시되던 에러들을 throwing한다.
- 자바스크립트 엔진의 최적화 작업을 어렵게 하는 실수들을 바로잡는다.
- 예시
- delete 불가
"use strict"; var x = 1; delete x; // 불가 - 키워드 없는 변수 사용 불가
"use strict"; function add(x) { var a = 2; b = a + x; // 불가 } - 함수 내 this가 undefined로 정의된다.
"use strict"; function add(x) { console.log(this); // undefined } - 반복문 내 반복을 위한 임시변수를 키워드를 통해 선언해야 한다.
"use strict"; const array = [1, 2, 3]; for (num of array) { // const나 let으로 선언해야함 console.log(num); }
- delete 불가
문과 표현식
자바스크립트의 모든 코드는 문 또는 표현식으로 구성되며, 표현식은 그 자체로 하나의 문이 될 수도 있다. 한편, 표현식은 평가되어 값을 생성하는게 그 역할의 전부이지만 문은 let, const, function과 같은 선언 키워드로 변수나 함수를 생성하고 if, for 문과 같은 제어문을 생성하여 프로그램 흐름을 제어하기도 한다.
문(Statement)
문(statement)은 자바스크립트 엔진에게 내리는 명령으로 문이 실행됨으로써 프로그램이 동작한다. 문은 리터럴, 연산자, 표현식, 키워드 등으로 구성되며 세미콜론으로 끝나야 한다. (세미콜론은 필수는 아니다. ⇒ 자바스크립트 엔진이 스크립트 해석시 자동으로 붙여준다(세미콜론 자동 삽입 기능, Automatic semicolon insertion).
- 특징
- 표현식으로 생성한 값으로 컴퓨터에게 명령을 내린다.
- 표현식인 문, 표현식이 아닌 문으로 나눌 수 있다.
// 표현식이 아닌 문 => 값으로 평가될 수 없음 let x = 3 * 11; // 표현식인 문 x = 33;
console
| 메서드 | 설명 | 옵션 | 비고 |
|---|---|---|---|
log | 출력 | 개발 단계에서만 사용하는 것을 권장 | |
info | 정보 출력 | 개발 단계에서만 사용하는 것을 권장 | |
warn | 경보 | ||
error | 에러 (예상하지 못한 에러, 시스템 에러) | ||
assert | 조건이 false일 때만 출력 | ||
table | 테이블 형태로 출력 | 객체 출력 시 유용 | |
dir | 중첩 객체를 출력 | colors, depth | |
time~timeEnd | time부터 timeEnd 사이의 코드 실행 경과 시간을 출력 | ||
count | 함수의 호출 횟수 출력 | 호출할 함수 내부에서 사용하며, countReset 으로 초기화 가능 | |
trace | 함수의 호출 경로를 추적 | 이벤트리스너, 비동기 호출 추적 시 유용 |
