JavaScript Clean Codes

This content originally appeared on DEV Community and was authored by Sujan Maharjan

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

This content originally appeared on DEV Community and was authored by Sujan Maharjan

Print Share Comment Cite Upload Translate Updates

APA

Sujan Maharjan | Sciencx (2021-04-26T05:06:16+00:00) JavaScript Clean Codes. Retrieved from https://www.scien.cx/2021/04/26/javascript-clean-codes/

MLA

" » JavaScript Clean Codes." Sujan Maharjan | Sciencx - Monday April 26, 2021, https://www.scien.cx/2021/04/26/javascript-clean-codes/

HARVARD

Sujan Maharjan | Sciencx Monday April 26, 2021 » JavaScript Clean Codes., viewed ,<https://www.scien.cx/2021/04/26/javascript-clean-codes/>

VANCOUVER

Sujan Maharjan | Sciencx - » JavaScript Clean Codes. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/04/26/javascript-clean-codes/

CHICAGO

" » JavaScript Clean Codes." Sujan Maharjan | Sciencx - Accessed . https://www.scien.cx/2021/04/26/javascript-clean-codes/

IEEE

" » JavaScript Clean Codes." Sujan Maharjan | Sciencx [Online]. Available: https://www.scien.cx/2021/04/26/javascript-clean-codes/. [Accessed: ]

rf:citation

» JavaScript Clean Codes | Sujan Maharjan | Sciencx | https://www.scien.cx/2021/04/26/javascript-clean-codes/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.