Code Conventie

Wat is de Code Conventie

Code conventie zijn afspraken die developers maken over het schrijven van je code. Door gebruik te maken van code conventie weten developers onderling die aan een soort code/ programmeertaal werken hoe ze te werk kunnen gaan. Er zijn nogal wat mogelijkheden en elke taal heeft veelal zijn eigen code conventie.

Code zonder conventie

Als je geen code conventie gebruikt zal je zien dat mensen in hun code verschillende oplossingen gebruiken. Neem een simpel voorbeeld als hoe schrijf je een variabele. Zie onderstaande code:

const my-number = 19;
const useNumber = 25;
const my_second_number = 55;
const ThisIsAThirdNumber = 594;

Je ziet in de code hierboven vier manieren hoe je een variabelen kan schrijven en alles door elkaar is wat rommelig. Daarom maken we afspraken hier over om te zorgen dat het netjes en hetzelfde eruit ziet. Zo kan een andere developer ook makkelijk het werk van een collega overnemen.

Pascal, Camel, Snake en Kebab

Nee bovenstaande is niet hoe chef-kok Pascal van een kameel en een slang een heerlijke kebab kan maken. sorry 😓 het is ook geen spannend verhaal uit de serie van duizend en een nacht.

Wat het wel is, is de manier waarop we code schrijven. Het zijn afspraken hoe je variabelen, functies, classes en andere code onderdelen schrijft. Binnen 1 programmeertaal kunnen er ook meerdere 'cases' gebruikt worden.

PascalCase

Als je schrijft volgens de methode van PascalCase schrijf je alle woorden aan elkaar en elk woord begint met een hoofdletter.

Een aantal voorbeelden:

let MyNumber = 10;
function CalculateMyAge()
class Player

camelCase

Het schrijven met camelCase lijkt heel erg op PascalCase, alleen de eerste letter is bij camelCase geen hoofdletter

Een aantal voorbeelden:

const someNumber = 11;
function addPoint()
class boardField

Snake case

Bij snake case plakken we woorden niet aan elkaar, maar gebruiken we een koppelteken tussen de woorden, bij snake case is dat een underscore of een laagstreepje (_). Daarnaast worden er nergens hoofdletters gebruikt als je snake case schrijft.

Een aantal voorbeelden:

const my_home_address = 'Tinwerf 10';
function calculate_radius_from_home()
class card_number

Kebab

Kebab is het broertje (of zusje) van snake het verschil is dat kebab een ander koppelteken gebruikt namelijk een min (-) teken en geen underscore. Verder schrijf je het zelfde.

Een aantal voorbeelden:

