Best Practices For Case Styles: Camel, Pascal, Snake, and Kebab Case In Node And Javascript

#node #typescript #javascript

For being a good software engineer, it's too important to know what is the best practices for writing code and naming your variables, functions and classes properly, well this article will help you with it.

Case Styles

Basically, there are 4 ways of naming in general:

PascalCase
kebab-case
snake_case
camelCase

Now let's see each one of them in action for proper naming

Pascal/Studly Case

Also called Studly Case it basically means you write all words combined without any separators (not even whitespaces) and each word of the statement MUST be capitalized.

Let's say for example we've the following statement

total online users

To Be

TotalOnlineUsers

So what are our cases that we should write our code in studly case style?

It's recommended to use it in OOP classes, React Function Component, Typescript Types and Interfaces.


// types
// ❌ Nope
export type user = {
}

// ✅ Yes
export type User = {
}

// interfaces
// ❌ Nope
export interface user {
}

// ✅ Yes
export interface User {
}

// classes
// ❌ Nope
class user {
}

// ✅ Yes
class User {
}

// React function component
// ❌ Nope
const user = () => {
}

// ✅ Yes
const User = () => {
}

Kebab Case

It's also called Spinal Case and it's basically writing all words combined with a hyphen - between each word.

This is usually used in CSS and HTML classes and ids.

total online users

To Be

total-online-users

<!-- HTML -->

<!-- ❌ Nope -->
<div class="user_info"></div>

<!-- ✅ Yes -->

<div class="user-info"></div>

/* CSS */

/* ❌ Nope */
.user_info {
}

/* ✅ Yes */
.user-info {
}

Snake Case

It's also called Underscore Case and it's basically writing all words combined with an underscore _ between each word.

It usually used in Python and Ruby and it's also used in SQL and MongoDB for naming collections but does not have pretty much usage in Nodejs or Javascript.

total online users

To Be

total_online_users

Camel Case

It's also called Camel Case and it's basically writing all words combined with the first word in lowercase and the rest of the words are capitalized.

It's recommended to be used in Javascript and Typescript for naming variables, functions and constants.

total online users

To Be

totalOnlineUsers

// ❌ Nope
const user_name = "John Doe";

// ✅ Yes
const userName = "John Doe";

// ❌ Nope
let my_var = 10;

// ✅ Yes
let myVar = 10;

// ❌ Nope
var my_other_var = 10;

// ✅ Yes
var myOtherVar = 10;

// ❌ Nope
function my_function() {

}

// ✅ Yes
function myFunction() {

}