Understanding JavaScript Closures in For Loops

How do you pass a variable into a function inside a loop?
It always ends up taking the last value!
What gives?

Let’s suppose you’re lucky enough to work for a company that gives annual cost-of-living pay increases. Let’s also suppose the corporate payroll system is written in JavaScript. (Why not? everything seems to be JavaScript these days)

And, because we’re big enterprise, our system is rife with inefficiency and we’ve over-engineered everything. Below is what the payroll function looks like. (This is a totally contrived example… so you’ll have to practice suspension of disbelief rather than ask why it’s designed so poorly)

// Queue jobs to assign employee pay increases
function queueEmployeeRaises(employees, jobQueue, database, multiplier) {
  for (var i = 0; i < employees.length; i++) {
    var employee = employees[i];
    jobQueue.push(function() {
      if (employee.title == 'CEO') {
        employee.salary = employee.salary * Math.max(1.20, multiplier);
      }
      else {
        employee.salary = employee.salary * Math.min(multiplier, 1.02);
      }
      database.save(employee);
    });
  }
}

Continue reading “Understanding JavaScript Closures in For Loops”

Understanding JavaScript Closures in For Loops

Improve SEO with a Simple Tweak to Your Webpack File-Loader Config

You’re building a website — more than a website… a modern web app — and you’re not shy about using JavaScript. But all that JavaScript sent you directly to Webpack.

go-directly-to-webpack-do-not-use-gulp

The problem with Webpack and the file-loader (well, one of the problems) is that they will happily mangle all your filenames by default. Don’t let this happen. You’re losing valuable SEO juice.

Continue reading “Improve SEO with a Simple Tweak to Your Webpack File-Loader Config”

Improve SEO with a Simple Tweak to Your Webpack File-Loader Config

Has Redux-Saga Got You Stuck In an Infinite Loop?

You might start out with a saga that looks something like the following code. No problem, it runs perfectly.

function* fetchSomethingSaga() {
    // Run this saga forever
    while (true) {
        // Wait for a fetch request
        const action = yield take(Action.FETCH_SOMETHING_REQUEST);

        // Extract the id of what we need to fetch
        const id = action.payload;

        try {
            // Make the API call
            const thing = yield call(apiClient.get, `/thing/${id}`);

            // We succeeded, return the thing
            yield put(fetchSomethingSuccess(thing));
        catch (err) {
            // We failed, report the error
            yield put(fetchSomethingFailure(err));
        }
    }
}

At some point, you decide to replace take with takeEvery so your saga can handle concurrent requests. Or you replace it with takeLatest so you can process the most recent request.

But… your events start firing in an infinite loop. Hey, what gives?

Continue reading “Has Redux-Saga Got You Stuck In an Infinite Loop?”

Has Redux-Saga Got You Stuck In an Infinite Loop?