.let my-postalcode = '2233TV'; //Voorbeeld, - mag niet in JavaScript
function distance-from-home-to-address() {
class order-field

Code afspraken in JavaScript

Bij JavaScript gebruiken we met het coderen bijna altijd camelCase. Alleen classes schrijf je PascalCase. Daarnaast gebruiken we nooit kebab of snake. Bij twijfel dus altijd camelCase gebruiken.
Er zijn meer afspraken dan hier beschreven worden, maar voor de opleiding zijn die nu nog niet van toepassing.

We coderen in het Engels

Functies, variabelen, Classes en HTML attributen zijn zoveel mogelijk in het Engels. Je zal zien dat voorbeelden in boekjes en op internet soms in het Nederlands zijn (of op internet in het Frans enzo) maar dat is niet onze code afspraak. Wij coderen dit in het Engels en de naam van de functie/ variabele/ Class of attribute is daarbij ook beschrijvend.

Namen van variabelen, functies en HTML-class attributes

De naam van een variabele, functie en class mag je helemaal zelf verzinnen. Dat is cool natuurlijk, maar het neemt ook verantwoordelijkheid met zich mee. Zoals hierboven al staat, de naam die je verzint is beschrijvend voor wat het doet/ is. Denk hierbij ook aan meervoud, een drankje is drink en een lijst met drankjes is dan natuurlijk drinks

const a = 23;
const dunno = 'Jantje';

function do() {
  if (a < 18) {
    alert('to bad...' + dunno);
  }
}

Variabelen en functies

Variabelen en functies worden camelCase geschreven.

// Variabele namen
const myName = 'Jantje';
let playerHighScore = 1000;

// Functie namen
function addPointToPlayer(player) {
  // Code komt hier
}

HTML class benamingen

Bij HTML/CSS heb je geleerd dat class-benamingen kebab case geschreven worden.

<section class="about-me">
  Deze informatie gaat over mijzelf.
</seciton>

const aboutMe = document.querySelector('.about-me');

LET OP!

Schrijfwijze Classes

Classes in JavaScript worden in tegenstelling tot variabelen en functies, PascalCase geschreven.

class Player
{
  construct(name, symbol) {
    //...
  }
}

Schrijfwijze block-scopes (functies - if-statement)

Bij het gebruik van block-scopes (blokken code) waarbij er een accolade/ curleybracket gebruikt wordt geldt dat curley (open en sluit) op dezelfde regel staan als andere code. Dit geldt bij alles behalve classes. (zie volgende blokje).

// Functies
function addPointToPlayer(player) {
  player.points += player.points;
}

// If-statement
if (myNumber > yourNumber) {
  //...
} else {
  //...
}

// While-loop
while (something === true) {
  //...
}

// For-loop
for (let i = 0; i < someArray.length; i++) {
  //...
}

Gebruik van quotes (", ', `)

Je kan in JavaScript op verschillende manieren met quotes werken. Quotes gebruiken we bij de datatype string het geeft dus aan als er tekst is.
Er zijn drie soorten quotes:

• ' - de single of enkele quote
• " - de dubbele of double quote
• ` - de backtick

En de backtick?

De backtick ` heeft een speciale functie. Als je variabelen wilt tonen in je tekst kan dit met quotes door een + te gebruiken.

const myNumber = 18;
console.log('Mijn leeftijd is ' + myNumber + ' jaar oud');

Hier biedt de backtick ` een uitkomst. De backtick maakt het mogelijk om variabelen in je tekst/ string te verwerken door de variabelen te schrijven als ${myNumber} je hoeft geen extra plusjes ofzo te gebruiken.

const myNumber = 18;
console.log(`Mijn leeftijd is ${myNumber} jaar oud`);

Indenting van code

We indenten onze code altijd met 2 spaties of een TAB. Afhankelijk van je IDE. Telkens als je een nieuw blok begint gebruik je indenting. Zie het als het werken met HTML waarbij elementen in een ander element ook indenting gebruiken.Op deze wijze zie je snel en overzichtelijk wat er gebeurt en waar welke blokken eindigen. Bekijk onderstaande onzinnige code maar eens:

if (1 === 1) {
  while (1 < 10) {
    if ('tekst' === 'tekst') {
      while (10 > 1) {
        alert('WOW');
      } // Dit sluit de 10 > 1 while-loop af
    } // Dit sluit de if ('tekst').. statement af
  } // Dit sluit de 1 < 10 while-loop af
} // Dit sluit de if (1 === 1) statement af

Eindigen met puntkomma

Probeer regels waar mogelijk af te sluiten met een punt-komma ;. Het is in de basis niet nodig maar later, wanneer je gaat werken met het comprimeren van code en met frameworks, kan dit juist wel weer verplicht zijn. Door er nu mee te beginnen, hoef je het later niet aan te leren!

Commentaar

Commentaar of comments is noodzakelijk bij het coderen. Met commentaar beschrijf je wat er gebeurt in je code en waarom je soms sommige oplossingen hebt gebruikt. Het gebruik van commentaar is verplicht in onze opleiding. Dus probeer ook direct mee te oefenen.
Probeer commentaar in je code ook altijd in het Engels te zetten. Dit is handig omdat veel developmentteams in het Engels werken.

Twee soorten commentaar

Je hebt twee soorten commentaar. Commentaar die je in 1 regel kan schrijven, of commentaar over meerdere regels.
Als het op 1 regel kan dan gebruik je 2 slashes // om commentaar te starten.
Over meerdere regels begin je je commentaar met een slash en een ster /* en eindig je ook, maar dan andersom */. Elke regel begint ook weer met een ster *.

// First lets state my base salary
const mySalary = 15000;

/*
* This function should calculate the Tax to pay over a gross salary
* @Param mySalary - The salary to be calculated
* @Returns taxToPay - The tax you need to pay over the salary
*/
function calcTaxes(mySalary) {
  let taxToPay = 100;
  // Lets write this code later

    return taxToPay;
}