Stack은 "쌓다"라는 의미를 가지고있고, 데이터를 하나하나 쌓아 올린 형태의 자료 구조입니다. stack은 동전쌓기를 예를 들으면 쉽게 이해할 수 있다. 동전을 하나하나 쌓아올리면 아래 동전을 다시 꺼내기 위해서는 가장 위에 있는 동전을 꺼내야한다.
이를 후입선출이라 하며, LIFO(Last In First Out)이라고 줄여서 말한다.
이와 다르게 Queue는 Stack과는 반대로 먼저 들어간게 먼저나옵니다.이는 선입선출이라 하며, FIFO(First In Frist Out)이라고 줄여서 말한다.
우선 예를 들어서 웹브라우저 동작원리를 말해보면
1+1
1초쉬고
2+2
3+3
이를 실행할때
자바스크립트로 하면
console.log(1+1);
setTimeout(function(){console.log(2+2),1000};
console.log(3+3);이렇게 실행되는데
이는 stack이라는 공간에서 실행된다.
특징은 하나라는 점이다.
그래서 자바스크립트는 보통 single threaded(한번에 코드하나만 실행이 가능하다)이다.
그곳에 들어가면 우선
console.log(1+1);
console.log(3+3);
는 실행되서 2와 6이 출력된다. 그리고 4가 출려된다.
그이유는
setTimeout(function(){console.log(2+2),1000};
우선 대기실로 보내고 실행한다.
*여기서 대기실로 보내는 코드
- Ajax요청코드
- 이벤트리스너
- setTimeout etc
대기실에 있다가 Stack으로 옮기기 전에 queue라는 곳에서 대기시키다가 stack으로 보낸다.왜나하면 stack공간에는 하나씩만 올릴 수 있기 때문이다. queue에서 대기하면서 하나씩 올라간다.
만약에,
setTimeout가 0초면, 2번째에 출력될까?
답은 아니다! setTimeout라면 무조건 대기실로 보낸다. 그러므로 0초여도 3번째로 출력된다.
가끔 for 반복문을 쓰기도 하지만 너무 많은 횟수가 반복되면 문제가 생길 수 있다.
오래 반복하면서 이벤트 리스너를 쓰게 되면 queue에서 stack으로 보내야 하는데 앞에서 반복문이 실행되고 있어서 올리지 못해서 멈추는 경우가 생길수 있다.
*결과적으로 stack은 바쁘게 만들어놓으면 안된다!
자바스크립트는 동기?비동기?
동기적으로 처리된다. 즉 한번에 한줄 순서대로 처리된다.
하지만 비동기적으로 처리하는 것도 있다.
(이벤트리스너,setTimeout, ajax함수 등)
[참고:코딩애플 유투브]
