DEV Community

Aditya Singh
Aditya Singh

Posted on

2

JavaScript Naming Conventions: Unlocking the Secrets to Clear and Concise Code

πŸ’‘ The naming convention play a crucial role in JavaScript development. They serve as a roadmap, guiding developers towards writing clean, maintainable, and readable code. By following these guidelines, you will not only improve your own development experience but also make your code more accessible to other developers.

Variables

JavaScript variables names are case-sensitive, lowercase and uppercase letters are distinct. Recommended way to declare, is with camel case variable names.

let newName = 'John';
Enter fullscreen mode Exit fullscreen mode

Boolean

Boolean variables plays a crucial role in JavaScript programming by representing true or false conditions. When naming Boolean variables, we should use is or has as prefixes.

let hasEmail = true;
Enter fullscreen mode Exit fullscreen mode

Functions

Similar to variables, the camel case approach is recommended way to declare function names. In addition to that you should use nouns and verbs as prefix.
Example: If we declare a function to retrieve a name, the function name should be getName.

function getDetails(name, email){
    return '${name} ${email}';
}
Enter fullscreen mode Exit fullscreen mode

Constants

The constants should be written in uppercase because they are nonchanging variables.

const PIE = 3.14
Enter fullscreen mode Exit fullscreen mode

Classes

The classes should be written in pascal case. Here we have to use descriptive titles that explain the class’s capabilities.

class NewDetails{
    constructor(name, email){
        this.name= name;
        this.email = email; 
    }
}
var detail = newDetails('John', 'john@gmail.com')
Enter fullscreen mode Exit fullscreen mode

Component

JavaScript components are widely used in frontend frameworks like React. Similar to classes, the pascal case approach is recommended way to declare component names.

function NewDetails(detail){
    return(
        <div>
            <h1>{detail.name}</h1>
        </div>
    );
}
Enter fullscreen mode Exit fullscreen mode

Conclusion

By applying these practices, you'll enhance collaboration, ease debugging, and ensure a smoother development experience. Embrace the power of effective naming conventions and unlock the full potential of your JavaScript codebase.

Tiugo image

Modular, Fast, and Built for Developers

CKEditor 5 gives you full control over your editing experience. A modular architecture means you get high performance, fewer re-renders and a setup that scales with your needs.

Start now

Top comments (0)

πŸ‘‹ Kindness is contagious

Engage with a wealth of insights in this thoughtful article, valued within the supportive DEV Community. Coders of every background are welcome to join in and add to our collective wisdom.

A sincere "thank you" often brightens someone’s day. Share your gratitude in the comments below!

On DEV, the act of sharing knowledge eases our journey and fortifies our community ties. Found value in this? A quick thank you to the author can make a significant impact.

Okay