Task 03 Task 03 Code improvement practice guide
📥 Practice Input
- •
day6_meeting_notes.md(meeting minutes)
💾 Practice output (Output)
- •
day6_clean_code.js
1. Story and practice background
After many twists and turns, I completed a code that displayed the screen well and produced no errors. It worked well, so I thought everything was over, but the team leader sighed after checking the code. “There are too many redundant functions written here, and I have no idea what the variable names mean. If you distribute it like this, it will become trash code that even you will find difficult to fix in just a month.”
Proper operation of the program is only a 'minimum requirement' for development, and if the code is messy and twisted like spaghetti, it will hinder business expansion. In this exercise, we will review the code written by Codex, group duplicate logic into reusable functions, and apply intuitive naming conventions to create clean code that maximizes readability and maintainability.
2. Learning objectives
- You can understand the structural difference between complex code that only works and maintainable code that is easy to read.
- Redundant functions and hard-coded values can be extracted and improved into a reusable structure.
- Variable/function names can be clearly changed and refactored based on AI's code review suggestions.
🛠️Practical guide to follow along
- Create file for practice: Click the download button below
day6_meeting_notes.mdfileautomation/Save it within the folder. - Codex refactoring delegation: Instruct code cleanup by passing the **Codex request prompt** below into the Codex Client prompt input window.
- Refactoring result analysis: Check whether the messy source code has been organized into modules with excellent readability, and compare the reasons for variable name changes and comments.
Download practice materials
Codex request prompt
Task 03 Prompt
Please analyze the source of the provided day6_dirty_code.js file and refactor it into an improved version of clean code by 1) separating the duplicate markup binding logic into a common utility function, 2) correcting ambiguous variable names (ex: a, temp, fn) with practical words, and 3) writing appropriate one-line comments to facilitate future maintenance.
4. Example results
Codex analyzes the meeting transcript and outputs normalized data entity mappings and a Mermaid ERD script as shown below.
| file name | pre-existing condition | Major improvements | Refactoring Effects |
|---|---|---|---|
| day6_dirty_code.js | Duplicate HTML manipulation and ambiguous variable names | Integration of common utility functions and correction of naming | Increased readability and reduced maintenance time |
5. AI utilization points
- Code Smell Detection: Finds long methods that are difficult to read, duplicate branch statements, and inappropriate parameter structures.
- Automatically generate comments: Instead of complex explanations to core algorithms or state judgment statements, add summary comments that other developers can understand at a glance.