Deep Dive : JavaScript 비동기 이벤트 루프 / 문법

 

✓ 프로세스(process)

- 프로그램을 실행하는 단위

- 하나의 프로그램 실행은 하나의 프로세스를 가지고, 그 프로세스 내부에서 모든 작업 처리

 

✓ 스레드(thread)

- 하나의 프로그램 내에서 동시에 여러 개의 복잡한 작업을 수행할 필요성 대두

- 프로세스보다 작은 실행 단위

- 하나의 프로세스 내에서 여러 개의 스레드를 만들 수 있음

- 스레드끼리 메모리 공유 -> 여러 작업 동시 수행

 

✓ 자바스크립트 : 싱글 스레드

- 최초의 자바스크립트는 브라우저에서 HTML을 그리는데 도움을 주는 보조적 역할

- 스레드는 하나의 프로세스에서 동시에 서로 같은 자원에 접근할 수 있는 문제(동시성 문제) 발생 ex) DOM 조작

-> 싱글 스레드에서 동기 방식으로 작동되도록 설계

- 한 번에 하나의 작업만 동기적(직렬 방식)으로 처리

-> 요청이 시작된 이후에는 무조건 응답을 받은 이후에 다른 작업 처리, 그동안 다른 모든 작업 대기

<-> 비동기(asynchronous) : 한 번에 여러 작업 실행

- Run-to-completion : 모든 코드는 동기식으로 한번에 하나씩 순차적으로 처리

 

✓ 이벤트 루프(Event loop)

- 자바스크립트 런타임 외부에서 자바스크립트 비동기 실행을 돕기 위해 만들어진 장치

- 호출 스택에 실행 중인 코드가 있는지, 태스크 큐에 대기 중인 함수가 있는지 반복해서 확인

- 호출 스택이 비워 있는지 여부를 확인하고, 수행해야 할 코드가 있다면 오래된 태스크부터 순차적으로 꺼내와서 자바스크립트 엔진을 이용해 실행

-> 동기식으로 수행되는 메인 스레드가 아닌 태스크 큐가 할당되는 별도의 스레드에서 비동기 함수 수행

function bar() {
	console.log('bar');
}

function baz() {
	console.log('baz');
}

function foo() {
	console.log('foo');
    setTimeout(bar(), 0);
    baz();
}

foo(); // foo -> baz -> bar

1) call stack : Foo()

2) call stack : console.log('foo')

3) console.log('foo') 실행

4) call stack : setTimeout(bar(), 0)

5) 타이머 이벤트 실행 후 -> task queue로 이동, call stack에서 제거

6) call stack : baz() 

7) call stack : console.log('baz')

8) console.log('baz') 실행

9) call stack에서 baz() 제거

10) call stack에서 foo() 제거

11) event loop : call stack empty 체크 후 task queue 확인

12) console.log('bar') task queue -> call stack 이동 

13) console.log('bar') 실행

14) call stack에서 bar() 제거

✓ 호출 스택(call stack)

- 자바스크립트에서 수행해야 할 코드나 함수를 순차적으로 담아두는 스택

 

✓ 태스크 큐(task queue)

- 자료구조 set 형태

- 실행해야 할 태스크 : 비동기 콜백 함수, 이벤트 핸들러

- ex) setTimeout, setInterval, setImmediate

 

✓ 마이크로 태스크 큐

- 기존 태스크 큐와 다르게 다른 태스크 처리

- 마이크로 태스크 큐가 빌때까지 기존 태스크 큐의 실행은 뒤로 미뤄짐

- ex) process.nextTick, promises, queueMicroTask, MutaionObserver

- 각 마이크로 태스크 큐가 끝날 때 마다 한 번씩 렌더링(동기 코드와 유사)

- cf) 동기 코드는 동기 코드 실행 후 렌더링

 

✓ 구조 분해 할당(Destructing assignment)

- 배열 또는 객체의 값을 분해해 개별 변수에 즉시 할당

- w전개 연산자는 마지막에 사용

 

✓  배열 구조 분해 할당 

const array = [1, 2, 3, 4, 5];

const [first, second, third, ...arrayRest] = array;
// first 1, second 2, third 3, arrayRest [4, 5]

const first, , , , fifth] = array; 
// 2, 3, 4 는 표현식이 없으므로 변수 할당 생략
// first 1, fifth 5


const array2 = [1, 2];
const [a = 10, b = 10, c = 10] = array2;
// a 1, b 2, c 10

const [a = 1, b = 1, c = 1, d = 1, e = 1] = [undefined, null, 0 , ''];
// undefined일 때만 기본값으로 사용
// a 1, b null, c 0, d '', e 1

 

✓  객체 구조분해 할당

const object = {
	a: 1,
    b: 2,
    c: 3,
    d: 4,
    e: 5
};

const { a, b, c ..objectRest } = object;
// a 1, b 2, c 3, objectRest = { d: 4, e: 5 ]

const object2 = {
	a: 1,
    b: 2
}

const { a: first, b: second } = object2;
// first 1, second 2

const { a = 10, b = 10, c = 10 } = object2;
// 기본값 부여
// a 1, b 2, c 10

const key = 'a';
const { [key]: a } = object2;
// a 1

 

✓ 전개 구문

- 전개 연산자 ... 사용

- 기존의 객체나 배열에 영향을 미치지 않고 값 복사

 

 

✓ 객체 초기자

- 객체를 선언할 때 객체에 넣고자 하는 키와 값을 가지고, 변수가 이미 존재한다면 해당 값을 간결하게 넣어주는 방식

const a = 1;
const b = 2;

const obj = { a, b }; // { a: 1, b: 2 }

 

✓ Array 프로토타입 메서드

- map : 인수로 전달받은 배열과 똑같은 길이의 새로운 배열을 반환하는 메서드, 각 아이템을 순회하면서 콜백으로 연산한 결과로 구성된 새로운 배열 생성

- filter : 콜백 함수를 인수로 받아 이 함수의 truthy 조건을 만족하는 경우에만 해당 원소를 반환하는 메서드, filter 결과에 따라 원본 배열 길이 이하의 새로운 배열 반환

- reduce : 콜백 함수와 초기값을 인수로 받아 초기값에 따라 배열, 객체 또는 그 외의 무언가를 반환하는 메서드, reducer 콜백 함수를 실행하고 초기값에 누적해 결과 반환

- forEach : 콜백 함수를 받아 배열을 순회하며 단순히 콜백 함수를 실행하기만 하는 메서드, 반환값 undefined

const arr = [1, 2, 3, 4, 5];

arr.map((item) => item * 2); // [2, 4, 6, 8, 10]

arr.filter((item) => item % 2 === 0); // 2, 4

arr.reduce((result, item) => { return result + item}, 0); // 15

arr.forEach((item) => console.log(item)); // 1, 2, 3

 

✓ 삼항조건연산자

- 조건문 ? 참일 때 값 : 거짓일 때 값