Experiment: Using ChatGPT to provide detailed refactoring instructions – JavaScript – SitePoint Forums

I took a code example from a recent thread and thought I’d try it on ChatGPT.
I started by providing the code and asked them to improve it.

All the rest of this post is completely generated by ChatGPT.

Prompt: Write refactoring instructions in Uncle Bob’s humorous style

Indeed, Uncle Bob’s humorous style refactoring steps are:

1. harden that code in strict mode

It’s time to take the code through bootcamp and shape it. First, enable strict mode by adding the following line of code at the top of your script:

"use strict";

2. Always improve your code

You should start treating variables with more respect. select and panels Good and honorable citizens that don’t need to be reassigned, so keep them constant and respect them const.

const select = document.querySelector(".mlduo-select");
const panels = document.querySelectorAll(".panels");

3. Reduce nested if statements

Nested if statements are starting to look like matryoshka dolls, so I need to break them down a bit. To do this, return early and avoid nested ifs.

select.addEventListener("change", function() {
  panels.forEach(function(panel) {
    panel.style.display = "none";
  });

  const selectedPanel = document.getElementById(select.value);
  if (!selectedPanel) return;

  selectedPanel.style.display = "block";
});

4. Ditch innerHTML and embrace DOM manipulation

you’re in the big leagues now but we don’t use innerHTML Around here. Instead, use DOM manipulation to create and modify elements. For example:

const option = document.createElement("option");
option.value = "value";
option.text = "text";
select.appendChild(option);

5. Create dynamic strings using template literals

String concatenation can get tedious, so let’s spice things up with template literals. You can easily create a dynamic string like this:

const message = `Hello, ${name}!`;

6. Use functions to make your code more modular

Now that the code is getting a little unwieldy, it’s time to break it down into smaller, more manageable pieces. Create a few functions to handle specific tasks, like this:

function hidePanels() {
  panels.forEach(panel => {
    panel.style.display = "none";
  });
}

function showSelectedPanel() {
  const selectedPanel = document.getElementById(select.value);
  if (!selectedPanel) return;
  selectedPanel.style.display = "block";
}

select.addEventListener("change", function() {
  hidePanels();
  showSelectedPanel();
});

7. Adopt an arrow function

Arrow functions are new children of blocks and help make your code more concise and readable. For example:

const double = x => x * 2;

8. use querySelector Excluding that getElementById

Start using it when you feel like an adult querySelector Excluding that getElementByIdThis makes the code more flexible and reusable. For example:

const selectedPanel = document.querySelector(`#${select.value}`);

9. accept array methods

You’ve been avoiding it, but face music, it’s time to start using array methods like map, filterand reduce. Helps simplify code and make it easier to read. For example:

const numbers = [1, 2, 3];
const doubledNumbers = numbers.map(number => number * 2);

10. avoid global variables

You’re starting to grow, and with that comes the responsibility to avoid global variables. Declare the variable in the scope where you want it, like this:

(function() {
  const