# Zelfdocumenterende Code

# Refactoring Oefeningen

Je mag de code van deze oefeningen knippen en plakken, zodat je enkel maar de refactoring moet doen.

# Slechte Naamgeving

Een naam van een functie maak je best zo duidelijk mogelijk, vermijd dus zaken zoals fn(), functie() en adasda()

function fn(x, y) {
  return x + y;
}

let a = 5;
let b = 10;
let result = fn(a, b);
console.log(result);

1
2
3
4
5
6
7
8

# Magische Getallen

Probeer als je constanten gebruikt deze ook een duidelijk naam te geven.

function calculateArea(radius) {
  return 3.14 * radius * radius;
}

let circleRadius = 5;
let area = calculateArea(circleRadius);
console.log(area);

1
2
3
4
5
6
7

# Lange Functies

Probeer per functie 1 specifieke taak uit te voeren, zo maak je de code makkelijker om te lezen en hergebruiken.

function processData(data) {
  // Lange logica hier...
  // Nog meer code...
  // En nog veel meer...
  return result;
}

let rawData = fetchData();
let processedData = processData(rawData);
console.log(processedData);

1
2
3
4
5
6
7
8
9
10

# Dubbelzinnige Variabelen

Probeer altijd je variabelen een goede naam te geven, zo vermijd je verwarring zoals in onderstaand voorbeeld.

let x = 5;
let y = 10;
let z = x + y;

console.log(z);

1
2
3
4
5

# Commentaarverwijdering

Commentaar kan handig zijn, maar hou die voor jezelf. Probeer je commentaar om te zetten in functienamen en variabelen die duidelijk zijn voor iedereen.

// Deze functie telt twee getallen op
function add(x, y) {
  return x + y;
}

let result = add(3, 7);
console.log(result);

1
2
3
4
5
6
7

# Gebruik van Hoofdletters

Het gebruik van hoofdletters is niet aan te raden, tenzij voor sommige constanten (zoals PI).

const XYZ = {
  A: "value1",
  B: "value2",
  C: "value3",
};

function processObject(obj) {
  // Logica voor het verwerken van het object...
  return result;
}

let output = processObject(XYZ);
console.log(output);

1
2
3
4
5
6
7
8
9
10
11
12
13

# Vermijd Afkortingen

Wat de titel zegt.

function calcSum(a, b) {
  return a + b;
}

let total = calcSum(5, 10);
console.log(total);

1
2
3
4
5
6

# Duidelijke Booleaanse Variabelen

Booleans kunnen heel nuttig zijn, maar soms wordt de code moeilijk te lezen als we ze geen goede naam geven. Probeer altijd de naam van een boolean te starten met is of has.

let x = true;
let y = false;

if (x && y) {
  // Logica...
}

1
2
3
4
5
6

# Magische Getallen Vervangen 2

Wat is hier een magisch getal?

function calculateRectangleArea(length, width) {
  return 2 * (length + width);
}

let area = calculateRectangleArea(4, 5);
console.log(area);

1
2
3
4
5
6

# Callback Helderheid

Als je een callback gebruikt dan kan je best ook de naam van die functie aanpassen zodat alles wat die functie doet in de naam zit. De functie hieronder gaat niet enkel de data verwerken…

function processData(data, callback) {
  // Lange logica...
  callback(result);
}

function handleData(result) {
  // Meer logica...
  console.log(result);
}

processData(data, handleData);`

1
2
3
4
5
6
7
8
9
10
11

# Overbodige Variabelen

Soms kan het beter zijn de extra variabelen te verwijderen om zo een beter overzicht te krijgen van de functie.

function calculateAreaAndVolume(radius) {
  let area = Math.PI * radius * radius;
  let volume = (4 / 3) * Math.PI * radius * radius * radius;
  return { area, volume };
}

let result = calculateAreaAndVolume(5);
console.log(result.area, result.volume);

1
2
3
4
5
6
7
8

# Nesting Vereenvoudiging

Hoe kan je onderstaand voorbeeld duidelijker maken?

function complexLogic(x, y) {
  if (x > 0) {
    if (y > 0) {
      // Uitvoeren bij positieve x en y...
    }
  }
}

1
2
3
4
5
6
7

# Onnodige Functie

# Oorspronkelijke Code

Functies zijn nuttig, maar te veel functies is nooit goed. Welke functie is hier overbodig?

function squareNumber(x) {
  return x * x;
}

function processSquare(number) {
  return squareNumber(number) + 10;
}

let result = processSquare(4);
console.log(result);

1
2
3
4
5
6
7
8
9
10

# Redundante Controlestructuren

Als we true of false teruggeven in ene functie dan kunnen we dat vaak vereenvoudigen.

function isValidInput(value) {
  if (value !== null && value !== undefined && value !== "") {
    return true;
  } else {
    return false;
  }
}

1
2
3
4
5
6
7

Introductie Oplossingen refactoring