[Javascript] javascript를 면밀히 알아보자

eunniverse·2024년 5월 18일

글 쓰게된 계기

javascript.. frontend 개발을 하는 나로서 자주 사용하지만 동작원리와 종종 개념이 헷갈린 적이 있어서 글을 쓰게 되었다.

그래서 javascript는 무엇인가

javascript는 '동적인 웹페이지를 만들기 위한 스크립트 언어'다.
싱글 스레드 기반, 이벤트 중심 등등 특징이 있는데 천천히 알아보도록 하자!

javascript의 특징

1. 싱글 스레드 기반 언어
싱글 스레드 기반의 의미는 '한번에 하나의 일만 수행한다'는 것이다.
2. 이벤트 중심
마우스 클릭, 키보드 입력 등의 이벤트가 발생하면 특정 동작을 수행한다.
3. 프로토타입 기반 혹은 객체 기반의 언어
var data = {
	a: 'hello',
    b = () => { console.log('hi');}
};
위의 코드와 같이 객체리터럴을 통해 객체 생성이 가능하지만, 암시적으로 상속이 일어나지 않고 다형성을 지원하지 않는다. 그래서 프로토타입 기반 언어 혹은 객체기반 언어라 한다.

javascript 동작 원리

javascript 엔진을 통해 코드를 이해하고 실행한다. V8(Chrome, Node.js에서 사용)이 대표적이며, 각 브라우저 별로 엔진이 존재한다.

엔진의 주요 구성요소

Memory Heap

메모리 할당이 일어나는 곳이다. 참조 타입 데이터가 저장된다.

call stack

프로그램에서 어디에 있는지 기록하는 자료구조다. LIFO(Last In First Out)으로 동작하고, 예제 코드를 통해 더 자세히 알아보자!

function a(a_data) {
	console.log(a_data);
}

function b(b_data) {
	console.log(b_data);
    a('a를 호출합니다.');
}

function c() {
	b('b를 호출합니다.');
	console.log('c 함수입니다');
}

c();

/*
	결과 : c 함수입니다
		  b를 호출합니다.
		  a를 호출합니다.
*/

자바스크립트 실행 중 call stack의 변화 과정

!여기서 잠깐
자바스크립트 실행 중 도와주는 구성요소들이 있다. 이걸 먼저 알아보고 가자!

javascript 실행 시 구성요소

Call Stack: 자바스크립트에서 수행해야 할 함수들을 순차적으로 스택에 담아 처리
Web API: 웹 브라우저에서 제공하는 API로 AJAX나 Timeout등의 비동기 작업을 실행
Task Queue: Callback Queue라고도 하며 Web API에서 넘겨받은 Callback함수를 저장
Event Loop: Call Stack이 비어있다면 Task Queue의 작업을 Call Stack으로 옮김

코드 실행 과정 설명

싱글 스레드 기반이므로 하나의 call stack이 존재하며, 이 중 하나의 stack이 오래 걸린다면 다른 코드를 실행하지 못하게되는 block된 상태가 된다. 뿐만 아니라 여러 요청이 있을 때 많은 작업을 한번에 처리하는 것 또한 불가능하다.

그렇다면 javascript는 어떻게 위와 같은 문제를 해결했을까??
바로 비동기 콜백을 통해 해결했다. 비동기 콜백은 하나의 요청이 완료될 때까지 기다리지 않고, 동시에 다른 작업을 실행하는 것을 의미한다.
위의 내용 또한 코드를 통해 알아보자

console.log('실행 시작');
setTimeout(() => {
	console.log('setTimeout 에서 실행되었습니당.')
}, 1000);
console.log('실행 끝');

/**
	결과 : 실행 시작
    	  실행 끝
          setTimeout 에서 실행되었습니당.
*/