Best Practices For Case Styles: Camel, Pascal, Snake, and Kebab Case In Node And Javascript
Tags: node, typescript, javascript
Published: 2022-10-25 10:28:08

---
title: Best Practices For Case Styles: Camel, Pascal, Snake, and Kebab Case In Node And Javascript
published: true
description: 
tags: nodejs, typescript, javascript
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2022-10-25 09:51 +0000
---

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

```bash
total online users
```

To Be

```bash
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`.

```ts

// 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.

```bash
total online users
```

To Be

```bash
total-online-users
```

```html
<!-- HTML -->

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

<!-- ✅ Yes -->

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

```css
/* 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.

```bash
total online users
```

To Be

```bash
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`.

```bash
total online users
```

To Be

```bash
totalOnlineUsers
```

```ts
// ❌ 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() {

}
```

## Conclusion

I hope you enjoyed this article, and if you have any questions or suggestions, please feel free to comment below.