Using ChatGPT to explain code

- [Instructor] In addition to generating code, AI pair programmers can be used to perform a long list of common tasks you do as you're writing your code. And in this chapter, I'll go through some them to show you how it's done, how the different tools work, and what kind of output you get from it. We'll start out with explaining code. This is really useful anytime you come to a project you haven't been working with for a while and you don't remember how it works, or if you come to a project that someone else wrote and you need to figure out how that particular code works, or even if you find a code example online and you wonder how the pieces fit together. I'll give you a basic example here. In the projects file for this course, there's a file called image.jsx. This is the fully built out version of that file, and at the top here there's a function called DINimg that does something. So instead of reading through the code, I'm just going to copy out that function and where it's called from. So it's called from down here. So I'll just copy this code in it's entirety and then I'll go over to ChatGPT and I'll say explain this code. And just paste it in. Let's see what it does. "This code is a JavaScript module that exports a single component called Image. This component is presumably intended for use in a react application." You are correct, "and it renders an HTML image element with a dynamic source URL and optional custom attributes. There are two main parts to the code." Ah-ha, here we have it. So the DINimg function, "This function takes three parameters, image, data, folder and type. It is responsible for constructing the image source URL based on the input parameters. If the folder parameter is provided and it concatenates the folder name, root image name, and file type, otherwise it just concatenates the root image and file type." Oh, interesting. So if we go over and look, it says, this function here generates the source down here and it receives these three values, these three properties and then it goes and checks to see if a folder name exists. And if it does, it adds the folder name, plus the name of the file, plus the file type, otherwise it just takes the name of the file and the file type and then it outputs it in this function here. Now of course, this is a fairly straightforward function and if you read through it, you can see what's happening. But what's important to note here is how ChatGPT is giving you this human language explanation of exactly what is going on. And you may wonder, how can it do this? Well, the simple answer is, code is logic, and computers speak logic. So the computer fully understands what is going on with the code. The only thing that's missing is the ability to speak to us humans. But since ChatGPT is a large language model trained on how to speak as a human, it can give us a human language output describing exactly what is going on in the code. Very cool.