JavaScript Clean Codes

Sujan Maharjan — Mon, 26 Apr 2021 05:06:16 +0000

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

DEV Community: Sujan Maharjan

JavaScript Clean Codes

Originally By Codevolution

1. Avoid magic numbers

2. Avoid additional context

3. Use default arguments instead of short-circuiting

4. Restrict function arguments to 3

5. Functions should do one thing

6. Avoid boolean flags as parameters

7. Encapsulate Conditionals

8. Avoid contractions when naming

9. Use prefix when naming boolean variables

10. Use a verb when naming functions