Skip to content

dlvisser/33-js-concepts

 
 

Repository files navigation


33 Concepten Die Elke JS-ontwikkelaar Moet Kennen

33 Concepten Die Elke JavaScript Ontwikkelaar Moet Kennen

🚀 Door GitHub beschouwd als een van de top open source projecten van 2018!

Inleiding

Deze repository is gemaakt met de bedoeling ontwikkelaars te helpen hun kennis van JavaScript-concepten te beheersen. Het is geen vereiste, maar een gids voor toekomstige studies. Het is gebaseerd op een artikel geschreven door Stephen Curtis, dat je hier kunt lezen.

Community

Voel je vrij om een PR in te dienen door een link toe te voegen naar je eigen samenvattingen of recensies. Als je de repo wilt vertalen naar je moedertaal, doe dat gerust.

Alle vertalingen voor deze repo worden hieronder vermeld:


  1. Call Stack
  2. Primitieve Types
  3. Waarde Types en Referentie Types
  4. Impliciet, Expliciet, Nominaal, Structureel en Duck Typing
  5. == vs === vs typeof
  6. Functie Scope, Blok Scope en Lexicale Scope
  7. Expressie vs Statement
  8. IIFE, Modules en Namespaces
  9. Message Queue en Event Loop
  10. setTimeout, setInterval en requestAnimationFrame
  11. JavaScript Engines
  12. Bitwise Operators, Typed Arrays en Array Buffers
  13. DOM en Layout Trees
  14. Factories en Classes
  15. this, call, apply en bind
  16. new, Constructor, instanceof en Instances
  17. Prototype Inheritance en Prototype Chain
  18. Object.create en Object.assign
  19. map, reduce, filter
  20. Pure Functions, Side Effects, State Mutatie en Event Propagation
  21. Closures
  22. Higher Order Functions
  23. Recursie
  24. Collecties en Generators
  25. Promises
  26. async/await
  27. Datastructuren
  28. Kostbare Operatie en Big O Notatie
  29. Algoritmen
  30. Overerving, Polymorfisme en Code Hergebruik
  31. Ontwerppatronen
  32. Partial Applications, Currying, Compose en Pipe
  33. Schone Code

1. Call Stack

De call stack is een mechanisme dat de JavaScript-interpreter gebruikt om bij te houden welke functies binnen een programma worden uitgevoerd. In JavaScript worden functies uitgevoerd in de volgorde waarin ze worden aangeroepen. De call stack volgt het Last In, First Out (LIFO) principe, wat betekent dat de laatst toegevoegde functie als eerste wordt uitgevoerd.

Volgens de ECMAScript-specificatie is de call stack gedefinieerd als onderdeel van de uitvoeringscontext. Telkens wanneer een functie wordt aangeroepen, wordt er een nieuwe uitvoeringscontext aangemaakt en bovenaan de stack geplaatst. Zodra de functie is voltooid, wordt de uitvoeringscontext verwijderd en keert de controle terug naar de vorige context. Dit helpt bij het beheren van synchrone code-uitvoering, omdat elke functieaanroep moet worden voltooid voordat de volgende kan beginnen.

Referentie

Artikelen

video Videos

⬆ Terug naar boven


2. Primitive Types

Volgens de ECMAScript-specificatie heeft JavaScript zes primitieve datatypes: string, number, bigint, boolean, undefined en symbol. Deze types zijn onveranderlijk, wat betekent dat hun waarden niet kunnen worden aangepast. Er is ook een speciaal primitief type genaamd null, dat de opzettelijke afwezigheid van een objectwaarde vertegenwoordigt.

Primitieve waarden worden direct aan een variabele toegewezen, en wanneer je een primitief type manipuleert, werk je direct met de waarde. In tegenstelling tot objecten hebben primitieve types geen eigenschappen of methoden, maar JavaScript wikkelt primitieve waarden automatisch in object-tegenhangers wanneer dat nodig is (bijvoorbeeld bij het aanroepen van methoden op strings).

Referentie

Artikelen

video Videos

⬆ Back to Top


3. Value Types and Reference Types

Volgens de ECMAScript-specificatie worden waardetypes direct opgeslagen op de locatie die de variabele benadert. Dit zijn types zoals number, string, boolean, undefined, bigint, symbol en null. Wanneer je een waardetype aan een variabele toewijst, wordt de waarde zelf opgeslagen.

