Experiment: Using ChatGPT to provide detailed refactoring instructions

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:

  1. 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";
  1. 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");
  1. 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";
});
  1. 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);
  1. 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}!`;
  1. 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();
});
  1. 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;
  1. Use querySelector instead of getElementById

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}`);
  1. 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);
  1. 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
2 Likes

Who’s Uncle Bob?

1 Like

He’s Robert C Martin, a luminary that put together the ideas of code kata and clean coding. He mainly stays in the realm of Java instead of JavaScript, but many of his lessons are designed to be all encompassing instead of specific to just that language.

Here’s a worked example of using test-driven development to create a bowling scoring program. http://butunclebob.com/files/downloads/Bowling%20Game%20Kata.ppt

4 Likes

ChatGPT is also good many times in explaining causal flow and detailed logic of the code.

Yes but you can see that it is not nearly what I would call intelligent as it is optimized in some directions where it is very powerful but completely stupid on other things.

For example try to ask it abut the 5 best restaurants in your city. You will be surprised that a pizza delivery 50km away is in the list… (Just to specify: I gave him the name of my city and not even asked him to guess where II live. Also I do not live in the middle of nowhere and we have many really good restaurants here)

1 Like

Hello,

It’s great to hear that you’re interested in using ChatGPT to provide detailed refactoring instructions. While ChatGPT is capable of generating detailed and informative responses, it’s important to keep in mind that the quality and accuracy of the instructions may vary based on a variety of factors such as the input provided, the context, and the limitations of natural language processing.

That being said, I’d be happy to assist you with any refactoring-related questions or issues you may have. If you provide me with specific details about the code you’re working on and the desired outcome, I can provide you with detailed instructions on how to refactor your code in a clear and concise manner.

Alternatively, if you would like to know more about refactoring in general or would like to learn more about specific refactoring techniques, I can point you in the direction of some helpful resources and provide you with some general tips and guidelines.

Please feel free to provide me with more information about your specific needs and requirements, and I’ll do my best to provide you with the assistance you need.

Best regards,
Darrel

Sorry, but I think you might have missed the post of this thread.

Paul is our resident javascript expert, and has hundreds of posts here focused on refactoring. The purpose of the post was to gauge how helpful and up to date ChatGPT was in coding today, and as this shows, while it’s provided some valid guidance, it’s still got a way to go.

3 Likes

I’m interested to know how you rate the refactoring advice. I consider myself too much a novice at javascript to pass judgement on it, though it does appear convincing to me. Being more familiar with PHP I found this interesting reading. It’s a blog post by one of the forum members, the idea was to give ChatGPT an interview for a PHP job.
The result was, it was largely unimpressive in its coding ability. It also reveals that although very well trained in human language, it isn’t well trained in programming language. In fact it appears to do just what almost every coding newbe does and scrape up borrowed knowledge from wherever they can online, in complete ignorance of the quality, age of the code or current best practice. (I know because I’ve been there)
While it does take advice and make improvements based on that, it still fails to grasp some of the points made.
Another thing we have seen in the forums lately are people using ChatGPT to answer questions.
[Yes I’m watching you guys]
But what I generally see is that although the answers appear well written and fact based, they are quite generic and unuseful, often not addressing the unique nuances that are key to the particular problem.
In discussing AI we could discuss the topic of “what is intellegence?” and “is this it?” ChatGPT apears to be something with a very good command of the English language, backed up with a wealth of knowledge scraped from the internet. But while we all know the internet holds a wealth of information, many of us also know that the quality and truthfulness of information on-line varies greatly.
Rather like an “educated fool” it communicates so convincingly with such impecable grammar on any given subject, that when takling to the layman it gives the illusion of a great depth of knowledge and understanding. But when faced with someone who knows about the given subject, they will likely see through the very thin level of real understanding.
Hence the javascript refactoring seems convincing, yet the PHP doesn’t cut it for me.

2 Likes

Here’s the refactorings it was suggesting:

  1. Tighten up that code with strict mode
  2. Const-antly improve your code
  3. Reduce those nested if statements
  4. Ditch the innerHTML and embrace DOM manipulation
  5. Use template literals to create dynamic strings
  6. Make your code more modular with functions
  7. Embrace arrow functions
  8. Use querySelector instead of getElementById
  9. Embrace array methods
  10. Avoid global variables

While they’re all good advice, everything from number 3 onwards wasn’t relevant to the code being worked on, which started off as:

      jQuery(".mlduo-select").on("select2:select", function() {
          jQuery(".panels").hide();
          var selectedItem = jQuery(this).select2().val();
          jQuery("#" + selectedItem).show();
      });
2 Likes

When it comes to coding, at present, ChatGPT will give you an inteligible response, not necessarily an inteligent response.

2 Likes

To be honest. I am not sure if this leads not to an even more dangerous use of the internet as it already is.

By now you use google (or similar) to search for answers and you get sometimes really fake information. But at the end you get multiple results, see the sources and maybe some ratings on the articles which makes you able to rate it for yourself.

Asking something to chatGPT you get an answer without the knowledge of the source (which for example makes me wonder how this is compatible with all copyrights) and you have no chance to check if the informations are right.

At the end this might be a big tool to give us information which other people (let’s think about governments or big companies like google etc) use to wash our minds.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.