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
Top comments (0)