[JS] Prevent Stack Overflow

Exercise: Fix This Code

//fill array with 60000 elements
const list = new Array(60000).join('1.1').split('.');

function removeItemsFromList() {
    var item = list.pop();

    if (item) {
        removeItemsFromList();
    }
};

removeItemsFromList();

위의 recursive function 은 stack overflow 를 발생시킨다.

recursive call around 는 유지하면서 stack overflow 를 피하려면 어떻게 고쳐야할까?

 

---

Solution Code

const list = new Array(60000).join('1.1').split('.');

function removeItemsFromList() {
    var item = list.pop();

    if (item) {
      setTimeout(removeItemsFromList, 0);
    }
};

removeItemsFromList();

 

 

🔽 문제 코드 실행 시, 크롬 브라우저에서 스택오버플로 발생 

 

🔽 솔루션 코드 실행 시, 정상적으로 모든 작업 마침

setTimeout 에 의해 과정이 끝난 뒤 콜백함수 실행했기때문!!!

 

 

솔루션_코드_실행되는_과정.gif😲😲😲

(해당 이미지는 http://latentflip.com/loupe 이용해서 만들었고,
이해를 위해 setTimeout 의 delay 를 추가했습니다!)

 

문제 출처 : Udemy - JavaScript: The Advanced Concept 
https://www.udemy.com/course/advanced-javascript-concepts