Cara menggunakan CAMEL-CASED pada JavaScript

To effectively create a function that converts the casing of a string to camel-case, the function will also need to convert each string to lower-case first, before transforming the casing of the first character of non-first strings to an uppercase letter.

My example string is:

"text That I WaNt to make cAMEL case"

Many other solutions provided to this question return this:

"textThatIWaNtToMakeCAMELCase"

What I believe should be the expected, desired output would be this though, where all the mid-string uppercase characters are first transformed to be lowercase:

"textThatIWanrtToMakeCamelCase"

This can be done WITHOUT using any replace() method calls, by utilizing the String.prototype.split(), Array.prototype.map(), and Array.prototype.join() methods:

≤ ES5 Version

function makeCamelCase(str) {
  return str
    .split(' ')
    .map((e,i) => i
      ? e.charAt(0).toUpperCase() + e.slice(1).toLowerCase()
      : e.toLowerCase()
    )
    .join('')
}

makeCamelCase("text That I WaNt to make cAMEL case")
// -> "textThatIWanrtToMakeCamelCase" ✅

I'll break down what each line does, and then provide the same solution in two other formats— ES6 and as a String.prototype method, though I'd advise against extending built-in JavaScript prototypes directly like this.

Explainer

function makeCamelCase(str) {
  return str
    // split string into array of different words by splitting at spaces
    .split(' ')
    // map array of words into two different cases, one for the first word (`i == false`) and one for all other words in the array (where `i == true`). `i` is a parameter that denotes the current index of the array item being evaluated. Because indexes start at `0` and `0` is a "falsy" value, we can use the false/else case of this ternary expression to match the first string where `i === 0`.
    .map((e,i) => i
      // for all non-first words, use a capitalized form of the first character + the lowercase version of the rest of the word (excluding the first character using the slice() method)
      ? e.charAt(0).toUpperCase() + e.slice(1).toLowerCase()
      // for the first word, we convert the entire word to lowercase
      : e.toLowerCase()
    )
    // finally, we join the different strings back together into a single string without spaces, our camel-cased string
    .join('')
}

makeCamelCase("text That I WaNt to make cAMEL case")
// -> "textThatIWanrtToMakeCamelCase" ✅

Condensed ES6+ (One-Liner) Version

const makeCamelCase = str => str.split(' ').map((e,i) => i ? e.charAt(0).toUpperCase() + e.slice(1).toLowerCase() : e.toLowerCase()).join('')

makeCamelCase("text That I WaNt to make cAMEL case")
// -> "textThatIWanrtToMakeCamelCase" ✅

String.prototype method version

String.prototype.toCamelCase = function() {
  return this
    .split(' ')
    .map((e,i) => i
      ? e.charAt(0).toUpperCase() + e.slice(1).toLowerCase()
      : e.toLowerCase()
    )
    .join('')
}

"text That I WaNt to make cAMEL case".toCamelCase()
// -> "textThatIWanrtToMakeCamelCase" ✅

Pada kesempatan ini di tutorial Clean Code, dari KonsepKoding akan membahas mengenai 5 Gaya Penulisan Kode di Bahasa Pemrograman, hal ini perlu diketahui jika kamu seorang IT Profesional, Programer, Coder maupun Developer.

Kenapa kita harus tahu gaya penulisan pada pemrograman?

Jawabannya simpel, kode yang kamu tulis mencerminkan kamu, dan kita tahu dalam membangun sebuah project pastinya tidak luput dari yang namnya  bekerjasama dengan orang lain (Kerja Tim), bayangkan jika kamu menulis kode hanya kamu yang memahami dan developer tidak tahu apa yang mereka baca, maka tim project tersebut akan kalang kabut dan tidak kompak.

5 Gaya Penulisan Pemrograman

1. Snake Case  (snake-case)

Snake case menggabungkan kata-kata dengan mengganti setiap spasi dengan garis bawah (_) dan, dalam versi semua huruf besar, semua huruf kapital, berikut contohnya

Bool is_true = true
first_name
last_name
total_price
has_color

Snake Case biasa digunakan dalam bahasa pemrograman prosedural PHP, penamaan field database , bahasa C, dan response API.

 2. Camel Case (camelCase)

Camel Case menggabungkan kata-kata dengan mengkapitalisasi semua kata mengikuti kata pertama dan menghapus spasi, sebagai berikut:

var isTrue = true
firstName
lastName
totalPrice
hasColor

Camel Case biasa digunakan pada bahasa dengan paradigma OOP dan Funtional, contoh besar bahasa yang menggunakan Camel Case adalah : javascript, java, swift, python dan dart. Selain itu Camel Case hanya digunakan untuk variables, constanta, method dan function.

3. Pascal Case (PascalCase)

Pascal Case menggabungkan kata-kata dengan mengkapitalisasi semua kata (bahkan kata pertama) dan menghilangkan spasi, sebagai berikut contohnya :

let IsTrue = true
FirstName
LastName
HasColor

Pascal Case biasa digunakan dalam Bahasa C#, dan untuk bahasa lain seperti PHP, Swift, Dart, Javascript juga menggunakan Pascal Case namun hanya untuk penamaan Class/Kelas saja, karena Sebuah kelas dianjurkan menggunakan Pascal Case agar bisa dengan mudah dibedakan dengan method maupun variables di file tersebut.

4. Kebab Case (kebab-case)

Kebab case menggabungkan kata-kata dengan mengganti setiap spasi dengan tanda hubung (-), sebagai berikut:

first-name
last-name
total-price
has-color

Kebab Case biasa digunakan untuk penulisan style CSS dan penamaan database SQL.

5. All caps (ALL_CAPS)

All Caps adalah cara penulisan kode dengan mengguakan capslock untuk penulisan di pemrograman. Contohnya sebagai berikut

HASCOLOR
BASE_URL
URL
URI
LOCAL_DATA 

All Caps biasa digunakan untuk menulis sebuah Konstanta file, misal Konstanta File menyimpan JWT token di local data/ sql lite dan lain sebagainya.