자바스크립트 12. 자료구조(Data Structure) - 스택(Stack)

지금부터 자료구조에 대해서 기록해보자! 시작은 스택!

Photo by Iva Rajović on Unsplash

스택(stack)의 개념

스택은 겹겹이 쌓여 있는 모습을 생각하면 이해에 많은 도움이 된다. 위에 있는 사진을 보면서 생각을 해보자! 돌탑을 쌓기 위해서는 가장 먼저 아랫돌을 놓고 하나씩 쌓아 올려야 한다. 만약에 다 쌓고 나서 아랫돌을 꺼내고 싶을 때는 어떻게 해야할까?

(제발 발로 차거나 손으로 밀쳐서 무너뜨린 후에 아랫돌을 취한다 이런생각은 하지 마시길....)

 

아랫돌을 가져 갈 수 있도록 위에있는 돌을 하나씩 빼가면 된다. 돌탑을 만들고 돌을 빼는 과정을 살펴본다면. 먼저들어 온것이(아랫돌) 가장 나중에 나갈 수 있고, 늦게 들어오는 것(가장 윗돌)이 먼저나갈 수 있는 구조이다.

 

스택이 이렇다. 마지막에 들어온 것이 먼저나가는 LIFO(Last In First Out): 후입선출을 가진 자료구조이다. 

 

돌탑을 보면 알겠지만, 돌탑을 쌓기 위해서는 계속해서 같은 방향으로 차곡차곡 쌓아 올려야 흔들리지 않고 튼튼하게 쌓을 수 있다. 마찬가지로 스택도 정해진 방향에서 하나씩 쌓아지고 접근을 하기 위해서는 위에서 부터 하나씩 실행하거나 없애주어야 한다!

---

스택 활용 예시

스택은 후입 선출을 활용해서 많은 곳에서 사용되어지고 있다.

• 웹 브라우저 방문 기록 (뒤로가기) 
• 실행 취소 (컨트롤 + z)
• 수식의 괄호 검사
• 이전 음악 목록
• 프링글스 냠냠(먹고싶다)

---

스택의 메소드

이번 코드스테이츠 스프린트에서 스택의 메소드 3가지를 구현해 보았다.

• push(element) - 요소를 스택의 최상단(가장 위에돌로)에 추가합니다.

• pop() - 스택의 최상단에서 요소를 제거하고 반환합니다.

• size() - 스택의 현재 요소 갯수를 반환합니다.

---

스택의 구현

스프린트에서 스택의 구현은 우리는 객체를 활용해 주었다.

class Stack {
 constructor() {
  this.storage = {};
  this.top = 0;
}

1. push(element)

push(element)의 구현은 storage는 객체안에 새롭게 들어온 요소의 값을 넣어주고, 크기를 증가시켜 주었다.

 

2. pop()

스택의 가장 최상단에 있는 값을 제거하고, 미리 값을 받아 놓은 뒤에 반환시켜주고 크기를 하나 줄여 주었다.

 

3. size()

배열이었으면 해당하는 저장공간에 .length를 쓰면 바로 길이를 반환해서 크기를 알 수 있지만, 객체이기 때문에 다른 방법을 활용 하였다. Object.keys(); 이걸 활용해서 값을 구해주었다. 생각해보면 그냥 크기 값을 바로 반환해주면 되는 것 같다.

 

계속해서 자료구조를 기록해보자!