Where I must write "var" in this Javascript code?

Question

I must use a PHP variable instead of number in JavasSript, so I searched Stack Overflow, and it seems to me that I create a JavaScript variable like this:

var ToShow = "<?php Print($settings['posts_per_page_to_show']); ?>";

so I must change number with above code:

 slidesToShow: 2, 

Where do I need to add the JS variable in this code? Also how can I use the JS variable instead of 2 in this code?

Full code:

$(document).ready(function() {
  $('.vertical-center-4').slick({
    centerMode: false,
    slidesToShow: 2,
    infinite: true,
    slidesToScroll: 2,
    //speed: 300,
    autoplay: true,
    autoplaySpeed: 3000,
    variableWidth: false,
    responsive: [{
        breakpoint: 1024,
        settings: {
          slidesToShow: 2,
          slidesToScroll: 2,
          infinite: true,
          dots: true,
          variableWidth: false,
        }
      },
      {
        breakpoint: 600,
        settings: {
          slidesToShow: 1,
          slidesToScroll: 1
        }
      },
      {
        breakpoint: 480,
        settings: {
          slidesToShow: 1,
          slidesToScroll: 1
        }
      }
      // You can unslick at a given breakpoint now by adding:
      // settings: "unslick"
      // instead of a settings object
    ]
  });
});

Answer 1

so where must I add js variable in this code

: The variable can be declared inside the function outside the object.

also how can I write the js variable instead of 2 in this code? :

inside the object you will now have acces to the variable.

 $(document).ready(function(){
        var ToShow = "<?php Print($settings['posts_per_page_to_show']); ?>";
        $('.vertical-center-4').slick({
            centerMode: false,
            slidesToShow: ToShow,
            infinite: true,
            slidesToScroll: 2,
            //speed: 300,
            autoplay: true,
            autoplaySpeed: 3000,
            variableWidth: false,
            responsive: [
                {
                    breakpoint: 1024,
                    settings: {
                        slidesToShow: 2,
                        slidesToScroll: 2,
                        infinite: true,
                        dots: true,
                        variableWidth: false,
                    }
                },
                {
                    breakpoint: 600,
                    settings: {
                        slidesToShow: 1,
                        slidesToScroll: 1
                    }
                },
                {
                    breakpoint: 480,
                    settings: {
                        slidesToShow: 1,
                        slidesToScroll: 1
                    }
                }
                // You can unslick at a given breakpoint now by adding:
                // settings: "unslick"
                // instead of a settings object
            ]
        });
    });