Clean Code Javascript

Clean Code javascript

Tijdens het coderen zelf wilt de developer dat de code werkt en begrepen wordt door de computer. Maar uiteindelijk gaat het toch om de lezers, code kan snel onleesbaar zijn als je het bij de mentaliteit houdt dat het voor de computer niet uitmaakt of een variable naam nou 'ZZZ' of 'button' het zal werken. Maar zoals we bij design ook altijd denken de gebruiker. Een ander persoon die niet aan je project heeft meegewerkt moet jou code kunnen begrijpen. Laten we nu overgaan naar een aantal voorbeelden.

Voorbeeld 1

Zorg ervoor dat je variable beschrijvend is
Duidelijke Code 🧚

const button = document.querySelector('button');

Onduidelijke Code 🧚

const pen = document.querySelector('button');

Voorbeeld 2

Zorg ervoor dat je functie die uitgevoerd gaat worden duidelijk beschrijft, wat moet er gebeuren als de functie wordt geactiveerd?
Duidelijke Code 🧚

function toonMenu2() {
menulijst2.classList.toggle('toonMenu2');
}

Onduidelijke Code 🧚

function eenmenu() {
menulijst2.classList.toggle('eenmenu');
}

Voorbeeld 3

Zorg ervoor dat je niet dubbelop gaat beschrijven, het is al duidelijk dat material informatie geeft over de variable kleding
Duidelijke Code 🧚

const clothes = {
id: "straplessdress" merk: "H&M", material: "polyester", categories: "dress" };`

Onduidelijke Code 🧚

const clothes = {
id: "straplessdress" KledingBeschrijvingMerk: "H&M", KledingBeschrijvingMaterial: "polyester", KledingCategories: "dress" };`

Voorbeeld 4

Codeer in een taal! (deze fout maak ik vaak, dat ik wat engels gebruik maar ook nederlands door elkaar
Duidelijke Code 🧚

const clothes = {
id: "straplessdress" brand: "H&M", material: "polyester", categories: "dress" };`

Onduidelijke Code 🧚

const clothes = {
id: "straplessdress" KledingBeschrijvingMerk: "H&M", KledingBeschrijvingMaterial: "polyester", KledingCategories: "dress" };`

Voorbeeld 5

Beschrijf altijd uitook al lijkt het logisch!
Duidelijke Code 🧚

.then((result) => {
console.log('We have a connection to db!');
})
.catch((error) => {
console.log(error);
});

Onduidelijke Code 🧚

.then((r) => {
console.log('We have a connection to db!');
})
.catch((err) => {
console.log(error);
});

Bronnen

Clean Code Javascript