15 neat ways to Write JavaScript Code

Original link:

Medium.com/javascript-…

Whether you’re a React developer or a Node.js developer. Can write code that works. But is your code beautiful and readable?

The following rules can make your JavaScript code cleaner and clearer.

Rule 1. Do not use random characters as variables

Do not use random characters to represent a variable.

// BAD
const x = 4;
Copy the code

Variables should be named semantically.

// GOOD
const numberOfChildren = 4;
Copy the code

Rule 2. Use camel name

Do not use snake_case, PascalCase, or variable names that begin with a verb.

// Bad: starts with a capital letter
var UserName = "Faisal"; 

// Bad: starts with a verb
var getUserName = "Faisal"; 

// Bad: use an underscore
var user_name = "faisal";
Copy the code

Use hump nomenclature instead, and use nouns.

// Good
const userName = "Faisal";
Copy the code

Rule 3. Name functions with good humps

Do not use nouns for function names to avoid confusion with variable names.

// Bad: starts with a capital letter
function DoSomething() {  
    // code 
} 

// Bad: starts with a noun
function car() {  
    // code 
} 

// Bad: use an underscore
function do_something() {  
    // code 
}
Copy the code

Instead, use a hump and start with a verb.

//GOOD
function doSomething() {
    // code
}
Copy the code

Rule 4. Name constructors using PASCAL

// Bad: starts with a lowercase letter
function myObject() {  
    // code 
} 

// Bad: use an underscore
function My_Object() {  
    // code 
} 

// Bad: starts with a verb
function getMyObject() {  
    // code 
}
Copy the code

Similarly, constructor names should not start with a verb, and creating an object instance by new is an action.

// GOOD
function MyObject() {  
    // code 
}
Copy the code

Rule 5. Global constants

The value of a global constant cannot be changed, and it should not be named as a normal variable.

// BAD
const numberOfChildren = 4;
// BAD 
const number_of_children = 4;
Copy the code

All words should be capitalized and separated by an underscore.

// GOOD
const NUMBER_OF_CHILDREN = 4;
Copy the code

Rule 6. Assign variables

Do not directly assign a comparison value to a variable.

// BAD 
const flag = i < count;
Copy the code

Should be wrapped in parentheses:

// GOOD
const flag = (i < count);
Copy the code

Rule 7. Usage of the equality operator

Do not use “==” or “! Lambda equals “to set the ratio. Because they don’t check whether two values are of the same type.

//BAD
if (a == b){
    //code
}
Copy the code

Instead, use “===” or “! ==”, to avoid type errors.

//GOOD
if (a === b){
    //code
}
Copy the code

Rule 8. Usage of ternary operators

Do not use ternary operators instead of if conditional statements:

//BAD
condition ? doSomething() : doSomethingElse();
Copy the code

Use it to assign values only under certain conditions:

// GOOD
const value = condition ? value1 : value2;
Copy the code

Rule 9. Simple declaration

Don’t write multiple declarations on a single line, even though JavaScript supports them.

// BAD
a =b; count ++;
Copy the code

Multiple declarations should be split into multiple lines. And always add a semicolon to the end of a statement.

// GOOD
a = b;
count++;
Copy the code

Rule 10. Use of the if statement

Do not omit the braces of an if statement, and do not write the opening and closing braces on the same line.

// BAD: incorrect space
if(condition){ doSomething(); } -// BAD: missing braces
if (condition)  
    doSomething(); 
----
// BAD: all code on one line
if(condition) { doSomething(); } -// BAD: Code on one line with no braces
if (condition) doSomething();
Copy the code

Always use braces and appropriately indent:

// GOOD
if (condition) {
    doSomething();
}
Copy the code

Rule 11. Usage of loop statements

Do not declare variables inside the for loop.

// BAD: declare variables in the loop body
for (let i=0, len=10; i < len; i++) {  
    // code
    let i = 0;
}
Copy the code

It should be declared before the for loop.

// GOOD
let i = 0;

for (i=0, len=10; i < len; i++) {  
    // code 
}
Copy the code

Rule 12. Indent the same length

Always use 2 or 4 indents.

// GOOD
if (condition) {
    doSomething();
}
Copy the code

Rule 13. Single line length

No line of code is more than 80 characters long. If it does, it should start on a separate line.

// BAD: Indent only 4 Spaces on the next line
doSomething(argument1, argument2, argument3, argument4,
    argument5); 

// BAD: line breaks before the operator
doSomething(argument1, argument2, argument3, argument4
        ,argument5);
Copy the code

The second line should have eight indentations instead of four, and should not begin with a delimiter.

// GOOD
doSomething(argument1, argument2, argument3, argument4,
        argument5);
Copy the code

Rule 14. Raw values

Strings should not be wrapped in single quotes.

// BAD
const description = 'this is a description';
Copy the code

Instead, use double quotation marks.

// GOOD
const description = "this is a description";
Copy the code

Rule 15. Use “undefined”

Do not use the congruent operator to determine whether a variable is undefined.

// BAD
if (variable === "undefined") {  
    // do something 
}
Copy the code

Use the Typeof operator to see if a variable has been defined.

// GOOD
if (typeof variable === "undefined") {  
    // do something 
}
Copy the code

Therefore, following these rules can make your JavaScript projects cleaner.

All of these rules can be found in the book “Writing Maintainable JavaScript.” So it’s okay if you don’t agree with some of the rules. Because coding styles are diverse. But these rules can be a good starting point.

Happy coding! 😀