Chat GPT - 5 Ways to Use Right Now
ChatGPT is extremely powerful tool this is why lots of people are talking about it and trying it now. Here are 5 different ways to use ChatGPT and solve your everyday needs.
The future of our children
A lot of people in schools and universities started to use ChatGPT extensively to solve their homework. Because you can type whatever you need in ChatGPT and get a result with good explanation.
For example here we asked to compare -2/3 and 9/-4. Here we directly got an answer to this question.
The typical way previously to solve such problem would be to google what is the topic about, study documentation about comparison rational numbers, understand how it works and only then you can solve something.
With ChatGPT is it not needed at all because you are getting here not only an answer but the understanding how it works and how it can be calculated.
But obviously ChatGPT can make mistakes so it is completely possible that the result is wrong and you must double check it.
And it is not all. You can ask ChatGPT to write an essay.
For example here I asked ChatGPT to write an short essay about Harry Potter and as you can see it looks quite nice, without any mistakes and we can use it in school or university.
Writing official documents
Another way to use ChatGPT is to write official emails and documents. A lot of people like me hate to write official documents because we don't know how to write them correctly. It is much easier for me to just write "Hi, I have such problem...". But it is not how it works for a lot of companies.
This is why we can paste in ChatGPT something like this.
How to write an official email to home owner regarding broken window.
Here we are not just getting a letter example but also some guidelines if we want to try and write it on our own.
Solving bugs
Now we are coming to programming problems. And actually ChatGPT can help a lot in solving bugs. Here I have an Angular project with a Typescript error.
Typically I just copy paste this error in Google and try to understand answers from Stack Overflow. But now we can just paste it inside ChatGPT and ask what is the problem.
Here we get a short and understandable documentation that the problem is that we didn't assigned initial value. We also get here an example how we should change our code to make it working. Alternatively we could use here a questing mark to tell that it is undefined.
What is more interesting that these are 2 solutions for this problem. And I tried exactly this error a week ago and got only one solution.
This means that ChatGPT is evolving really fast
Code refactoring
The next way to use ChatGPT is to ask it to refactor code. It can do it quite good and can help in a lot of cases.
So this is a function which I pasted which can be optimized.
So ChatGPT analyses our function completely, understood it's problems and refactored it. As you can see the refactored version is just 3 lines of code. Also it wrote a list of advantages between old version and the new version.
So as you can see especially for beginner this tool is really helpful. It can help you to understand if your code is good enough and how you can improve it.
Guidance helper
Another way to use ChatGPT in programming is to ask it for guidance. Let's say that I'm a developer and I need read query parameters inside JavaScript but I don't know how to do it or what is the best possible variant.
Here we are getting the best possible answer. It suggested to use URLSearchParams to get parts of our URL. We get back a small amount of documentation to understand the problem. So we can easily understand how to use it.
So it is not like it happens really often on Stack Overflow where you get lots of bad structured or unclear answers or you copy paste it and it is broken.
Bonus: Writing comments
Here is my bonus point how you can use ChatGPT to write code. Actually sometimes you need to cover your code with comments. I always try to minimize the amount of comments that I'm writing and I want my variables to be understandable. But in some teams you must write more comments so all people understand the code, especially if they are beginners.
Additionally to that you might be an advanced developer and then it is more difficult for you to check other people and show them your code. This is why I asked ChatGPT to cover my code with comments to it is readable for other people.
import { useEffect, useState } from "react";
import "./usersTable.css";
// HeaderCell is a functional component that represents a cell in the table header
// It displays the column name and a sort arrow depending on the current sorting state
const HeaderCell = ({ column, sorting, sortTable }) => {
// Determine if the current column is being sorted in ascending or descending order
const isDescSorting = sorting.column === column && sorting.order === "desc";
const isAscSorting = sorting.column === column && sorting.order === "asc";
// Determine the future sorting order when the cell is clicked
const futureSortingOrder = isDescSorting ? "asc" : "desc";
return (
<th
key={column}
className="users-table-cell"
onClick={() => sortTable({ column, order: futureSortingOrder })}
>
{column}
{isDescSorting && <span>▼</span>}
{isAscSorting && <span>▲</span>}
</th>
);
};
// Header is a functional component that represents the table header
// It displays a list of cells, each with a column name and sort arrow
const Header = ({ columns, sorting, sortTable }) => {
return (
<thead>
<tr>
{columns.map((column) => (
<HeaderCell
column={column}
sorting={sorting}
key={column}
sortTable={sortTable}
/>
))}
</tr>
</thead>
);
};
// Content is a functional component that represents the table body
// It displays a list of rows, each with cells displaying the values for the specified columns
const Content = ({ entries, columns }) => {
return (
<tbody>
{entries.map((entry) => (
<tr key={entry.id}>
{columns.map((column) => (
<td key={column} className="users-table-cell">
{entry[column]}
</td>
))}
</tr>
))}
</tbody>
);
};
// SearchBar is a functional component that represents a search bar
// It allows users to search for table entries by name
const SearchBar = ({ searchTable }) => {
// Use state to store the current search value
const [searchValue, setSearchValue] = useState("");
// When the form is submitted, prevent the default action and call the searchTable function with the current search value
const submitForm = (e) => {
e.preventDefault();
searchTable(searchValue);
};
return (
<div className="search-bar">
<form onSubmit={submitForm}>
<input
type="text"
placeholder="Search..."
value={searchValue}
onChange={(e) => setSearchValue(e.target.value)}
/>
</form>
</div>
);
};
// UsersTable is the main functional component for the table
const UsersTable = () => {
// Use state to store the list of users
const [users, setUsers] = useState([]);
// Use state to store the current sorting state
const [sorting, setSorting] = useState({ column: "id", order: "asc" });
// Use state to store the current search value
const [searchValue, setSearchValue] = useState("");
// Define the list of columns to display in the table
const columns = ["id", "name", "age"];
// sortTable is a function that updates the sorting state
const sortTable = (newSorting) => {
setSorting(newSorting);
};
// searchTable is a function that updates the search value
const searchTable = (newSearchValue) => {
setSearchValue(newSearchValue);
};
// Use the useEffect hook to fetch data from the API and update the users state whenever the sorting or search value changes
useEffect(() => {
// Construct the API URL with the current sorting and search values
const url = `http://localhost:3004/users?_sort=${sorting.column}&_order=${sorting.order}&name_like=${searchValue}`;
fetch(url)
.then((res) => res.json())
.then((users) => {
setUsers(users);
});
}, [sorting, searchValue]);
// Render the search bar, table header, and table body components
return (
<div>
<SearchBar searchTable={searchTable} />
<table className="users-table">
<Header columns={columns} sorting={sorting} sortTable={sortTable} />
<Content entries={users} columns={columns} />
</table>
</div>
);
};
As you can see all component is covered with description what it does. Every important line is described in the correct way. So ChatGPT fully understands this code and covers it in the best possible way.
Want to conquer your next JavaScript interview? Download my FREE PDF - Pass Your JS Interview with Confidence and start preparing for success today!
