title: How to Run functions synchronously in JavaScript?
body: <p>I'm new to JavaScript and React and am trying to move away from tutorials so have started making a simple app for my own learning benefit but have run into a roadblock with functions running asynchronously.</p>
  
  <p>In <code>onSearchSubmit</code>, there is a <code>setState</code> which has the following in its callback:</p>
  
  <pre><code>this.findSalaryRangeMin(data.advertiser.id, data.teaser);
  this.findSalaryRangeMax(data.advertiser.id, data.teaser);
  </code></pre>
  
  <p>How can I get these two functions above to run synchronously? <code>findSalaryRangeMax</code> uses <code>this.state.salaryLower</code> which is set in <code>findSalaryRangeMin</code>, but the <code>console.log</code> below reveals that <code>findSalaryRangeMax</code> is firing before <code>findSalaryRangeMin</code> has completed.</p>
  
  <pre><code>  findSalaryRangeMax = (advertiserId, teaser) =&gt; {
      console.log(`this.state.salaryLower: `, this.state.salaryLower);
      // ... More code
    };
  </code></pre>
  
  <p>I've read some resources which mention using promises, but I wasn't able to figure out how to apply it... I also am wondering whether it can be achieved with <code>async</code>/<code>await</code>.</p>
  
  <p><strong>Full(ish) Code:</strong>
  (I've removed some code for simplicity)</p>
  
  <pre class="lang-js prettyprint-override"><code>import React from "react";
  import JobSearch from "../api/jobSearch"; // axios
  import SearchBar from "./SearchBar";
  
  class App extends React.Component {
    state = {
      jobTitle: "",
      advertiser: "",
      salaryLower: "",
      salaryLowerTop: "",
      salaryUpper: "",
      salaryUpperTop: ""
    };
  
    findSalaryRangeMin = (advertiserId, teaser) =&gt; {
      this.setState({ salaryLower: 0, salaryLowerTop: 200000 }, async () =&gt; {
        let salaryLowerPrev;
        for (var i = 0; i &lt; 20; i++) {
          const response = await JobSearch.get(
            `http://localhost:3001/salary-range/${advertiserId}/${this.state.salaryLower}/${this.state.salaryLowerTop}/${teaser}`
          );
          console.log(response);
          if (response.data.totalCount === 1) {
            salaryLowerPrev = this.state.salaryLowerTop;
            this.setState({
              salaryLowerTop: Math.round(
                (this.state.salaryLowerTop - this.state.salaryLower) / 2 +
                  this.state.salaryLower
              )
            });
          } else {
            this.setState(
              {
                salaryLowerTop: salaryLowerPrev
              },
              () =&gt; {
                this.setState({
                  salaryLower: Math.round(
                    (this.state.salaryLowerTop - this.state.salaryLower) / 2 +
                      this.state.salaryLower
                  )
                });
              }
            );
          }
        }
      });
    };
  
    findSalaryRangeMax = (advertiserId, teaser) =&gt; {
      console.log(`this.state.salaryLower: `, this.state.salaryLower);
      // ... More code
    };
  
    onSearchSubmit = async term =&gt; {
      const response = await JobSearch.get(
        `http://localhost:3001/job-info/${term}`
      );
      if (response.data.totalCount === 1) {
        const data = response.data.data[0];
        this.setState(
          {
            jobTitle: data.title,
            advertiser: data.advertiser.description
          },
          () =&gt; {
            this.findSalaryRangeMin(data.advertiser.id, data.teaser);
            this.findSalaryRangeMax(data.advertiser.id, data.teaser);
          }
        );
      } else {
        console.log("totalCount not equal to 1: ", response.data.totalCount);
      }
    };
  
    render() {
      return (
        &lt;div&gt;
          &lt;SearchBar onSearchSubmit={this.onSearchSubmit} /&gt;
          &lt;hr /&gt;
          &lt;div&gt;
            Job Title: {this.state.jobTitle}
            Advertiser: {this.state.advertiser}
            Salary Lower Range: {this.state.salaryLower}
            Salary Upper Range: {this.state.salaryUpper}
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default App;
  
  </code></pre>
  
  <p>To give some context, the app I'm trying to make, queries an API for a jobs listing site. The API response doesn't reveal a salary range for an individual job, but the salary can fairly accurately be determined by querying salary ranges.</p>