Avoid Code Comments by Refactoring JavaScript | Clean Code Tutorial
Skills:
AI-Assisted Code Review80%
Key Takeaways
Refactors JavaScript code to reduce the need for comments
Full Transcript
what we're looking at here is a function to return all of the longest strings from an array that has strings in it so if there's the longest one is ten characters we're gonna turn all the ten character words that's in that string array i actually wrote this when i was learning to code about six seven years ago which really makes me feel kind of old and how time flies but that's a separate story now what we're going to do right now is utilize some of the variable names and the function names to eliminate some of these comments and have a more readable code base so it's going to be some good practice so let's eliminate some comments that really we don't need now let's talk about start from the top and work our way down if you have to leave a comment for what a function does oftentimes you have a very poor name or the function is too large in this case this is a fairly small function so i think our name is actually incorrect and longest string sounds singular we're not returning the longest string we're returning longest strings and because it's a git and we want to standardize our calls maybe a better name here would be get longest strings we know it's returning something we know it's returning the longest of something and we know it's returning plural here hence the plural now here initialize the long string to the first value we don't really need this initialize but this variable name here let length length could be anything length is a very generic name would be a better name maybe longest word length because that's what we're going to use it for down below we're going to have this placeholder variable that we're going to go and set for anywhere that gets updated so let's go ahead and make those changes real quick now that we have that we have this other comment checks if current string is longer than the current longest is this an overly convoluted if statement to me this looks like a very singular purpose it's very straightforward is the longest word length less than the current word length i don't think this needs a comment this is a perfect example of something that doesn't need a comment right this reads very clearly we set the longest word length we compare the longest word length in a for loop this shouldn't be something that needs to be commented i understand if it's your first programming class but down the road not so much now same thing here is this filtering yeah filter take our array filter it's the word.length equals the longest word length we don't really need that now where we can make an improvement is strs that's sort of generic what about longest words so what we've done here is we've eliminated comments that we now have to maintain there that we had to maintain we eliminate some comments that really didn't really have any other purpose to describe this if statements very straightforward very simple and we updated our variable names and our functions names to be more readable and now we have less code we have to maintain in my opinion it's more readable and we've simply applied the function and variable naming to our better comments which in this case is actually removing a lot of comments let's go ahead and look at some other examples
Original Description
🎓 View our courses: https://scrimba.com/links/all-courses
In this video, we take a look at improving our code can reduce the need for comments.
Learning clean code is one of the best career investments you can make. By spending one hour to learn the fundamentals, you get to reap the benefits across all your future code bases. It's 10x the payoff for the effort.
🔧 Play with this code on Scrimba:
https://scrimba.com/learn/cleancode
💻 Check out Scrimba’s interactive learning platform:
https://scrimba.com/
🌲 Linktree:
https://scrimba.com/links/linktree
Watch on YouTube ↗
(saves to browser)
Sign in to unlock AI tutor explanation · ⚡30
Playlist
Uploads from Scrimba · Scrimba · 0 of 60
← Previous
Next →
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
CSS Grid Course: Learn the Basics in 3 Minutes
Scrimba
CSS Grid Course: Positioning Items
Scrimba
CSS Grid Course: Why Learn It And How It Compares To Bootstrap
Scrimba
CSS Grid Course: auto-fit & minmax
Scrimba
CSS Grid Course: Implicit Rows
Scrimba
CSS Grid Course: Fraction Units And Repeat
Scrimba
CSS Grid Course: Justify Items and Align Items
Scrimba
CSS Grid Course: An Awesome Image Grid
Scrimba
CSS Grid Course: Named Lines
Scrimba
CSS Grid Course: auto-fit vs auto-fill
Scrimba
CSS Grid Course: Justify Content and Align Content
Scrimba
CSS Grid Course: Template areas
Scrimba
27. Setting up the structure - Responsive CSS Tutorial
Scrimba
25. Making the navigation responsive - Responsive CSS Tutorial
Scrimba
36. Playing with the title's position and negative margins - Responsive CSS Tutorial
Scrimba
31. Starting the CSS for our page - Responsive CSS Tutorial
Scrimba
26. Taking a look at the rest of the project - Responsive CSS Tutorial
Scrimba
15. Spacing out the columns - Responsive CSS Tutorial
Scrimba
33. Starting to think mobile first - Responsive CSS Tutorial
Scrimba
22. Making our navigation look good - Responsive CSS Tutorial
Scrimba
37. Changing image size with object-fit - Responsive CSS Tutorial
Scrimba
44. Module Wrap up - Responsive CSS Tutorial
Scrimba
16. Controlling the vertical position of flex items - Responsive CSS Tutorial
Scrimba
39. Setting up the widgets and talking breakpoints - Responsive CSS Tutorial
Scrimba
42. Setting up the About Me page - Responsive CSS Tutorial
Scrimba
35. Changing the visual order with flexbox - Responsive CSS Tutorial
Scrimba
23. Adding the underline - Responsive CSS Tutorial
Scrimba
21. Using flexbox to start styling our navigation - Responsive CSS Tutorial
Scrimba
20. Creating a navigation - Responsive CSS Tutorial
Scrimba
40. Using a new pseudo class to wrap up the homepage - Responsive CSS Tutorial
Scrimba
43. Fixing up some loose ends - Responsive CSS Tutorial
Scrimba
32. Starting the layout. Looking at the big picture - Responsive CSS Tutorial
Scrimba
24. A more complicated navigation - Responsive CSS Tutorial
Scrimba
28. Feature article structure - Responsive CSS Tutorial
Scrimba
34. Styling the featured article - Responsive CSS Tutorial
Scrimba
18. Making layout responsive with flex direction - Responsive CSS Tutorial
Scrimba
19. flex direction explained - Responsive CSS Tutorial
Scrimba
41. Creating the recent posts page - Responsive CSS Tutorial
Scrimba
17. Media Query basics - Responsive CSS Tutorial
Scrimba
30. Home Page. HTML for the aside - Responsive CSS Tutorial
Scrimba
38. Styling recent articles for large screens - Responsive CSS Tutorial
Scrimba
29. The home page. HTML for the recent articles - Responsive CSS Tutorial
Scrimba
10. ems and rems an example - Responsive CSS Tutorial
Scrimba
1. Starting to think responsively - Responsive CSS Tutorial
Scrimba
4. Controlling the width of images - Responsive CSS Tutorial
Scrimba
5. min width and max width - Responsive CSS Tutorial
Scrimba
3 CSS Units. Percentage - Responsive CSS Tutorial
Scrimba
11. Flexbox refresher and setting up some HTML - Responsive CSS Tutorial
Scrimba
12. Basic Styles and setting up the columns - Responsive CSS Tutorial
Scrimba
8. The Solution Rems - Responsive CSS Tutorial
Scrimba
14. Setting the columns widths - Responsive CSS Tutorial
Scrimba
2 CSS Units - Responsive CSS Tutorial
Scrimba
7. The problem with ems - Responsive CSS Tutorial
Scrimba
6. CSS Units. The em unit - Responsive CSS Tutorial
Scrimba
13. Adding the background color - Responsive CSS Tutorial
Scrimba
9. Picking which unit to use - Responsive CSS Tutorial
Scrimba
Tutorial to Learn Alpine JS - Full Course for Beginners
Scrimba
Guide To Algorithms in Javascript [Binary Search] - Full Course / Tutorial
Scrimba
Learn UI Design [7 Fundamentals Tutorial] - Full Course for Beginners
Scrimba
Javascript Tutorial for Beginners [From 0 to ES6+] - Full Course
Scrimba
More on: AI-Assisted Code Review
View skill →
🎓
Tutor Explanation
DeepCamp AI