title: Debugging: ESLint Warning "Function declared in a loop contains unsafe references to variable(s)...no-loop-func"
body: <p>Building a Sort-Visualizer in React using the Create-React-App [<a href="https://roy-05.github.io/sort-visualizer/" rel="noreferrer">https://roy-05.github.io/sort-visualizer/</a> ]</p>
  
  <p>I'm animating each iteration of the loop using setTimeouts. On dev console I get the following warning:</p>
  
  <blockquote>
    <p>Line 156:32:  Function declared in a loop contains unsafe references to variable(s) 'minimum', 'minimum', 'minimum', 'minimum'  no-loop-func</p>
  </blockquote>
  
  <p>Here's the code-snippet:</p>
  
  <pre><code>for(let i=0; i&lt;arr.length-1; i++){
              let minimum = i; //Declare minimum here
              setTimeout(()=&gt;{
                  for(let j = i+1; j&lt;arr.length; j++){
                      setTimeout(()=&gt;{
                          //Getting a warning for these references:
                          array_bar[j].style.backgroundColor = 'red';
                          array_bar[minimum].style.backgroundColor = 'blue';
                          setTimeout(()=&gt;{
                              if(arr[j] &lt; arr[minimum]){
                              array_bar[minimum].style.backgroundColor = 'lightblue';
                              minimum = j; 
                              }  
                              else{
                                  array_bar[j].style.backgroundColor = 'lightblue';
                              }  
                          }, 4);
                      }, (j-1)*4);    
                  }
  </code></pre>
  
  <p>Going through <a href="https://eslint.org/docs/rules/no-loop-func" rel="noreferrer">ESLint Docs</a>, I believe the issue might be that i'm modifying the value inside the setTimeout but the variable is declared outside its scope.</p>
  
  <p>I'm not sure how to fix that warning, any help will be appreciated!</p>
  
  <p>Note: Here's the entire function if you need it - </p>
  
  <pre><code>selectionSort(){
          const arr = this.state.array,
              array_bar = document.getElementsByClassName("array-elem");
  
          this.setState({startedSelectionSort: true});
  
          for(let i=0; i&lt;arr.length-1; i++){
              let minimum = i; //Declare minimum here
              setTimeout(()=&gt;{
                  for(let j = i+1; j&lt;arr.length; j++){
                      setTimeout(()=&gt;{
                          //Getting a warning for these references:
                          array_bar[j].style.backgroundColor = 'red';
                          array_bar[minimum].style.backgroundColor = 'blue';
                          setTimeout(()=&gt;{
                              if(arr[j] &lt; arr[minimum]){
                              array_bar[minimum].style.backgroundColor = 'lightblue';
                              minimum = j; 
                              }  
                              else{
                                  array_bar[j].style.backgroundColor = 'lightblue';
                              }  
                          }, 4);
                      }, (j-1)*4);    
                  }
                  setTimeout(()=&gt;{
                      let temp = arr[i],
                      arr1_height = arr[minimum],
                      arr2_height = arr[i];
  
                      arr[i] = arr[minimum];
                      arr[minimum] = temp;
  
                      array_bar[i].style.height = `${arr1_height}px`;
                      array_bar[minimum].style.height = `${arr2_height}px`;
  
                      array_bar[i].style.backgroundColor = "green";
                      if(i !== minimum){
                          array_bar[minimum].style.backgroundColor = 'lightblue';
                      }
                  }, 400);
  
  
                  if(i === arr.length-2){
                      setTimeout(()=&gt;{
                          array_bar[i+1].style.backgroundColor = "green";
                      },800);
                  }
  
              }, i*400);
          }
  
          setTimeout(()=&gt;{
              this.setState({sorted: true})
          }, arr.length*400+1750);
  
      }
  </code></pre>