9 tips for better Code with JavaScript

Javascript is a language that's understood by the browser. It is used to load dynamic content without refreshing the page. You need to make your Javascript code more readable in fewer lines of code. We have listed out some of the recommended ways to get more ways to write javascript code: 1. Use Template Literals Template literals are the strings (variables) that can embed in the expression. Template literals make code much simpler and readable. For example, we can use template literals in JavaScript as below: code = ; str = ; var "javascript" var ` I love I love ` ${code} ${code} Without template literals, we can write the above example as below: code = ; str1 = + code + + code + ; var "javascript" var "\n I love " "\n I love " "\n" 2. Using Ternary Operator In programming, you mostly have to encounter logical operations. If you want to perform logic between two statements, the ternary operator is much more readable. price= isMember ? : let '$2.00' '$10.00' You can read more about the conditional statement in JavaScript . on this page 3. Use Include Statement in JavaScript a statement in JavaScript is the simpler way to search for a string in an . include array and sentence You can use a statement in JavaScript as below: include str = ; word = str.includes( ); var "I love JavaScript." var "javaScript" // result: true In array, we can use include a statement as below: str = [ , , ]; n = str.includes( ); var "taimoor" "ali" "umer" var "taimoor" // result: true statement return true or false depends on the string is present in sentence or array. include 4. Nullish Operator If you are working in 3rd party API, you may have encountered that same key-value not appear in every query. You have to check for nullish keys in JSON so that code does not throw an error. To check for the nullish key, you can use the following: Conditional Statement The nullish coalescing operator (??) - (Recommended) For example, we have following JSON in JavaScript as below: person = { : , : , : { : } } var name "Taimoor Sattar" age 21 metadata hobby "football, blog" Using , we can access the key in the metadata of JSON as below: Conditional Statement hobby hobby = ; (person.metadata){ hobby = person.metadata.hobby ? person.metadata.hobby : ; } let "" if "" Using , we can access the key in the metadata of JSON as below: nullish coalescing operator hobby hobby = person.metadata?.hobby ?? ; let "" The above code check for the key in the metadata of JSON, If available it returns the value else returns the empty string. hobby 5. Default Parameter Value in Function Some of the functions in JavaScript allows you to send option parameter. Based on the optional parameter the return value of the function can change. we can demonstrate the default parameter in function through an example as below: { name; } string1 = outputName(); string2 = outputName( ); ( ) function outputName name= "taimoor" return let // result: taimoor let "ali" // result: ali 6. Type Check for Parameter in Function Probably, there might be conditions where your function parameter has not a valid type. You can perform additional checks to validate your parameter type. We can demonstrate this with an example as below: { result = ( a == && b == ) ? a + b : ; result } sum( , ) sum( , ) ( ) function sum a, b let typeof "number" typeof "number" null return "s" 6 // result: null 4 6 // result: 10 7. Wrap Code in Try/Catch Statement Try/Catch statements are used to check the errors in the code. If errors, catch statement will run. We can demonstrate this with an example as below: { functionnotexist(); } (e){ .log( ); } try catch console "error" The above code console logs the error as the function does not exist. 8. Destructuring Destructuring allows you to breakdown complex parts into chunks. For example... If your complex function required a lot of parameters for execution, then it's better to De-structuring the function. Rather than passing a single parameter like a string, float, etc; pass an object in function. Single Objects can hold multiple values. We can demonstrate this example as below: { name; } person = { : , : , : { : } } str = outputName(person); ( ) function outputName {name = } "taimoor" // De-structuring return var name "Taimoor Sattar" age 21 metadata hobby "football, blog" let // Taimoor Sattar 9. Write DRY Code DRY means (don't repeat yourself). You avoid duplication in the code to avoid confusion. To avoid confusion in the code, you can follow the following rules. Write a reusable function Define clear names for variable and function Thank you for taking your time to read my article. For updates, you can find me on my , and . personal website Twitter Linkedin You can join my . 📧📧📧 email newsletter on substack