title: How to sort first 10 ids in ascending order , then id = 11 - id = 20 in descending order followed by id = 21 to id = 30 in ascending order and so on
body: <p>I am making a board game using react. I am using an array of objects in the form</p>
  <pre><code>[
  { id : 1, tile : number, name : string},
  { id : 2, tile : number, name : string},
  { id : 3, tile : number, name : string},
  { id : 4, tile : number, name : string},
  { id : 5, tile : number, name : string},
  { id : 6, tile : number, name : string},
  { id : 7, tile : number, name : string},
  { id : 8, tile : number, name : string},
  { id : 9, tile : number, name : string},
  { id : 10, tile : number, name : string},
  { id : 11, tile : number, name : string},
  .
  .
  .
  { id : 100, tile : number, name : string},
  ]
  </code></pre>
  <p>I want to sort the id 1 -10 as ascending, 11 - 20 as descending, 21 - 30 as ascending 31 to 40 as desc, and so on.
  i have tried multiple methods</p>
  <ol>
  <li><p>splitting the entire array (having 100 objects) into groups of 10 and then applying sort (asc/desc) to them and finally using the concat() to get the final sorted array</p>
  </li>
  <li><p>using splice(0, 10).sort((a, b) =&gt; a.id &gt; b.id ? 1 : -1).map(value =&gt; value.id);
  //for first 10 ids
  spice(11, 20).sort((a, b) =&gt; a.id &gt; b.id ? 1 : -1).reverse().map(value =&gt; value.id);
  //for 11 - 20 ids and following the same pattern till 91 - 100.</p>
  </li>
  <li><p>putting conditions inside the sort itself (based on the units and tens place digits of the individual ids..)
  for eg :</p>
  <pre><code>const Tiles = [
  {}, {}, {}, ..... {}, //100 objects with unique ids
  ]
  
  const sortTiles = Tiles.sort((a : any, b : any) =&gt; 
  parseInt(String(a.id).charAt(0) % 2 == 0)? 1 : -1); //for sorting 20s, 40s, 60s, 80s digits as ascending...
  </code></pre>
  <p>but i want an optimal way of sorting the numbers as per the scheme I mentioned above.</p>
  <ul>
  <li><p>1 - 10 asc - left to right</p>
  </li>
  <li><p>11 - 20 desc - left to right</p>
  </li>
  <li><p>21 - 30 asc - left to right</p>
  </li>
  <li><p>31 - 40 desc - left to right</p>
  <p>... and so on.</p>
  </li>
  </ul>
  </li>
  </ol>
  <p>here is my code - please suggest better solutions</p>
  <pre><code> const Tiles = [
              {
                  id: 1,
                  tilenumber: 1,
                  name: &quot;start&quot;
              },
              {
                  id: 2,
                  tilenumber: 2,
                  name: &quot;two&quot;
              },
              {
                  id: 3,
                  tilenumber: 3,
                  name: &quot;three&quot;
              },
              {
                  id: 4,
                  tilenumber: 4,
                  name: &quot;four&quot;
              },
              {
                  id: 5,
                  tilenumber: 5,
                  name: &quot;five&quot;
              },
              {
                  id: 6,
                  tilenumber: 6,
                  name: &quot;six&quot;
              },
              {
                  id: 7,
                  tilenumber: 7,
                  name: &quot;seven&quot;
              },
              {
                  id: 8,
                  tilenumber: 8,
                  name: &quot;eight&quot;
              },
              {
                  id: 9,
                  tilenumber: 9,
                  name: &quot;nine&quot;
              },
              {
                  id: 10,
                  tilenumber: 10,
                  name: &quot;ten&quot;
              },
              {
                  id: 11,
                  tilenumber: 11,
                  name: &quot;eleven&quot;
              },
              {
                  id: 12,
                  tilenumber: 12,
                  name: &quot;tweleve&quot;
              },
              {
                  id: 13,
                  tilenumber: 13,
                  name: &quot;thirteen&quot;
              },
              {
                  id: 14,
                  tilenumber: 14,
                  name: &quot;fourten&quot;
              },
              {
                  id: 15,
                  tilenumber: 15,
                  name: &quot;fifteen&quot;
              },
              {
                  id: 16,
                  tilenumber: 16,
                  name: &quot;sixteen&quot;
              },
              {
                  id: 17,
                  tilenumber: 17,
                  name: &quot;seventeen&quot;
              },
              {
                  id: 18,
                  tilenumber: 18,
                  name: &quot;eighteen&quot;
              },
              {
                  id: 19,
                  tilenumber: 19,
                  name: &quot;nineteen&quot;
              },
              {
                  id: 20,
                  tilenumber: 20,
                  name: &quot;twenty&quot;
              },
              {
                  id: 21,
                  tilenumber: 21,
                  name: &quot;twentyone&quot;
              },
              {
                  id: 22,
                  tilenumber: 22,
                  name: &quot;twentytwo&quot;
              },
              {
                  id: 23,
                  tilenumber: 23,
                  name: &quot;twentythree&quot;
              },
              {
                  id: 24,
                  tilenumber: 24,
                  name: &quot;twentyfour&quot;
              },
              {
                  id: 25,
                  tilenumber: 25,
                  name: &quot;twentyfive&quot;
              },
              {
                  id: 26,
                  tilenumber: 26,
                  name: &quot;twentysix&quot;
              },
              {
                  id: 27,
                  tilenumber: 27,
                  name: &quot;twentyseven&quot;
              },
              {
                  id: 28,
                  tilenumber: 28,
                  name: &quot;twentyeight&quot;
              },
              {
                  id: 29,
                  tilenumber: 29,
                  name: &quot;twentynine&quot;
              },
              {
                  id: 30,
                  tilenumber: 30,
                  name: &quot;thirty&quot;
              },
              {
                  id: 31,
                  tilenumber: 31,
                  name: &quot;thirtyone&quot;
              },
              {
                  id: 32,
                  tilenumber: 32,
                  name: &quot;thirtytwo&quot;
              },
              {
                  id: 33,
                  tilenumber: 33,
                  name: &quot;thirtythree&quot;
              },
              {
                  id: 34,
                  tilenumber: 34,
                  name: &quot;thirtyfour&quot;
              },
              {
                  id: 35,
                  tilenumber: 35,
                  name: &quot;thirtyfive&quot;
              },
              {
                  id: 36,
                  tilenumber: 36,
                  name: &quot;thirtysix&quot;
              },
              {
                  id: 37,
                  tilenumber: 37,
                  name: &quot;thirtyseven&quot;
              },
              {
                  id: 38,
                  tilenumber: 38,
                  name: &quot;thirtyeight&quot;
              },
              {
                  id: 39,
                  tilenumber: 39,
                  name: &quot;thirtynine&quot;
              },
              {
                  id: 40,
                  tilenumber: 40,
                  name: &quot;fourty&quot;
              },
              {
                  id: 41,
                  tilenumber: 41,
                  name: &quot;fourtyOne&quot;
              },
              {
                  id: 42,
                  tilenumber: 42,
                  name: &quot;fourtyTwo&quot;
              },
              {
                  id: 43,
                  tilenumber: 43,
                  name: &quot;fourtyThree&quot;
              },
              {
                  id: 44,
                  tilenumber: 44,
                  name: &quot;fourtyFour&quot;
              },
              {
                  id: 45,
                  tilenumber: 45,
                  name: &quot;fourtyFive&quot;
              },
              {
                  id: 46,
                  tilenumber: 46,
                  name: &quot;fourtySix&quot;
              },
              {
                  id: 47,
                  tilenumber: 47,
                  name: &quot;fourtySeven&quot;
              },
              {
                  id: 48,
                  tilenumber: 48,
                  name: &quot;fourtyEight&quot;
              },
              {
                  id: 49,
                  tilenumber: 49,
                  name: &quot;fourtyNine&quot;
              },
              {
                  id: 50,
                  tilenumber: 50,
                  name: &quot;fifty&quot;
              },
              {
                  id: 51,
                  tilenumber: 51,
                  name: &quot;fiftyOne&quot;
              },
              {
                  id: 52,
                  tilenumber: 52,
                  name: &quot;fiftyTwo&quot;
              },
              {
                  id: 53,
                  tilenumber: 53,
                  name: &quot;fiftyThree&quot;
              },
              {
                  id: 54,
                  tilenumber: 54,
                  name: &quot;fiftyFour&quot;
              },
              {
                  id: 55,
                  tilenumber: 55,
                  name: &quot;fiftyFive&quot;
              },
              {
                  id: 56,
                  tilenumber: 56,
                  name: &quot;fiftySix&quot;
              },
              {
                  id: 57,
                  tilenumber: 57,
                  name: &quot;fiftySeven&quot;
              },
              {
                  id: 58,
                  tilenumber: 58,
                  name: &quot;fiftyEight&quot;
              },
              {
                  id: 59,
                  tilenumber: 59,
                  name: &quot;fiftyNine&quot;
              },
              {
                  id: 60,
                  tilenumber: 60,
                  name: &quot;Sixty&quot;
              },
              {
                  id: 61,
                  tilenumber: 61,
                  name: &quot;sixtyOne&quot;
              },
              {
                  id: 62,
                  tilenumber: 62,
                  name: &quot;sixtyTwo&quot;
              },
              {
                  id: 63,
                  tilenumber: 63,
                  name: &quot;sixtyThree&quot;
              },
              {
                  id: 64,
                  tilenumber: 64,
                  name: &quot;sixtyFour&quot;
              },
              {
                  id: 65,
                  tilenumber: 65,
                  name: &quot;sixtyFive&quot;
              },
              {
                  id: 66,
                  tilenumber: 66,
                  name: &quot;sixtySix&quot;
              },
              {
                  id: 67,
                  tilenumber: 67,
                  name: &quot;sixtySeven&quot;
              },
              {
                  id: 68,
                  tilenumber: 68,
                  name: &quot;sixtyEight&quot;
              },
              {
                  id: 69,
                  tilenumber: 69,
                  name: &quot;sixtyNine&quot;
              },
              {
                  id: 70,
                  tilenumber: 70,
                  name: &quot;Seventy&quot;
              }, {
                  id: 71,
                  tilenumber: 71,
                  name: &quot;seventyOne&quot;
              },
              {
                  id: 72,
                  tilenumber: 72,
                  name: &quot;seventyTwo&quot;
              },
              {
                  id: 73,
                  tilenumber: 73,
                  name: &quot;seventyThree&quot;
              },
              {
                  id: 74,
                  tilenumber: 74,
                  name: &quot;seventyFour&quot;
              },
              {
                  id: 75,
                  tilenumber: 75,
                  name: &quot;seventyFive&quot;
              },
              {
                  id: 76,
                  tilenumber: 76,
                  name: &quot;seventySix&quot;
              },
              {
                  id: 77,
                  tilenumber: 77,
                  name: &quot;seventySeven&quot;
              },
              {
                  id: 78,
                  tilenumber: 78,
                  name: &quot;seventyEight&quot;
              },
              {
                  id: 79,
                  tilenumber: 79,
                  name: &quot;seventyNine&quot;
              },
              {
                  id: 80,
                  tilenumber: 80,
                  name: &quot;Eighty&quot;
              }, {
                  id: 81,
                  tilenumber: 81,
                  name: &quot;eightyOne&quot;
              },
              {
                  id: 82,
                  tilenumber: 82,
                  name: &quot;eightyTwo&quot;
              },
              {
                  id: 83,
                  tilenumber: 83,
                  name: &quot;eightyThree&quot;
              },
              {
                  id: 84,
                  tilenumber: 84,
                  name: &quot;eightyFour&quot;
              },
              {
                  id: 85,
                  tilenumber: 85,
                  name: &quot;eightyFive&quot;
              },
              {
                  id: 86,
                  tilenumber: 86,
                  name: &quot;eightSix&quot;
              },
              {
                  id: 87,
                  tilenumber: 87,
                  name: &quot;eightySeven&quot;
              },
              {
                  id: 88,
                  tilenumber: 88,
                  name: &quot;eightyEight&quot;
              },
              {
                  id: 89,
                  tilenumber: 89,
                  name: &quot;eightyNine&quot;
              },
              {
                  id: 90,
                  tilenumber: 90,
                  name: &quot;Ninety&quot;
              }, {
                  id: 91,
                  tilenumber: 91,
                  name: &quot;ninetyOne&quot;
              },
              {
                  id: 92,
                  tilenumber: 92,
                  name: &quot;ninetyTwo&quot;
              },
              {
                  id: 93,
                  tilenumber: 93,
                  name: &quot;ninetyThree&quot;
              },
              {
                  id: 94,
                  tilenumber: 94,
                  name: &quot;ninetyFour&quot;
              },
              {
                  id: 95,
                  tilenumber: 95,
                  name: &quot;ninetyFive&quot;
              },
              {
                  id: 96,
                  tilenumber: 96,
                  name: &quot;ninetySix&quot;
              },
              {
                  id: 97,
                  tilenumber: 97,
                  name: &quot;ninetySeven&quot;
              },
              {
                  id: 98,
                  tilenumber: 98,
                  name: &quot;ninetyEight&quot;
              },
              {
                  id: 99,
                  tilenumber: 99,
                  name: &quot;ninetyNine&quot;
              },
              {
                  id: 100,
                  tilenumber: 100,
                  name: &quot;Hundread&quot;
              }
          ];
          
          /*var newSetTiles = Tiles.sort((a : any , b : any) =&gt;
          parseInt(String(a.id).charAt(0))%2 == 0 || parseInt(String(a.id).charAt(1)) == 0 ? 1 : -1);
          console.log(newSetTiles, 'sorted'); */
          
          
           
          const tileSetA = Tiles.slice(0, 10).sort((a : any, b : any) =&gt; a.id &gt; b.id ? 1 : -1);
      const tileSetB = Tiles.slice(11, 20).sort((a : any, b : any) =&gt; a.id &gt; b.id ? 1 : -1).reverse();
      const tileSetC = Tiles.slice(21, 30).sort((a : any, b : any) =&gt; a.id &gt; b.id ? 1 : -1);
       
      const concatSet = tileSetA.concat(tileSetB);
      const concatSet_ = concatSet.concat(tileSetB);
         console.log(concatSet_);    
          
          export default concatSet_;
  
  
   
  </code></pre>