Referentietypes daarentegen zijn objecten die in de heap worden opgeslagen. Variabelen die aan referentietypes zijn toegewezen, slaan eigenlijk verwijzingen (pointers) naar de objecten op, niet de objecten zelf. Wanneer je een referentietype aan een andere variabele toewijst, verwijzen beide variabelen naar hetzelfde object in het geheugen.

Articles

video Videos

⬆ Back to Top


4. Impliciet, Expliciet, Nominaal, Structureel en Duck Typing

De ECMAScript-specificatie definieert JavaScript als een dynamisch getypeerde taal, wat betekent dat types aan waarden zijn gekoppeld in plaats van aan variabelen, en typecontrole gebeurt tijdens runtime. JavaScript gaat op verschillende manieren met types om:

Impliciete Typing (of Type Coercion): Dit gebeurt wanneer JavaScript automatisch het ene datatype naar een ander converteert wanneer dat nodig is. Bijvoorbeeld, JavaScript kan een string omzetten naar een getal tijdens een rekenkundige bewerking. Dit kan code vereenvoudigen, maar ook tot onverwachte resultaten leiden als je niet oplet.

Expliciete Typing: In tegenstelling tot impliciet, houdt expliciet typen in dat je handmatig een waarde van het ene type naar het andere converteert met functies als Number(), String() of Boolean().

Nominaal Typen: JavaScript ondersteunt van zichzelf geen nominaal typen, waarbij types expliciet worden gedeclareerd en gecontroleerd. TypeScript, een superset van JavaScript, voegt deze mogelijkheid toe om typefouten tijdens de ontwikkeling te helpen opsporen.

Structureel Typen: In dit typesysteem zijn types gebaseerd op de structuur of eigenschappen van de data. JavaScript is structureel getypeerd: objecten zijn compatibel als ze dezelfde structuur (dus dezelfde set eigenschappen en methoden) delen.

Duck Typing: Dit is een concept waarbij de bruikbaarheid van een object wordt bepaald door de aanwezigheid van bepaalde eigenschappen en methoden, niet door het daadwerkelijke type van het object. JavaScript maakt hier veel gebruik van: gedrag wordt afgeleid van de eigenschappen van een object, niet van het gedeclareerde type.

Articles

video Videos

Books

⬆ Back to Top


5. == vs === vs typeof

Volgens de ECMAScript-specificatie kent JavaScript zowel strikte (===) als losse (==) gelijkheidsoperatoren, die zich verschillend gedragen bij het vergelijken van waarden. Een overzicht:

== (Losse gelijkheid): Deze operator voert typecoercion uit voordat twee waarden worden vergeleken. Als de waarden verschillende types hebben, probeert JavaScript ze eerst naar een gemeenschappelijk type om te zetten, wat tot onverwachte resultaten kan leiden.

=== (Strikte gelijkheid): Deze operator vergelijkt zowel de waarde als het type zonder enige typecoercion. Als de twee waarden niet van hetzelfde type zijn, geeft de vergelijking false terug.

typeof-operator: De typeof-operator wordt gebruikt om het datatype van een variabele te controleren. Hoewel het meestal betrouwbaar is, zijn er eigenaardigheden, zoals dat typeof null "object" retourneert in plaats van "null", vanwege een oude eigenschap in de JavaScript-implementatie.

Articles

video Videos

⬆ Back to Top


6. Function Scope, Block Scope and Lexical Scope

De ECMAScript-specificatie beschrijft drie belangrijke soorten scope:

Functie Scope: Variabelen die binnen een functie met var zijn gedeclareerd, zijn alleen binnen die functie toegankelijk. Deze scope zorgt ervoor dat variabelen niet buiten de functie beschikbaar zijn.

Blok Scope: Met ES6 zijn let en const geïntroduceerd, die blokscope hebben. Dit betekent dat ze alleen toegankelijk zijn binnen het specifieke blok {} waarin ze zijn gedeclareerd, bijvoorbeeld in een loop of een if-statement.

Lexicale Scope: Dit verwijst naar hoe variabelen toegankelijk zijn op basis van hun fysieke locatie in de code. Functies zijn lexicaal gescopeerd, wat betekent dat ze toegang hebben tot variabelen uit hun ouder-scope.

Books

Articles

video Videos

⬆ Back to Top


7. Expression vs Statement

Volgens de ECMAScript-specificatie leveren expressies een waarde op, terwijl statements instructies zijn om een actie uit te voeren, zoals een variabele toewijzen of een controleflow. Functiedeclaraties worden gehost en kunnen worden aangeroepen voordat ze in de code zijn gedefinieerd, terwijl functie-expressies niet worden gehost en eerst moeten worden gedefinieerd voordat ze kunnen worden aangeroepen.

