Code reduction and variable declaration

Question

Good morning. I have 8 different variables with the same functions.

However, the functions assigned to these variables are equal.

I feel like I’m being repetitive in the code.

There is some way to declare them all at once and the function is written only once, but equivalent to all 8 Variables?

<script>
         $(document).ready(function() {
         
           var owl = $("#owl-demo");
         
           owl.owlCarousel({

               [700, 7],
               [1000, 8],
               [1200, 8],
               [1400, 8],
               [1600, 8]
             ],
             
         
           });
         
         var owl = $("#owl-demo2");
         
           owl.owlCarousel({
     
             
               [600, 5],
               [700, 7],
               [1000, 8],
               [1200, 8],
               [1400, 8],
               [1600, 8]
             ],
             
         
           });
           var owl = $("#owl-demo3");
         
           owl.owlCarousel({
       
      
               [700, 7],
               [1000, 8],
               [1200, 8],
               [1400, 8],
               [1600, 8]
             ],
             
         
           });
         
           var owl = $("#owl-demo4");
         
           owl.owlCarousel({
         
          
           
               [1400, 8],
               [1600, 8]
             ],
             
         
           });
         
         
           var owl = $("#owl-demo5");
         
           owl.owlCarousel({
         
   
  
               [1200, 8],
               [1400, 8],
               [1600, 8]
             ],
             
         
           });
         
         
           var owl = $("#owl-demo6");
         
           owl.owlCarousel({
         
      
    
               [1600, 8]
             ],
             
         
           });
         
         
           var owl = $("#owl-demo7");
         
           owl.owlCarousel({
  
             

           });
         
         
           var owl = $("#owl-demo8");
         
           owl.owlCarousel({


               [1200, 8],
               [1400, 8],
               [1600, 8]
             ],
             
         
           });
         
           var owl = $("#owl-demo9");
         
           owl.owlCarousel({
    
               [450, 4],
               [600, 5],
               [700, 7],
               [1000, 8],
               [1200, 8],
               [1400, 8],
               [1600, 8]
             ],
             
         
           });
         
         
         });
      </script>

Answer 1

Yeah, with a loop. Note: You may need to create a list to represent objects with numbers (I still have no idea what an "owlCarousel" and "Owl" would be").

In this code I do not create a variable for each #owl-demo, I just keep in an object Array and then to be used.

Note: There is a digit error in the code, because in an object constructor you cannot declare nameless properties, or you are not in next generation Javascript.

var owlsData = [

    [[700, 7],
    [1000, 8],
    [1200, 8],
    [1400, 8],
    [1600, 8]],

    [[1400, 8],
    [1600, 8]],

    [[1200, 8],
    [1400, 8],
    [1600, 8]],

    [[1600, 8]],

    [[1200, 8],
    [1400, 8],
    [1600, 8]],

    [[450, 4],
    [600, 5],
    [700, 7],
    [1000, 8],
    [1200, 8],
    [1400, 8],
    [1600, 8]]

];

for (var i = 1, o, owls = [];
    i++ <= 9 && owls.push(o = $("#owl-demo" + (i === 1 ? "" : i)));)
    o.owlCarousel(owlsData[i - 1]);

Now you can access each element in owls.