CodeSOD: The Wizard of Speed and Time

Christopher started a new job as a "full-stack" developer. Unfortunately, most of the developers are still on the "why do you need anything other than jQuery" school of front-end development, despite efforts to transition their UIs to Vue.

This meant that Christopher didn't do much backend, and ended up being the mid-level front-end dev, in practice if not in job title.

One of the Vue components was a "Wizard" style component, which was designed to be highly configurable. You supply a JSON description of the Wizard process, and it would generate the UI to navigate you screen-by-screen. Since Christopher was new at the organization, he wanted to understand how the Wizard worked, so he started poking at the code.

He got as far as the stepBack function before deciding he needed to rewrite it from scratch. Christopher assumed that stepBack could be as simple as popping the last element off the array of previous steps, and then update what's currently displayed. That, however, isn't what it did at all.

stepBack () { let pastItems = [] for (var i in this.pastStepsIds) { if (pastItems.length === 0) { pastItems.push(this.pastStepsIds[i]) } for (var j in pastItems) { if (pastItems[j] === this.pastStepsIds[i]) { continue } pastItems.push(this.pastStepsIds[i]) } } if (pastItems.length) { this.showAnswer = false this.turnOffSteps(this.stepAtual) this.currentStep = this.changeTextStep(this.getStepById(pastItems[pastItems.length - 1])) this.turnOnStep(true) }}

Step IDs were named things like "welcome", "more-info", and "collect-user-info". pastStepsIds would contain an array of all of those.

What this code does is take the pastStepsIds and copies it into a local pastItems array. Except it's not a straightforward copy, because of the inner for loop, which examines each item in the local array, and if the current item in the pastStepsIds array is equal to that item, we skip back to the beginning of the inner for loop.

The result is that this doesn't copy the array, but exponentiates it. If the pastStepsIds looked something like ["welcome", "more-info", "collect-user-info", "confirm"], the loops would create: ["welcome", "more-info", "collect-user-info", "collect-user-info", "confirm", "confirm", "confirm"].

If that array has more than zero elements in it, we'll return to the last step in the pastItems array.

Christopher spent a good bit of time thinking, "WHYYYYYYY?". After some consideration, he decided that he didn't deserve this code, and re-wrote it. In one day, he reimplemented the Wizard component, which probably saved him months of effort trying to fight with it in the future.

[Advertisement] Otter - Provision your servers automatically without ever needing to log-in to a command prompt. Get started today!