본문 바로가기
Front-End

[JS] 스택

by Judy 2020. 5. 8.

배열의 원하는 위치에 원소를 넣고 뺄 수 있음.

 

단지 원소를 추가/삭제하는 것 이상의 제어를 할 수 있는 형태의 자료 구조가 필요한 경우가 있는데, 바로 배열과 유사한 자료 구조인 스택과 큐가 있다.

 

1. 스택 (LIFO-Last In First Out)

- 스택의 자료는 항상 동일한 종단점에서 추가/삭제된다.

- 스택에서 종단점은 꼭대기와 바닥입니다.

- 프로그래밍 언어의 컴파일러에서도 사용하는 자료 구조로서, 변수나 메소드 호출을 컴퓨터 메모르에 저장할 때 쓰인다.

 

2. 스택 만들기

function Stack() {
  // 프로퍼티와 메소드는 여기에 기술
}

let items = [] // 스택의 원소를 담아둘 자료 구조

- push (원소) : 스택 꼭대기에 새 원소를 추가한다.

- pop(): 스택 꼭대기에 있는 원소르르 반환하고 해당 원소는 스택에서 삭제한다.

- peek(): 스택 꼭대기에 있는 원소를 반환하되 스택은 변경하지 않는다. (스택을 참조하는 용도)

- isEmpty(): 스택에 원소가 하나도 없으면 true, 스택의 크기가 0보다 크면 false를 반환한다.

- clear(): 스택의 모든 원소를 삭제한다.

- size(): 스택의 원소 개수를 반환한다. 배열의 length프로퍼티와 비슷하다.

 

2-1. push() - 새로운 원소를 추가하는 메소드

this.push = function(element) {
  items.push(element);
}

 

2-2. pop() - 스택에서 원소를 삭제하는 메소드

this.pop = function(element) {
	return items.pop();
}

 

2-3. peek() - 일종의 헬퍼(helper) 메소드 (가장 마지막으로 추가된 원소를 확인하는 용도)

this.peek = function() {
	return items[items.length-1];
}

 

2-4. isEmpty 메소드 - 스택이 비어 있으면(원소가 없으면) true, 아니면 false를 반환

this.isEmpty = function() {
	return items.lengt == 0;
}

 

2-5. size() - Array.length처럼 staack 클래스에도 비슷한 프로퍼티

this.size() = function() {
	return items.length; // 단순히 내부 배열의 length를 반환
}

 

2-6. clear 메소드 - 스택의 모든 원소를 깔끔히 청소하는 환경

this.clear = function() {
	items = [];
}

 

2-7. print - 스택에 쌓인 내용물을 콘솔에서 확인해보는 헬퍼 메소드

this.print = function() {
	console.log(items.toString());
}

 

 

전체보기

function Stack() {
	let items = [];
    
    this.push = function(element) {
    	items.push(element);
    }
    this.pop = function() {
    	return items.pop();
    }
    this.peek = function() {
    	return items[itmes.length - 1];
    }
    this.isEmpty = function() {
    	return items.length == 0; // true / false
    }
    this.size = function() {
		return items.length;
    }
    this.clear = function() {
    	items = [];
	}
    this.print = function() {
    	console.log(items.toString());
    }
}

 

 

 

 

 

'Front-End' 카테고리의 다른 글

[React] 리액트란  (0) 2020.05.12
[Vanilla JS] Animation Mouse cursor (Covid-19)  (0) 2020.05.08
[JS] Button style animation  (0) 2020.05.07
[JS] Mouseover Event  (0) 2020.05.07
[ React ] React 셋팅  (0) 2020.05.06