JS 동기,비동기? (Stack & Queue of 자료구조)🥴

동기 VS 비동기

우선 차이점 부터 설명하자면 동기는 '직렬적', 비동기는 '병렬적'으로 작동되는 방식이다. 즉, 비동기란 특정 코드가 끝날때까지 기다리지 않고 다음 코드를 실행하는 것을 의미한다.

자바스크립트 엔진은 한번에 하나의 태스크(Task)만 실핼할 수 있는 싱글 스레드(single thread)방식 으로 동작 하며, 다른 Task 가 실행 중일때는 다른 일은 블로킹(blocking)이 된다.

왼쪽: 비동기(병렬적) 오른쪽: 동기(직렬적) 이미지 출처 : https://adrianmejia.com

 

왼쪽 차트는 ' 비동기 방식으로 전개되어 있다. 한번에 여러 Task가 동시에 병렬적으로 실행된다.
오른쪽 차트는 하나의 Task가 끝날 때까지 기다렸다가 다음 Task 실행된다.
실행 시간으로는 동기 방식이 느리다.

1. 동기
   • 순서를 보장해주는 장점
   • 직렬적 태스크 수행 방식
   • 즉, 요청을 보낸 후 응답을 받아야지만 다음 동작이 이루어 지는 방식이다. 다음 단계는 대기중...
   • 시스템의 전체적인 효율이 저하 된다고 볼 수도 있다.
2. 비동기
   • 순서를 보장해주지 않는다.
   • 앞단이 완성되기전에 blocking이 되지 않는다.
   • 요청을 보낸 후 응답 여부와 상관없이 다음 태스크를 동작하는 방식이다.
   • 비동기 방식은 요청 응답 후 처리할 callback함수를 지정하여 호출 가능하다.

비동기 예) WEB API, Ajax, setTimeOut,HTTP요청 등이 있다.

//동기식 처리 모델 예시
function sleep(func, delay) {
  const delayUntil = Date.now() + delay;
  while (Date.now() < delayUntil);
  func();
}
function foo() {
  console.log("foo");
}
function bar() {
  console.log("bar");
}
sleep(foo, 3000);
bar();
// return ['foo','bar'];


//비동기식 처리 모델 예시
function foo() {
  console.log("foo");
}
function bar() {
  console.log("bar");
}
// 타이머 함수 setTimeout은 bar 함수를 블로킹하지 않는다.
setTimeout(foo, 3 * 1000);
bar();
// return ['bar','foo']

 

 

스택(Stack), 큐(Queue)

Stack VS Queue

1. 스택(Stack)

스택(Stack)은 데이터를 아래에서 위로 쌓아 올라는 구조를 말한다.

이때 데이터를 추가하거나 제거 시 위에서부터 추가/제거해야 하며, 이러한 자료구조를 후입선출(LIFO ,Last-in-First-Out)이라 한다.

 

ex)

브라우저 뒤로가기

- 새로운 주소 접속 시 뒤로가기 클릭하면 히스토리 스택 아래에서부터 쌓일것이고, 돌아간다는건, 맨 위에 쌓인 방문기록에서 아래로 돌아가는 것

Crtl + z

- 실행 취소하여 직전 상태로 돌아가는 것

 

따라서 스택은 여러 작업을 연달아 수행할 때 이전 작업 내용을 저장해 둘 필요가 있을 때 사용된다.

삽입(push) : 스택 최상단에 데이터를 저장
제거(pop) : 스택 최상단의 데이터를 제거
읽기(peek) : 최상단 데이터를 확인하는 작업

function firstFunction() {
    secondFunction();
    console.log("First Function");
}

function secondFunction() {
    thirdFunction();
    console.log("Second Function");
}

function thirdFunction() {
    console.log("Third Function");
}
debugger
firstFunction();

/*
	firstFunction 호출 -> 스택에 firstFunction 추가
    secondFunction 호출 -> 스택에 secondFunction 추가
    thirdFunction 호출 -> 스택에 thirdFunction 추가
    thirdFunction 종료 -> 스택에서 제거
    secondFunction 종료 -> 스택에서 제거
    firstFunction 종료 -> 스택에서 제거
*/

//결과값
1. Third Function
2. Second Function
3. First Function

 

• 재귀 함수 관리: 재귀 호출이 발생할 때 각 호출마다 콜 스택에 쌓이게 되며, 재귀 호출이 종료되면서 스택에서 하나씩 제거됩니다.
• 스택 오버플로우: 너무 많은 함수 호출이 스택에 쌓이면 스택 오버플로우가 발생할 수 있습니다.

2. 큐(Queue)

큐(Queue)는 데이터를 줄세우는 구조를 의미한다.

이때 앞에 있는 데이터가 먼저 삭제된다. 이러한 자료구조를 선입선출(FIFO,First-in_First-Out)이라 한다.

 

ex)

프린터 출력 과정

- 인쇄할때 데이터를 임시로 큐에 저장하고, 저장한 데이터를 앞에서부터 차례로 출력하는 것

큐 삽입(Enqueue) : 큐의 맨끝의 데이터 추가
큐 삭제(Dequeue) : 큐의 맨 앞의 데이터 삭제

 

 

 

• 작업 대기열 관리: 작업이 큐에 추가되고, 작업이 완료되면 큐에서 제거됩니다.
• 비동기 처리: 비동기 작업이나 이벤트 루프에서 큐를 사용하여 작업을 관리합니다.

 

 

class Queue {
    constructor() {
        this.items = []; 
    }

    push(string) {
        this.items.push(string);
    }
    pop() {
        return this.items.pop();
    }
    isEmpty() {
        return this.items.length === 0;
    }
}

// 큐 인스턴스 생성
let stacks = new Queue();
stacks.push('cho');
stacks.push('hyun');
stacks.push('nam');

// 큐의 요소를 순서대로 제거하면서 출력
while (!stacks.isEmpty()) {
    console.log(stacks.pop());
}

// return
1. nam
2. hyun
3. cho

콜스택(CallStack)과 힙 메모리(heep memory)는 다음에...