# Programming and developing new friends - ChatGPT and NotionAI in practice

Without further ado, this article brings 4 practical scenarios that help us program and develop with the help of AI, namely:

1. Interpretation of AI code

2. AI perfect code

3. AI correction code

4. AI test code

The Q&A comes from ChatGPT and NotionAI, I believe you can feel the charm of AIGC~

I like Sanlian, refill~

Related reading: Why do I recommend Notion AI over ChatGPT? - Nuggets

## AI Code Interpretation

⭐Enter:

```//Explain what the following code does
function calculateDistance(x1, y1, x2, y2) {
return Math.sqrt(Math.pow(x1 - x2, 2) + Math.pow(y1 - y2, 2));
}```
copy

### ChatGPT

output:

This code is a function to calculate the Euclidean distance between two points. Where (x1, y1) and (x2, y2) represent the coordinates of two points, the function calculates the distance between them by using the Pythagorean theorem and returns the result.

### NotionAI

output:

The function calculateDistance(x1, y1, x2, y2) is used to calculate the distance between two points, where x1 and y1 represent the coordinates of the first point, and x2 and y2 represent the coordinates of the second point. This function calculates the distance between two points using the Pythagorean theorem, which is the value of (x1 - x2)^2 + (y1 - y2)^2 by taking the square root.

⭐Enter:

```//Write comments for the following functions
const debounce = (func, wait) => {
let timer
return () => {
clearTimeout(timer)
timer = setTimeout(func, wait);
}
}```
copy

ChatGPT output:

This is a debounce function implemented in JavaScript. The debounce function takes two parameters: "func" and "wait". The "func" parameter indicates the function to be executed after waiting the time specified by "wait".

The debounce function returns an anonymous function that sets a timer. If the timer already exists, it will be cleared with "clearTimeout(timer)". Then, use "setTimeout(func, wait)" to set a new timer, ensuring that even if the anonymous function is called multiple times within the specified time period, the "func" function will only be executed once after the wait time elapses.

NotionAI output:

// The debounce function is used to limit the frequency of function calls.

// It returns an anonymous function that calls the passed in function after the specified wait time and clears the last timer.

## AI Perfects Code

⭐Enter:

```// Generate new code based on the following code
const className = "my-div";
const text = "Hello world!";```
copy

### ChatGPT

output:

```const element = document.createElement("div");
element.className = className;
element.textContent = text;
document.body.appendChild(element);```
copy

### NotionAI

output:

```// Styling a div with a class
<div class="my-div">Hello world!</div>```
copy

## AI correction code

⭐Enter:

```// Fix the following code errors
function List(props) {
const items = props.items; // error: items is undefined
return (
<ul>
{items.map(item => (
<li key={item.id}>{item.name}</li>
))}
</ul>
);
}```
copy

### ChatGPT

output:

```// Here is the corrected code:
function List(props) {
const { items = [] } = props;
return (
<ul>
{items.map(item => (
<li key={item.id}>{item.name}</li>
))}
</ul>
);
}```
copy

In this code, the props object is destructured to get the items property. If props doesn't have an items property, it will default to an empty array [].

It also sets a default value for items , so strong!

### NotionAI

output:

```function List(props) {
const items = props.items;
if (items &amp;&amp; items.length > 0) {
return (
<ul> {items.map(item => ( <li key={item.id}>{item.name}</li> ))} </ul>
);
}
return null;
}```
copy

Notion AI can also repair the code and make conditional judgments, which is too strong!

## AI test code

⭐Enter:

```// Test the following code
const testCases = [
{length: 2, width: 3, expected: 6},
{length: 4, width: 5, expected: 20},
{length: 6, width: 7, expected: 42},
];```
copy

### ChatGPT

output:

Here is a sample code for testing the given test cases:

```function testAreaCalculation(testCases) {
for (let i = 0; i < testCases.length; i++) {
const { length, width, expected } = testCases[i];
const result = length * width;
if (result !== expected) {
console.error(`Test case \${i} failed: expected \${expected} but got \${result}`);
} else {
console.log(`Test case \${i} passed`);
}
}
}

testAreaCalculation(testCases);```
copy

This code will run through all the test cases and print out "Test case i passed" for each test case that passes and "Test case i failed: expected expectedValue but got result" for each test case that fails.

Answer generates a sane code test case;

### NotionAI

output:

```testCases.forEach((testCase) => {
const area = calculateArea(testCase.length, testCase.width);
expect(area).toBe(testCase.expected);
});```
copy