ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • 자바스크립트 Chapter 27 ~ 29 Data Structures, Algorithms, Big O Notation
    Computer Science/Algorithm, Data Structure 2019.05.23 14:07

     

    모든 자바스크립트 개발자가 알아야 하는 33가지 개념

     

    Chapter 27 Data Structures

     

    Chapter마다 도장깨기 하듯이 공부를 하니까

     

    어느새 27장까지 왔다.

     

    Chapter 27 ~ 29까지는

     

    자료 구조, Big O 표기, 알고리즘을 다룬다.

     

    자료구조와 알고리즘에서는

     

    스택, 큐, 연결 리스트, 트리, 그래프, 해쉬 테이블을

     

    그리고 Big O 표기를 이론 공부를 해보자.

     

    스택(Stack)

     

    자바스크립트에서 가장 중요한 스택(Stack)은

     

    함수를 실행할 때마다 함수의 범위를 밀어 넣는 Call Stack(호출 스택)이다.

     

    출처: Wikipedia

     

    스택은 두 가지 연산을 통해 요소 컬렉션으로 사용된다.

     

    LIFO(Last in First Out)

     

    푸시(push) - 맨 위에 요소를 추가한다.

     

    팝(pop) - 가장 최근에 추가된 요소를 제거한다.

     

    스택의 순서를 반대로 할 수 있다.

     

    맨 아래가 맨 위가 되고 맨 위가 맨 아래가 된다.

     

    따라서 push와 pop 대신

     

    배열의 unshift, shift 메서드를 사용하면 된다.

     

    Array.prototype.push()

     

    push() 메서드는 배열의 끝에 하나 이상의 요소를 추가하고, 배열의 새로운 길이를 반환한다.

     

    Array.prototype.pop()

     

    pop() 메서드는 배열에서 마지막 요소를 제거하고 그 요소를 반환한다.

     

    Array.prototype.unshift() 

     

    unshift() 메서드는 새로운 요소를 배열의 맨 앞쪽에 추가하고, 새로운 길이를 반환한다.

     

    Array.prototype.shift()

     

    shift() 메서드는 배열에서 첫 번째 요소를 제거하고, 제거된 요소를 반환합니다.

     

    이 메서드는 배열의 길이를 변하게 한다.

     

    const Stack = () => {
        let dataStore = [];
        return {
            push(element) {
                dataStore.push(element);
            },
            pop() {
                return dataStore.pop();
            },
            peek() {
                return dataStore[dataStore.length - 1];
            },
            get length() {
                return dataStore.length;
            },
            clear() {          
              dataStore = [];
            }
        }
    }
    
    const stack = Stack()
    
    stack.push(1)
    stack.push(2)
    console.log(stack.length) // 2
    console.log(stack.peek()) // 2
    console.log(stack.pop()) // 2
    console.log(stack.clear()) 
    console.log(stack.length) // 0

     

    큐(Queue)

     

    자바스크립트는 논 블로킹(Non-blocking) 작업을 지원할 수 있는 

     

    이벤트 중심 프로그래밍(Event-driven-programming) 언어이다.

     

    내부적으로 브라우저는 전체 JavaScript 코드를 실행하기 위해 하나의 스레드만 관리하며, 

     

    Event Queue을 사용하여 enqueue(큐에 자료를 보관하는 연산),

     

    이벤트 루프(Event Loop)를 사용하여 등록된 이벤트를 받는다.

     

    단일 스레드 환경에서 비동기를 지원하기 위해 (CPU 리소스를 절약하고 웹 환경을 향상하기 위해) 

     

    리스너 함수는 호출 스택(Call Stack)이 비어있을 때만 dequeue(큐에서 꺼내는 연산) 그리고 실행한다.

     

    Promises은 이 이벤트 기반 아키텍처에 따라

     

    다른 작업을 차단하지 않는 비동기 코드의 

     

    "동기 스타일" 실행을 허용한다.

     

    출처: Wikipedia

     

    const Queue = () => {
        let dataStore = [];
        return {
            enqueue(element) {
                dataStore.unshift(element);
            },
            dequeue() {
                return dataStore.pop();
            },
            peek() {
                return dataStore[dataStore.length - 1];
            },
            get length() {
                return dataStore.length;
            },
            clear() {          
              dataStore = [];
            }
        }
    }
    
    const queue = Queue()
    
    queue.enqueue(1)
    queue.enqueue(2)
    queue.enqueue(3)
    console.log(queue.length) // 3
    console.log(queue.peek()) // 1
    console.log(queue.dequeue()) // 1
    console.log(queue.clear()) 
    console.log(queue.length) // 0

    댓글 0

Posted by JeongWoo