Articles

video Videos

⬆ Back to Top


8. IIFE, Modules and Namespaces

Met de introductie van ES6-modules is de rol van IIFE's voor scope-isolatie afgenomen, maar ze zijn nog steeds relevant.

Reference

Articles

video Videos

⬆ Back to Top


9. Message Queue and Event Loop

De Event Loop is een cruciaal onderdeel van het concurrency-model van JavaScript. Het zorgt voor niet-blokkerend gedrag door taken asynchroon te verwerken. Begrijpen hoe de Event Loop samenwerkt met de Message Queue en Microtasks is essentieel om het gedrag van JavaScript te beheersen.

Articles

video Videos

⬆ Back to Top


10. setTimeout, setInterval and requestAnimationFrame

Deze functies worden gebruikt om uitgestelde of herhaalde code-uitvoering te plannen. setTimeout voert een functie één keer uit na een bepaalde tijd, setInterval herhaalt de uitvoering, en requestAnimationFrame is bedoeld voor animaties en synchroniseert met de refresh rate van het scherm.

Articles

video Videos

⬆ Back to Top


11. JavaScript Engines

JavaScript-engines zijn programma's die JavaScript-code uitvoeren. Bekende engines zijn V8 (Chrome, Node.js), SpiderMonkey (Firefox) en JavaScriptCore (Safari). Ze vertalen JavaScript naar machinetaal en optimaliseren de uitvoering voor snelheid en efficiëntie.

Articles

video Videos

⬆ Back to Top


12. Bitwise Operators, Type Arrays and Array Buffers

Bitwise operators voeren bewerkingen uit op de binaire representatie van getallen. Typed Arrays en Array Buffers maken het mogelijk om efficiënt met binaire data te werken, wat handig is voor bijvoorbeeld grafische toepassingen of werken met bestanden.

Articles

video Videos

⬆ Back to Top


13. DOM en Layout Trees

De Document Object Model (DOM) is een representatie van de HTML-structuur van een webpagina. JavaScript kan de DOM manipuleren om de inhoud, structuur en stijl van een pagina dynamisch aan te passen. De layout tree wordt gebruikt door de browser om te bepalen hoe elementen worden weergegeven.

Reference

Books

Articles

video Videos

⬆ Back to Top


14. Factories and Classes

Factories zijn functies die objecten genereren. Classes zijn blauwdrukken voor objecten en introduceren syntactische suiker voor het werken met prototypes. Beide patronen worden gebruikt voor het maken van herbruikbare objecten in JavaScript.

Articles

video Videos

⬆ Back to Top


15. this, call, apply en bind

Het sleutelwoord this verwijst naar het object waarop een functie wordt aangeroepen. Met call, apply en bind kun je de waarde van this expliciet instellen bij het uitvoeren van een functie.

Reference

Articles

video Videos

⬆ Back to Top


16. new, Constructor, instanceof en Instances

De new-operator maakt een nieuw object aan op basis van een constructorfunctie. instanceof controleert of een object is gemaakt door een bepaalde constructor. Instances zijn objecten die zijn aangemaakt via een constructor of class.

Articles

⬆ Back to Top


17. Prototype Inheritance and Prototype Chain

JavaScript gebruikt prototypische overerving: objecten kunnen eigenschappen en methoden erven van andere objecten via de prototype chain. Dit maakt codehergebruik en dynamische uitbreiding van objecten mogelijk.

Reference

Articles

video Videos

Books

⬆ Back to Top


18. Object.create en Object.assign

Object.create maakt een nieuw object met een opgegeven prototype. Object.assign kopieert de eigenschappen van een of meer bronobjecten naar een doelobject. Beide methoden zijn handig voor het werken met objecten en overerving.

Reference

Articles

video Videos

⬆ Back to Top


19. map, reduce, filter

Dit zijn array-methoden die functioneel programmeren in JavaScript ondersteunen. map maakt een nieuwe array door een functie toe te passen op elk element, filter maakt een nieuwe array met elementen die voldoen aan een voorwaarde, en reduce reduceert een array tot één waarde.

Articles

video Videos

⬆ Back to Top


20. Pure Functions, Side Effects, State Mutation and Event Propagation

