Pagination, variable inside function for a loop

Question

I have little problem with my function fetch with api. I have variable currentPage outside function popular(), in that case everything works, but when Im trying declare inside function popular() that variable to get increment, then my number is still 1. Is there any way to get increment without declaring a global variable but with use local? After pressing the button (nextPage ()) the number of currentPage ++ should increase each time.

let currentPage = 1;   <--- //global variable(I dont want)

popular();
function popular(page) {

        fetch("https://api.themoviedb.org/3/movie/popular?api_key=xxxxxxxxxxxxxxxxxxx&page="+ page+"")
        .then(resp => resp.json())
        .then(resp => {

            movieApi = resp;
            movieResult = resp.results;
            maxLenght = resp.total_pages;
            document.getElementById("movie-section").innerHTML = `${movieResult.map(movieCard).join("")}`;
            document.getElementById("btns-container").innerHTML = paginationCont();
            shortText();
            function paginationPage(){

                console.log("maxLenght " +maxLenght);

                const btnNext = document.getElementById("nextBtn");
                const btnPrev = document.getElementById("prevBtn");
                function prevPage() {

                    if (currentPage > 1) {
                        currentPage--;
                        popular(currentPage);
                    }
                }
                function nextPage() {
                    if (currentPage < maxLenght) {
                        currentPage++;  <-- //it does not work when it declares inside
                        popular(currentPage);

                    }
                }


                btnNext.addEventListener("click", nextPage);
                btnPrev.addEventListener("click", prevPage);

            }
            paginationPage();
        });
    }

Possible duplicate of [What's the difference between using "let" and "var" to declare a variable in JavaScript?](https://stackoverflow.com/questions/762011/whats-the-difference-between-using-let-and-var-to-declare-a-variable-in-jav) — Ro Achterberg, Nov 18 '18 at 22:15

score 1 · Accepted Answer · answered Nov 18 '18 at 22:23

You can actually do without the value of currentPage, since you already have the page parameter which is local:

popular(1);
function popular(page) {
    // ...etc ...
    // ...
    function prevPage() {
        if (page > 1) popular(page-1);
    }
    function nextPage() {
        if (page < maxLenght) popular(page+1);
    }
    // ...
}

NB: you might want to review the spelling of the maxLenght variable ;-)

score 0 · Answer 2 · answered Nov 18 '18 at 22:16

The issue is that you need access to a persistent variable in order to keep track of the current page between popular calls. If you don't want a global variable, but are OK using an outer variable, one option is to create a currentPage variable which is only scoped to popular, and can't be seen or altered elsewhere: use an IIFE that declares currentPage and returns the current popular function:

const popular = (() => {
  let currentPage = 1;
  return (page) => {
    fetch( ...
    // ...
    // put the rest of the big function here
  };
})();
// make sure to call `popular` for the first time *after* the IIFE:
// function declarations are hoisted, but IIFEs are not
popular();

While currentPage is not local inside the (page) => { function, it achieves what you're looking for without any unnecessary global pollution.

Pagination, variable inside function for a loop

2 Answers2