1. Use default parameters instead of short-circuiting or conditionalsDefault arguments are usually cleaner than short-circuiting. function SomeMethod(paramThatCanBeUndefined) { const localValue = paramThatCanBeUndefined || "Default Value"; console.log(localValue) // ... } SomeMethod() // Default Value SomeMethod("SomeValue") // SomeValue Try the following: function SomeMethod( console.log(paramThatCanBeUndefined) // ... } SomeMethod() // Default Value SomeMethod("SomeValue") // SomeValue Statement: Falsy values such as '', "", false, null, 0, and NaN will not be replaced by default values: function SomeMethod(paramThatCanBeUndefined = "Default Value") { console.log(paramThatCanBeUndefined) // ... } SomeMethod(null) // will not Default Value, will null Instead SomeMethod("SomeValue") // SomeValue 2. Handling multiple conditionsconst conditions = ["Condition 2","Condition String2"]; someFunction(str){ if(str.includes("someValue1") || str.includes("someValue2")){ return true }else{ return false } } A cleaner way to do this is: someFunction(str){ const conditions = ["someValue1","someValue2"]; return conditions.some(condition=>str.includes(condition)); } 3. Replace switches with dynamic key-value pairs (i.e. object literals)Switch version (or replace the switch with an if/else): const UserRole = { ADMIN: "Admin", GENERAL_USER: "GeneralUser", SUPER_ADMIN: "SuperAdmin", }; function getRoute(userRole = "default role"){ switch(userRole){ case UserRole.ADMIN: return "/admin" case UserRole.GENERAL_USER: return "/GENERAL_USER" case UserRole.SUPER_ADMIN: return "/superadmin" default: return "/" } } console.log(getRoute(UserRole.ADMIN)) // return "/admin" console.log(getRoute("Anything")) // return Default path console.log(getRoute()) // return Default path console.log(getRoute(null)) // return Default path // More cases if new arrive // You can think if else instead of switch Dynamic key-value pair version: const UserRole = { ADMIN: "Admin", GENERAL_USER: "GeneralUser", SUPER_ADMIN: "SuperAdmin", }; function getRoute(userRole = "default role"){ const appRoute = { [UserRole.ADMIN]: "/admin", [UserRole.GENERAL_USER]: "/user", [UserRole.SUPER_ADMIN]: "/superadmin" }; return appRoute[userRole] || "Default path"; } console.log(getRoute(UserRole.ADMIN)) // return "/admin" console.log(getRoute("Anything")) // return Default path console.log(getRoute()) // return Default path console.log(getRoute(null)) // return Default path // No more switch/if-else here. // Easy to Further expansion 4. Avoid too many function parametersfunction myFunction(employeeName,jobTitle,yrExp,majorExp){ return `${employeeName} is working as ${jobTitle} with ${yrExp} years of experience in ${majorExp}` } //output be like John is working as Project Manager with 12 years of experience in Project Management // You can call it via console.log(myFunction("John","Project Manager",12,"Project Management")) // ***** PROBLEMS ARE ***** // Violation of 'clean code' principle // Parameter sequencing is important // Unused Params warning if not used // Testing need to consider a lot of edge cases. Here's a cleaner way to do it: function myFunction({employeeName,jobTitle,yrExp,majorExp}){ return `${employeeName} is working as ${jobTitle} with ${yrExp} years of experience in ${majorExp}` } //output be like John is working as Project Manager with 12 years of experience in Project Management // You can call it via const mockTechPeople = { employeeName:"John", jobTitle:"Project Manager", yrExp:12, majorExp:"Project Management" } console.log(myFunction(mockTechPeople)) // ES2015/ES6 destructuring syntax is in action // map your desired value to variable you need. 5. Use Object.assign to set the default objectThis seems cumbersome: const someObject = { title: null, subTitle: "Subtitle", buttonColor: null, disabled: true }; function createOption(someObject) { someObject.title = someObject.title || "Default Title"; someObject.subTitle = someObject.subTitle || "Default Subtitle"; someObject.buttonColor = someObject.buttonColor || "blue"; someObject.disabled = someObject.disabled !== undefined ? someObject.disabled : true; return someObject } console.log(createOption(someObject)); // Output be like // {title: 'Default Title', subTitle: 'Subtitle', buttonColor: 'blue', disabled: true} This approach looks better: const someObject = { title: null, subTitle: "Subtitle", buttonColor: null, disabled: true }; function createOption(someObject) { const newObject = Object.assign({ title: "Default Title", subTitle: "Default Subtitle", buttonColor: "blue", disabled: true },someObject) return newObject } console.log(creteOption(someObject)); This concludes this article about 5 ways to make your JavaScript codebase cleaner. For more information about 5 ways to make your JavaScript codebase cleaner, please search for previous articles on 123WORDPRESS.COM or continue browsing the related articles below. I hope you will support 123WORDPRESS.COM in the future! Thank you for reading You may also be interested in:
|
<<: Analysis of the process of simply deploying nginx in Docker container
>>: Detailed explanation of how to run jmeter under Linux system and optimize local memory
I encountered this problem today. I reassigned the...
Background: Linux server file upload and download...
Table of contents Build a Docker image using Dock...
Download: http://dev.mysql.com/downloads/mysql/ U...
Data Sheet /* Navicat SQLite Data Transfer Source...
1. Download and decompress 1. Introduction to Zoo...
Querying the database SELECT * FROM `student` Que...
Table of contents What is async? Why do we need a...
cause I once set up WordPress on Vultr, but for w...
1 Cause After the project migrated the database a...
In the page, external files such as js, css, etc. ...
Table of contents Introduction to bootstrap and i...
Preface Since the most important data structure i...
This article uses an example to describe the mana...
#include <linux/moduleparam.h> 1. Module pa...