JavaScript Clean Codes
Sujan Maharjan
Posted on April 26, 2021
Originally By Codevolution
1. Avoid magic numbers
- Don't do this
if (password.length < 8) {
// Display error message
}
- Do this
const MIN_PASSWORD_LENGTH = 8
if (password.length < MIN_PASSWORD_LENGTH) {
// Display error message
}
2. Avoid additional context
- Don't do this
const employee = {
employeeName: 'John Doe',
employeeAge: 26,
employeeSalary: 40000
}
- Do this
const employee = {
name: 'John Doe',
age: 26,
salary: 40000
}
3. Use default arguments instead of short-circuiting
- Don't do this
// All products receive 10% discount
function calculateDiscount(discount){
const minDiscount = discount || 10
// ...Rest of the function
}
- Do this
// All products receive 10% discount
function calculateDiscount(discount = 10){
const minDiscount = discount
// ...Rest of the function
}
4. Restrict function arguments to 3
- Don't do this
function toastNotification('Login Successful', duration, style, className, icon, role)
- Do this
const options = {
duration: 3000,
style: {},
className: '',
icon: '🙂',
role: 'status'
}
function toastNotification('Login Successful`, options)
5. Functions should do one thing
- Don't do this
function notifyUsers(users) {
users.forEach(user =>{
const userRecord = database.lookup(user)
if (userRecord.isSubscribed()){
notify(user)
}
})
}
- Do this
function notifySubscribedUsers(users) {
users.filter(isSubscribedUser).forEach(notify)
}
function isSubscribedUser(user){
const userRecord = database.lookup(user)
return userRecord.isSubscribed()
}
6. Avoid boolean flags as parameters
- Don't do this
function getitemCost(itemCost, isMember){
const MEMBER_DISCOUNT = 0.30
const NORMAL_DISCOUNT = 0.10
let cost = 0
if(isMember){
cost = itemCost * (1 - MEMBER_DISCOUNT)
} else {
cost = itemCost * (1 - NORMAL_DISCOUNT)
}
return cost
}
- Do this
function getItemCost(itemCost) {
const NORMAL_DISCOUNT = 0.10
let cost = itemCost * (1- NORMAL_DISCOUNT)
return cost
}
function getItemCostForMember(itemCost){
const MEMBER_DISCOUNT = 0.10
let cost = itemCost * (1- MEMBER_DISCOUNT)
return cost
}
7. Encapsulate Conditionals
- Don't do this
if(status === "loading" && isEmpty(produtionList)){
// ...Rest of the code
}
- Do this
function shouldDisplayLoader (status, productList){
return status === "loading" && isEmpty (productList);
}
if (shouldDisplayLoader(requestStatus, productList)){
// ...Rest of the code
}
8. Avoid contractions when naming
- Don't do this
const curColor = "#333"
function sndNotif() {
}
function onBtnClk() {
}
- Do this
const currentColor() {
}
function sendNotification(){}
function onButtonClick(){}
9. Use prefix when naming boolean variables
- Don't do this
const LoggedIn = true
const followers = false
- Do this
const isLoggedIn = true
const hasFollowers = false
10. Use a verb when naming functions
- Don't do this
function fullName(firstName, lastName){
this.fullName = `${firstName} ${lastName}`
}
function fullName(){
return `${firstName} ${lastName}
}
function count(){
this.count = this.initialCount
}
function async products(){
const products = await fetch('/api/products')
return products
}
- Do this
function setFullName(firstName, lastName){
this.fullName = `${firstName} ${lastName}`
}
function getFullName(){
return `${firstName} ${lastName}
}
function resetCount(){
this.count = this.initialCount
}
function async fetchProducts(){
const products = await fetch('/api/products')
return products
}
Link to the original content: https://youtu.be/vPXzVNmCPg4
💖 💪 🙅 🚩
Sujan Maharjan
Posted on April 26, 2021
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
javascript The Art of Clean Code: A Practical Guide to Writing Maintainable JavaScript
November 17, 2024
typescript Type guards, type predicates, assertion signatures, and branded types in TS
November 11, 2024
javascript The CLEAN Framework: A 5-Step Blueprint for Writing Bug-Free, Maintainable JavaScript Code
October 17, 2024