I thought that I would take an example of code from a recent thread, and try it out on ChatGPT.
I started by giving it the code, and then asked it to improve the code.
All of the rest of this post is entirely generated by ChatGPT.
Prompt: Write refactoring instructions in the humorous style of Uncle Bob
Sure, here are the refactoring instructions in the humorous style of Uncle Bob:
- Tighten up that code with strict mode
It’s time to put your code through boot camp and whip it into shape. To start, enable strict mode by adding the following line of code at the top of your script:
"use strict";
- Const-antly improve your code
You need to start treating your variables with more respect. select and panels are good, upstanding citizens that don’t need to be reassigned, so let’s give them some respect by making them constants with const.
const select = document.querySelector(".mlduo-select");
const panels = document.querySelectorAll(".panels");
- Reduce those nested if statements
Your nested if statements are starting to look like a Matryoshka doll, and we need to break it down a bit. You can do this by returning early and avoiding the 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";
});
- Ditch the innerHTML and embrace DOM manipulation
You’re in the big leagues now, and we don’t use innerHTML around here. Instead, use DOM manipulation to create and modify your elements. Here’s an example:
const option = document.createElement("option");
option.value = "value";
option.text = "text";
select.appendChild(option);
- Use template literals to create dynamic strings
Concatenating strings can get messy, so let’s spice things up with template literals. They make it easy to create dynamic strings, like this:
const message = `Hello, ${name}!`;
- Make your code more modular with functions
Your code is starting to feel a bit unwieldy, so it’s time to break it up into smaller, more manageable pieces. Create some 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();
});
- Embrace arrow functions
Arrow functions are the new kid on the block, and they can help make your code more concise and readable. Here’s an example:
const double = x => x * 2;
- Use
querySelectorinstead ofgetElementById
You’re starting to feel like an adult now, so it’s time to start using querySelector instead of getElementById. This will make your code more flexible and reusable. Here’s an example:
const selectedPanel = document.querySelector(`#${select.value}`);
- Embrace array methods
You’ve been avoiding it, but it’s time to face the music and start using array methods like map, filter, and reduce. They can help simplify your code and make it more readable. Here’s an example:
const numbers = [1, 2, 3];
const doubledNumbers = numbers.map(number => number * 2);
- Avoid global variables
You’re starting to grow up, and with that comes the responsibility of avoiding global variables. Declare your variables in the scope where they’re needed, like this:
(function() {
const