🔵 Sprint 13 - Annevd/js-fundamentals GitHub Wiki
Conditions
Conditions in Javascript hebben de volgende blueprint:
if (condition) {
//do something
}
Bijvoorbeeld:
const grade = 15;
if (grade >= 10) {
console.log("Passing grade");
}
Advanced If
Soms is het niet nodig om else
te gebruiken.
Bijvoorbeeld:
function canVote(age) {
if (age >= 18) {
return true;
}
return false;
}
Als het resultaat voldoet aan de condition wordt true
teruggegeven en stopt de functie. Als het resultaat niét aan de condition voldoet dan wordt alleen het stukje return false;
teruggegeven.
- When you have an
if/else
condition that returns two different results, it is possible to drop theelse
keyword. - Always use triple equal
===
when comparing 2 values in JavaScript.
Returning Booleans
- When you're returning a boolean from a function, you can simplify your code by returning the boolean expression directly, without using an if statement.
Bijvoorbeeld:
- In plaats van:
function isPassing(grade) {
if (grade >= 10) {
return true;
} else {
return false;
}
}
isPassing(12);
- Schrijf je alleen:
function isPassing(grade) {
return grade >= 10;
}
Dit is omdat grade >= 10
op zichzelf al true of false teruggeeft, afhankelijk van de grade. Je hoeft het dan niet nog in een if/else
statement te schrijven.
Even & Odd
// even numbers
4 % 2 // 0
6 % 2 // 0
8 % 2 // 0
10 % 2 // 0
// odd numbers
3 % 2 // 1
5 % 2 // 1
7 % 2 // 1
9 % 2 // 1
Bij de even getallen is de division remainder altijd 0, en bij de oneven getallen 1.
Je kan ook hier een if
condition gebruiken om te weten te komen of een getal even of oneven is.
The ternary operator
Korte if conditions kunnen soms geschreven worden met de ternary operator. Dit is een kortere manier om een if...else statement te schrijven.
Bijvoorbeeld:
- In plaats van:
function evenOrOdd(number) {
if (number % 2 === 0) {
return "even";
}
return "odd";
}
- Schrijf je:
function evenOrOdd(number) {
return (number % 2 === 0) ? "even" : "odd";
}
Syntax:
condition ? expressionWhenTrue : expressionWhenFalse
Het wordt afgeraden deze te gebruiken, omdat het je code een stuk onleesbaarder maakt.
Arrays I
Arrays
Arrays in Javascript geven de mogelijkheid om meerdere elementen in dezelfde variabele op te slaan. Dit kunnen numbers, strings, booleans, arrays, objects en nog veel meer zijn. Deze kunnen mixed zijn in dezelfde array.
Bijvoorbeeld:
const users = []; // empty array
const grades = [10, 8, 13, 15]; // array of numbers
const attendees = ["Sam", "Alex"]; // array of strings
const values = [10, false, "John"]; // mixed
.length
property
Je kan het aantal elementen in een array krijgen met de .length
property.
Bijvoorbeeld:
[].length; // 0
const grades = [10, 8, 13, 15];
grades.length; // 4
.length
is een property en geen fucntie. Daarom staat er geen()
achter.
Get element by index
Vergelijkbaar met strings, kun je een element uit een array krijgen door de vierkante haak syntax []
te gebruiken met de index vanaf 0.
Bijvoorbeeld:
const users = ["Sam", "Alex", "Charley"];
users[1]; //"Alex"
Je kan ook de .at(index)
gebruiken, die de negatieve getallen accepteerd en het dus makkelijker maakt om het laatste element van een array te vinden. Negatieve getallen tellen terug vanaf het laatste element in de array.
Bijvoorbeeld:
const users = ["Sam", "Alex", "Charley", "Blane", "Crane"];
users.at(0); //"Sam"
users.at(1); //"Alex"
users.at(-2); //"Blane"
users.at(-1); //"Crane"
Adding an element
Je kan een element toevoegen door de .push()
method te gebruiken.
Bijvoorbeeld:
const numbers = [10, 8, 13, 15];
numbers.push(20); // returns 5 (the new length of the array)
console.log(numbers); // [10, 8, 13, 15, 20];
Warning:
Array.push()
returns the new length of the array.
numbers.push(20)
geeft 5 terug, de lengte van de array. Dit is vaak verwarrend voor developers. .push()
voegt een nieuw item toe aan de array maar geeft ook de nieuwe lengte terug van de array.
Arrays & const
Ook al waren de variabele numbers defined met const
, konden we alsnog nieuwe data toe voegen. Dat is omdat const
betekent dat je alleen de variabele kan toekennen wanneer het defined wordt. Maar dat betekent niet dat de variabele onveranderlijk is. De content kan wel veranderen.
Het voordeel is dat wanneer je het defined als een array, het altijd een array zal blijven wat betekent dat je veilig array methods erop kan toepassen. De array content kan veranderen.
Bijvoorbeeld:
const numbers = []; // start with empty array
numbers.push(10); // returns 1 (new length of array)
console.log(numbers); // [10] (still an array but content changed)
numbers.push(20); // returns 2 (new length of array)
console.log(numbers); // [10, 20] (still an array but content changed)