Pure functies geven altijd hetzelfde resultaat voor dezelfde invoer en hebben geen bijwerkingen. Side effects zijn veranderingen buiten de functie, zoals het aanpassen van globale variabelen of het manipuleren van de DOM. State mutatie verwijst naar het wijzigen van bestaande data. Event propagation beschrijft hoe events zich door de DOM verspreiden (bubbling en capturing).

Articles

video Videos

⬆ Back to Top


21. Closures

Een closure is een functie die toegang heeft tot variabelen uit zijn buitenste (lexicale) scope, zelfs nadat die scope is beëindigd. Closures maken het mogelijk om data privé te houden en functies te maken met bewaarde context.

Reference

Articles

video Videos

⬆ Back to Top


22. Higher Order Functions

Higher order functions zijn functies die andere functies als argument nemen of een functie retourneren. Ze zijn een kernonderdeel van functioneel programmeren in JavaScript.

Books

Articles

video Videos

⬆ Back to Top


23. Recursion

Recursie is een techniek waarbij een functie zichzelf aanroept om een probleem op te lossen. Het is handig voor het oplossen van problemen die kunnen worden opgedeeld in kleinere, soortgelijke subproblemen.

Articles

video Videos

⬆ Back to Top


24. Collections and Generators

Collecties zoals Map, Set, WeakMap en WeakSet bieden flexibele manieren om data op te slaan. Generators zijn speciale functies waarmee je de uitvoering kunt pauzeren en hervatten, wat handig is voor het genereren van reeksen of het werken met asynchrone data.

Reference

Articles

video Videos

⬆ Back to Top


25. Promises

Promises zijn objecten die de uiteindelijke (asynchrone) uitkomst van een bewerking vertegenwoordigen. Ze maken het eenvoudiger om met asynchrone code te werken en callback-hell te voorkomen.

Reference

Articles

video Videos

⬆ Back to Top


26. async/await

async/await is syntactische suiker bovenop promises, waarmee je asynchrone code kunt schrijven alsof het synchrone code is. Dit maakt de code leesbaarder en eenvoudiger te onderhouden.

Reference

Books

Articles

video Videos

⬆ Back to Top


27. Data Structures

Datastructuren zoals arrays, objecten, stacks, queues, linked lists, trees en graphs zijn fundamenteel voor het efficiënt opslaan en manipuleren van data in JavaScript.

Articles

video Videos

⬆ Back to Top


28. Expensive Operation and Big O Notation

Kostbare operaties zijn bewerkingen die veel tijd of geheugen kosten. Big O-notatie wordt gebruikt om de complexiteit van algoritmen te beschrijven en te vergelijken, zodat je efficiëntere code kunt schrijven.

Articles

video Videos

⬆ Back to Top


29. Algorithms

Algoritmen zijn stapsgewijze procedures voor het oplossen van problemen of het uitvoeren van taken. In JavaScript zijn veelgebruikte algoritmen onder andere sorteren, zoeken en het doorlopen van datastructuren.

Articles

video Videos

⬆ Back to Top


30. Inheritance, Polymorphism and Code Reuse

Overerving maakt het mogelijk om eigenschappen en methoden van een object of class te erven. Polymorfisme betekent dat verschillende objecten op dezelfde manier kunnen worden behandeld. Code hergebruik zorgt voor minder duplicatie en onderhoud.

Reference

Articles

video Videos

⬆ Back to Top


31. Design Patterns

Ontwerppatronen zijn herbruikbare oplossingen voor veelvoorkomende problemen in softwareontwikkeling. Bekende patronen in JavaScript zijn onder andere het modulepatroon, singleton, factory en observer.

Books

Articles

video Videos

⬆ Back to Top


32. Partial Applications, Currying, Compose and Pipe

Partial application en currying zijn technieken om functies te maken met vooraf ingevulde argumenten. Compose en pipe zijn manieren om functies te combineren tot nieuwe functies, wat leidt tot flexibele en herbruikbare code.

Books

Articles

video Videos

⬆ Back to Top


33. Clean Code

Schone code is leesbaar, begrijpelijk en eenvoudig te onderhouden. Het volgen van best practices, duidelijke naamgeving en het vermijden van duplicatie dragen bij aan een hogere codekwaliteit.

Articles

video Videos

⬆ Back to Top

This software is licensed under MIT License. See License for more information ©Leonardo Maldonado.

⬆ Back to Top


Happy Learning! ⭐

If you find this repository helpful, please consider giving it a star!

About

📜 33 JavaScript concepts every developer should know.

Resources

License

Code of conduct

Contributing

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 100.0%