{"id":52956,"date":"2023-06-01T11:02:56","date_gmt":"2023-06-01T09:02:56","guid":{"rendered":"https:\/\/kinsta.com\/nl\/?p=52956&#038;preview=true&#038;preview_id=52956"},"modified":"2023-08-11T09:01:53","modified_gmt":"2023-08-11T07:01:53","slug":"javascript-react","status":"publish","type":"post","link":"https:\/\/kinsta.com\/nl\/blog\/javascript-react\/","title":{"rendered":"JavaScript features die je moet kennen als je React wil beheersen"},"content":{"rendered":"<p><a href=\"https:\/\/kinsta.com\/nl\/onderwerpen\/react\/\">React<\/a> is vandaag de dag een van de populairste <a href=\"https:\/\/kinsta.com\/nl\/blog\/javascript-bibliotheken\/\">JavaScript bibliotheken<\/a> ter wereld. Het kan worden gebruikt om dynamische en responsieve applicaties te maken, maakt betere prestaties mogelijk, en kan gemakkelijk worden uitgebreid. De onderliggende logica is gebaseerd op componenten die in verschillende contexten kunnen worden hergebruikt, waardoor je minder vaak dezelfde code hoeft te schrijven. Met React kun je dus <a href=\"https:\/\/kinsta.com\/nl\/onderwerpen\/react\/\">effici\u00ebnte en krachtige applicaties<\/a> maken.<\/p>\n<p>Er is dus nooit een beter moment geweest om applicaties te leren maken met React dan nu.<\/p>\n<p>Maar zonder een goed begrip van enkele belangrijke <a href=\"https:\/\/kinsta.com\/javascript\/\">JavaScript<\/a> features kan het bouwen van React applicaties lastig of zelfs onmogelijk zijn.<\/p>\n<p>Daarom hebben we een lijst samengesteld van JavaScript eigenschappen en concepten die je moet kennen voordat je aan de slag gaat met React. Hoe beter je deze concepten begrijpt, hoe gemakkelijker het voor je zal zijn om professionele React applicaties te bouwen.<\/p>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<h2>JavaScript en ECMAScript<\/h2>\n<p><a href=\"https:\/\/kinsta.com\/nl\/blog\/wat-is-javascript\/\">JavaScript<\/a> is een populaire scripttaal die samen met <a href=\"https:\/\/kinsta.com\/blog\/what-is-html\/\">HTML<\/a> en CSS wordt gebruikt om dynamische webpagina&#8217;s te maken. Waar HTML vooral wordt gebruikt om de structuur van een webpagina te maken en CSS om de stijl en opmaak van de elementen te maken, is JavaScript de taal die wordt gebruikt om gedrag aan de pagina toe te voegen, dus om functionaliteit en interactiviteit te cre\u00ebren.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f JavaScript werd in 1995 ontwikkeld door Brendan Eich van Netscape Communications met als doel interactiviteit toe te voegen aan webpagina&#8217;s in de Netscape Navigator browser.<\/strong><\/p>\n<\/aside>\n\n<p>De taal is sindsdien overgenomen door de grote browsers en er is een document geschreven om te beschrijven hoe JavaScript zou moeten werken: <a href=\"https:\/\/en.wikipedia.org\/wiki\/ECMAScript\" target=\"_blank\" rel=\"noopener noreferrer\">de ECMAScript standaard<\/a>.<\/p>\n<p>Sinds 2015 wordt jaarlijks een update van de ECMAScript standaard uitgebracht, en dus worden er elk jaar nieuwe mogelijkheden aan JavaScript toegevoegd.<\/p>\n<p><a href=\"https:\/\/262.ecma-international.org\/6.0\/\" target=\"_blank\" rel=\"noopener noreferrer\">ECMAScript 2015<\/a> was de zesde release van de standaard en wordt daarom ook wel <strong>ES6<\/strong> genoemd. De versies erna krijgen allemaal een hoger nummer, dus verwijzen we naar ECMAScript 2016 als ES7, ECMAScript 2017 als ES8, enzovoort.<\/p>\n<p>Door de frequentie waarmee nieuwe features aan de standaard worden toegevoegd, is het mogelijk dat sommige niet in alle browsers worden ondersteund. Dus hoe kan je ervoor zorgen dat de nieuwste JavaScript features die je aan je JS app hebt toegevoegd in alle webbrowsers naar verwachting zouden werken?<\/p>\n<p>Je hebt drie opties:<\/p>\n<ol>\n<li>Wacht tot alle grote browsers ondersteuning bieden voor de nieuwe features. Maar als je die geweldige nieuwe JS feature absoluut nodig hebt voor je app, is dit geen optie.<\/li>\n<li>Gebruik een Polyfill, dat is &#8220;een stukje code (meestal JavaScript op het web) dat gebruikt wordt om moderne functionaliteit te bieden op oudere browsers die deze niet van nature ondersteunen&#8221; (zie ook <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Glossary\/Polyfill\" target=\"_blank\" rel=\"noopener noreferrer\">mdn web docs<\/a>).<\/li>\n<li>Gebruik een JavaScript transpiler zoals <a href=\"https:\/\/babeljs.io\/docs\/\" target=\"_blank\" rel=\"noopener noreferrer\">Babel<\/a> of <a href=\"https:\/\/github.com\/google\/traceur-compiler\" target=\"_blank\" rel=\"noopener noreferrer\">Traceur<\/a>, die ECMAScript 2015+ code omzetten in een JavaScript versie die door alle browsers wordt ondersteund.<\/li>\n<\/ol>\n\n<h2>Statements vs expressions<\/h2>\n<p>Het begrijpen van het verschil tussen statements en expressions is essentieel bij het bouwen van React applicaties. Laten we daarom even teruggaan naar de basisconcepten van programmeren.<\/p>\n<p>Een computerprogramma is een lijst van instructies die door een computer moeten worden uitgevoerd. Deze instructies worden <strong>statements<\/strong> genoemd.<\/p>\n<p>In tegenstelling tot statements zijn <strong>expressions<\/strong> stukjes code die een waarde opleveren. In een statement is een expression een deel dat een waarde teruggeeft en we zien het meestal rechts van een gelijkheidsteken.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f Een statement is een blok code dat iets doet.<\/strong><\/p>\n<\/aside>\n\n<p>En:<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f Een expression is een fragment code dat een waarde produceert.<\/strong><\/p>\n<\/aside>\n\n<p>JavaScript statements kunnen blokken of regels code zijn die meestal eindigen met puntkomma&#8217;s of omsloten zijn door accolades.<\/p>\n<p>Hier is een eenvoudig voorbeeld van een statement in JavaScript:<\/p>\n<pre><code class=\"language-js\">document.getElementById(\"hello\").innerHTML = \"Hello World!\";<\/code><\/pre>\n<p>Het bovenstaande statement schrijft <code>\"Hello World!\"<\/code> in een DOM element met <code>id=\"hello\"<\/code>.<\/p>\n<p>Zoals we al vermeldden, produceren expressions een waarde of zijn ze zelf een waarde. Kijk eens naar het volgende voorbeeld:<\/p>\n<pre><code class=\"language-js\">msg = document.getElementById(\"hello\").value;<\/code><\/pre>\n<p><code>document.getElementById(\"hello\").value<\/code> is een expression die een waarde oplevert.<\/p>\n<p>Een extra voorbeeld moet helpen het verschil tussen expressions en statements te verduidelijken:<\/p>\n<pre><code class=\"language-js\">const msg = \"Hello World!\";\nfunction sayHello( msg ) {\n\tconsole.log( msg );\n}<\/code><\/pre>\n<p>In het bovenstaande voorbeeld<\/p>\n<ul>\n<li>is de eerste regel een statement, waarbij <code>\"Hello World!\"<\/code> een expression is,<\/li>\n<li>is de functiedeclaration een statement, waarbij de parameter <code>msg<\/code> die aan de functie wordt doorgegeven een expression is,<\/li>\n<li>is de regel die het bericht in de console print een statement, waarbij wederom de parameter <code>msg<\/code> een expression is.<\/li>\n<\/ul>\n<h3>Waarom expressions belangrijk zijn in React<\/h3>\n<p>Bij het <a href=\"https:\/\/kinsta.com\/nl\/blog\/react-best-practices\/\">bouwen van een React applicatie<\/a> kun je <a href=\"https:\/\/react.dev\/learn\/javascript-in-jsx-with-curly-braces\" target=\"_blank\" rel=\"noopener noreferrer\">JavaScript expressions injecteren in je JSX code<\/a>. Je kunt bijvoorbeeld een variabele doorgeven, een event handler of een voorwaarde schrijven. Daarvoor moet je je JS code tussen accolades zetten.<\/p>\n<p>Je kunt bijvoorbeeld een variabele doorgeven:<\/p>\n<pre><code class=\"language-javascript\">const Message = () =&gt; {\n\tconst name = \"Carlo\";\n\treturn &lt;p&gt;Welcome {name}!&lt;\/p&gt;;\n}<\/code><\/pre>\n<p>De accolades vertellen je transpiler dat hij de code tussen accolades moet verwerken als JS code. Alles wat voor de openende <code>&lt;p&gt;<\/code> tag en na de sluitende <code>&lt;\/p&gt;<\/code> tag komt is normale JavaScript code. Alles binnen de openende <code>&lt;p&gt;<\/code> en sluitende <code>&lt;\/p&gt;<\/code> tags wordt verwerkt als JSX code.<\/p>\n<p>Hier is nog een voorbeeld:<\/p>\n<pre><code class=\"language-jsx\">const Message = () =&gt; {\t\n\tconst name = \"Ann\";\n\tconst heading = &lt;h3&gt;Welcome {name}&lt;\/h3&gt;;\n\treturn (\n\t\t&lt;div&gt;\n\t\t\t{heading}\n\t\t\t&lt;p&gt;This is your dashboard.&lt;\/p&gt;\n\t\t&lt;\/div&gt;\n\t);\n}<\/code><\/pre>\n<p>Je kunt ook een object doorgeven:<\/p>\n<pre><code class=\"language-jsx\">render(){\t\t\t\n\tconst person = {\n\t\tname: 'Carlo',\n\t\tavatar: 'https:\/\/en.gravatar.com\/userimage\/954861\/fc68a728946aac04f8531c3a8742ac22',\n\t\tdescription: 'Content Writer'\n\t}\n\n\treturn (\n\t\t&lt;div&gt;\n\t\t\t&lt;h2&gt;Welcome {person.name}&lt;\/h2&gt;\n\t\t\t&lt;img\n\t\t\t\tclassName=\"card\"\n\t\t\t\tsrc={person.avatar}\n\t\t\t\talt={person.name}\n\t\t\t\/&gt;\n\t\t\t&lt;p&gt;Description: {person.description}.&lt;\/p&gt;\n\t\t&lt;\/div&gt;\n\t);\n}<\/code><\/pre>\n<p>En hieronder staat een uitgebreider voorbeeld:<\/p>\n<pre><code class=\"language-jsx\">render(){\n\tconst person = {\n\t\tname: 'Carlo',\n\t\tavatar: 'https:\/\/en.gravatar.com\/userimage\/954861\/fc68a728946aac04f8531c3a8742ac22?size=original',\n\t\tdescription: 'Content Writer',\n\t\ttheme: {\n\t\t\tboxShadow: '0 4px 8px 0 rgba(0,0,0,0.2)', width: '200px'\n\t\t}\n\t}\n\n\treturn (\n\t\t&lt;div style={person.theme}&gt;\n\t\t\t&lt;img\n\t\t\t\tsrc={person.avatar}\n\t\t\t\talt={person.name}\n\t\t\t\tstyle={ { width: '100%' } }\n\t\t\t\/&gt;\n\t\t\t&lt;div style={ { padding: '2px 16px' } }&gt;\n\t\t\t\t&lt;h3&gt;{person.name}&lt;\/h3&gt;\n\t\t\t\t&lt;p&gt;{person.description}.&lt;\/p&gt;\n\t\t\t&lt;\/div&gt;\n\t\t&lt;\/div&gt;\n\t);\n}<\/code><\/pre>\n<p>Let op de dubbele accolades in de <code>style<\/code> attributen in de elementen <code>img<\/code> en <code>div<\/code>. We hebben dubbele haakjes gebruikt om twee objecten door te geven die kaart- en beeldstijlen bevatten.<\/p>\n<figure id=\"attachment_152320\" aria-describedby=\"caption-attachment-152320\" style=\"width: 1360px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-152320 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/card-example.jpg\" alt=\"Een voorbeeldkaart gebouwd met React\" width=\"1360\" height=\"694\"><figcaption id=\"caption-attachment-152320\" class=\"wp-caption-text\">Een voorbeeldkaart gebouwd met React<\/figcaption><\/figure>\n<p>Het moet je misschien wel zijn opgevallen dat we in alle bovenstaande voorbeelden JavaScript expressions hebben opgenomen in <a href=\"https:\/\/kinsta.com\/nl\/blog\/wat-is-jsx\/\">JSX<\/a>.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f JSX accepteert alleen JavaScript expressions tussen accolades. Je mag dus geen statements schrijven binnen je JSX code.<\/strong><\/p>\n<p><strong>Dit geldt ook voor:<\/strong><\/p>\n<ul>\n<li><strong>Variabelen<\/strong><\/li>\n<li><strong>Strings met aanhalingstekens<\/strong><\/li>\n<li><strong>Functiecalls<\/strong><\/li>\n<li><strong>Objecten<\/strong><\/li>\n<li><strong>Conditional expressions<\/strong><\/li>\n<\/ul>\n<p><\/p>\n<\/aside>\n\n<h2>Immunitability in React<\/h2>\n<p>Mutability en immutability zijn <a href=\"https:\/\/en.wikipedia.org\/wiki\/Immutable_object\" target=\"_blank\" rel=\"noopener noreferrer\">twee sleutelbegrippen<\/a> in objectgeori\u00ebnteerd en functioneel programmeren.<\/p>\n<p>Immutability betekent dat een waarde niet kan worden veranderd nadat hij is gecre\u00eberd. Mutability betekent natuurlijk het tegenovergestelde.<\/p>\n<p>In Javascript zijn <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Glossary\/Primitive\" target=\"_blank\" rel=\"noopener noreferrer\">primitive waarden<\/a> <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Glossary\/Immutable\" target=\"_blank\" rel=\"noopener noreferrer\">immutable<\/a>, wat betekent dat als een primitive waarde eenmaal gemaakt is, hij niet meer veranderd kan worden. Andersom zijn arrays en objecten mutable, omdat hun properties en elementen kunnen worden veranderd zonder een nieuwe waarde toe te kennen.<\/p>\n<p>Er zijn verschillende redenen voor het gebruik van immutable objecten in JavaScript:<\/p>\n<ul>\n<li>Verbeterde prestaties<\/li>\n<li>Minder geheugengebruik<\/li>\n<li>Veiligheid van threads<\/li>\n<li>Eenvoudiger coderen en debuggen<\/li>\n<\/ul>\n<p>Volgens het patroon van immutability kan een variabele of object dat eenmaal is toegekend, niet opnieuw worden toegekend of gewijzigd. Als je gegevens moet wijzigen, moet je er een kopie van maken en de inhoud ervan wijzigen, terwijl je de oorspronkelijke inhoud ongewijzigd laat.<\/p>\n<p><b>Immutability <\/b>is ook een sleutelbegrip in React.<\/p>\n<p>De <a href=\"https:\/\/react.dev\/reference\/react\/Component#state\" target=\"_blank\" rel=\"noopener noreferrer\">React documentatie<\/a> stelt:<\/p>\n<blockquote><p>De state van een klassecomponent is beschikbaar als <code>this.state<\/code>. Het state veld moet een object zijn. Verander de state niet rechtstreeks. Als je de state wilt veranderen, call dan <code>setState<\/code> met de nieuwe state.<\/p><\/blockquote>\n<p>Telkens als de state van een component verandert, berekent React of de component opnieuw moet worden weergegeven en de Virtuele DOM moet worden bijgewerkt. Als React de vorige state niet bijhield, zou het niet kunnen bepalen of de component opnieuw moet worden weergegeven of niet. De React documentatie geeft <a href=\"https:\/\/react.dev\/learn\/updating-objects-in-state#treat-state-as-read-only\" target=\"_blank\" rel=\"noopener noreferrer\">hiervan een uitstekend voorbeeld<\/a>.<\/p>\n<p>Welke JavaScript properties kunnen we gebruiken om de immutability van het state object in React te garanderen? Laten we het uitzoeken!<\/p>\n<h3>Variabelen declaren<\/h3>\n<p>Je hebt drie manieren om een variabele te declaren in JavaScript: <code>var<\/code>, <code>let<\/code>, en <code>const<\/code>.<\/p>\n<p>Het <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Statements\/var#var_hoisting\" target=\"_blank\" rel=\"noopener noreferrer\"><code>var<\/code> statement<\/a> bestaat al sinds het begin van JavaScript. Het wordt gebruikt om een functie-scoped of globaal-scoped variabele te declaren, en optioneel te initialiseren naar een waarde.<\/p>\n<p>Wanneer je een variabele declaret met <code>var<\/code>, kun je die variabele opnieuw declaren en bijwerken in zowel het globale als het lokale bereik. De volgende code is toegestaan:<\/p>\n<pre><code class=\"language-js\">\/\/ Declare a variable\nvar msg = \"Hello!\";\n\n\/\/ Redeclare the same variable\nvar msg = \"Goodbye!\"\n\n\/\/ Update the variable\nmsg = \"Hello again!\"<\/code><\/pre>\n<p><code>var<\/code> declarations worden verwerkt voordat enige code wordt uitgevoerd. Daardoor staat het declaren van een variabele waar dan ook in de code gelijk aan het declaren bovenaan. Dit gedrag heet <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Glossary\/Hoisting\" target=\"_blank\" rel=\"noopener noreferrer\">hoisting<\/a>.<\/p>\n<p>Opmerkelijk is dat alleen de declaration van de variabele wordt gehoist, niet de initialisatie, wat pas gebeurt als <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Glossary\/Control_flow\" target=\"_blank\" rel=\"noopener noreferrer\">de controlflow<\/a> het assignment statement bereikt. Tot dat moment is de variabele <code>undefined<\/code>:<\/p>\n<pre><code class=\"language-js\">console.log(msg); \/\/ undefined\nvar msg = \"Hello!\";\nconsole.log(msg); \/\/ Hello!<\/code><\/pre>\n<p>De scope van een <code>var<\/code> wat wordt gedeclared in een JS functie is <a href=\"https:\/\/hacks.mozilla.org\/2015\/07\/es6-in-depth-let-and-const\/\" target=\"_blank\" rel=\"noopener noreferrer\">de hele body van die functie<\/a>.<\/p>\n<p>Dit betekent dat de variabele niet op blokniveau wordt gedefinieerd, maar op het niveau van de hele functie. Dit leidt tot een aantal problemen die je JavaScript code buggy en moeilijk te onderhouden kunnen maken.<\/p>\n<p>Om deze problemen op te lossen introduceerde ES6 het <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Statements\/let\" target=\"_blank\" rel=\"noopener noreferrer\">keyword <code>let<\/code><\/a>.<\/p>\n<blockquote><p>Het <code>let<\/code> statement declaret een <strong>block-scoped<\/strong> lokale variabele en initialiseert die optioneel op een waarde.<\/p><\/blockquote>\n<p>Wat zijn de voordelen van <code>let<\/code> boven <code>var<\/code>? Hier zijn er enkele:<\/p>\n<ul>\n<li><strong><code>let<\/code> declaret een variabele voor de scope van een blokstatement<\/strong>, terwijl <code>var<\/code> een variabele globaal of lokaal declaret voor een hele functie, ongeacht de scope van het blok.<\/li>\n<li><strong>Globale <code>let<\/code> variabelen zijn geen properties van het <code>window<\/code> object<\/strong>. Je kunt ze niet gebruiken met <code>window.variableName<\/code>.<\/li>\n<li><strong><code>let<\/code> is alleen toegankelijk nadat de declaration ervan is bereikt<\/strong>. De variabele wordt niet ge\u00efnitialiseerd totdat de controlflow de regel code bereikt waar hij is gedeclared (let declarations zijn <strong>non-hoisted<\/strong>).<\/li>\n<li><strong>Het opnieuw declaren van een variabele met <code>let<\/code> geeft een <code>SyntaxError<\/code>.<\/strong><\/li>\n<\/ul>\n<p>Omdat variabelen gedeclared met <code>var<\/code> niet block-scoped kunnen worden, kan een variabele die je definieert met <code>var<\/code> in een lus of in een <code>if<\/code> statement, van buiten het blok benaderd worden, wat kan leiden tot buggy code.<\/p>\n<p>De code in het eerste voorbeeld wordt zonder fouten uitgevoerd. Vervang nu <code>var<\/code> door <code>let<\/code> in het blok code dat je hierboven ziet:<\/p>\n<pre><code class=\"language-js\">console.log(msg);\nlet msg = \"Hello!\";\nconsole.log(msg);<\/code><\/pre>\n<p>In het tweede voorbeeld levert het gebruik van <code>let<\/code> in plaats van <code>var<\/code> een <code>Uncaught ReferenceError<\/code> op:<\/p>\n<figure id=\"attachment_151741\" aria-describedby=\"caption-attachment-151741\" style=\"width: 1176px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-151741\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/uncaught-referenceerror.jpg\" alt=\"Uncaught ReferenceError in Chrome\" width=\"1176\" height=\"222\"><figcaption id=\"caption-attachment-151741\" class=\"wp-caption-text\">Uncaught ReferenceError in Chrome<\/figcaption><\/figure>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f Als algemene regel moet je dus altijd <code>let<\/code> gebruiken in plaats van <code>var<\/code>.<\/strong><\/p>\n<\/aside>\n\n<p>ES6 introduceert ook een derde keyword: <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Statements\/const\"><code>const<\/code><\/a>.<\/p>\n<p><code>const<\/code> is redelijk vergelijkbaar met <code>let<\/code>, maar met een belangrijk verschil:<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f Aan variabelen die zijn gedeclared met <code>const<\/code> kan geen waarde worden toegekend, behalve op het punt waar ze worden gedeclared.<\/strong><\/p>\n<\/aside>\n\n<p>Kijk eens naar het volgende voorbeeld:<\/p>\n<pre><code class=\"language-js\">const MAX_VALUE = 1000;\nMAX_VALUE = 2000;<\/code><\/pre>\n<p>Bovenstaande code zou de volgende <a href=\"https:\/\/kinsta.com\/nl\/blog\/fouten-in-javascript\/#typeerror\">TypeError<\/a> genereren:<\/p>\n<figure id=\"attachment_151743\" aria-describedby=\"caption-attachment-151743\" style=\"width: 1012px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151743 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/uncaught-type-error-assignment-to-constant-variable.jpg\" alt=\"Uncaught TypeError: Toewijzing aan constante variabele in Google Chrome\" width=\"1012\" height=\"268\"><figcaption id=\"caption-attachment-151743\" class=\"wp-caption-text\"><em>Uncaught TypeError: Toewijzing aan constante variabele<\/em> in Google Chrome<\/figcaption><\/figure>\n<p>Bovendien:<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f Je kunt een <code>const<\/code> niet declaren zonder er een waarde aan te geven.<\/strong><\/p>\n<\/aside>\n\n<p>Een <code>const<\/code> declaren zonder het een waarde te geven zou het volgende opleveren <code>SyntaxError<\/code> (zie ook <a href=\"https:\/\/hacks.mozilla.org\/2015\/07\/es6-in-depth-let-and-const\/\">ES6 In Depth: let en const<\/a>):<\/p>\n<figure id=\"attachment_151746\" aria-describedby=\"caption-attachment-151746\" style=\"width: 1200px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-151746\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/uncaught-syntax-error-missing-initializer-in-const-declaration.jpg\" alt=\"Uncaught SyntaxError: Missing initializer in const declaration in Chrome\" width=\"1200\" height=\"214\"><figcaption id=\"caption-attachment-151746\" class=\"wp-caption-text\"><em>Uncaught SyntaxError: Ontbrekende initialisator in const declaration<\/em> in Chrome<\/figcaption><\/figure>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f Een constante kan niet opnieuw worden gedeclared en zijn waarde kan niet worden veranderd door opnieuw te declaren.<\/strong><\/p>\n<\/aside>\n\n<p>Maar als een constante een array of een object is, kun je properties of items binnen die array of dat object wijzigen.<\/p>\n<p>Je kunt bijvoorbeeld array-items wijzigen, toevoegen en verwijderen:<\/p>\n<pre><code class=\"language-js\">\/\/ Declare a constant array\nconst cities = [\"London\", \"New York\", \"Sydney\"];\n\n\/\/ Change an item\ncities[0] = \"Madrid\";\n\n\/\/ Add an item\ncities.push(\"Paris\");\n\n\/\/ Remove an item\ncities.pop();\n\nconsole.log(cities);\n\n\/\/ Array(3)\n\/\/ 0: \"Madrid\"\n\/\/ 1: \"New York\"\n\/\/ 2: \"Sydney\"<\/code><\/pre>\n<p>Maar je mag de array niet opnieuw toewijzen (assignen):<\/p>\n<pre><code class=\"language-js\">const cities = [\"London\", \"New York\", \"Sydney\"];\n\ncities = [\"Athens\", \"Barcelona\", \"Naples\"];<\/code><\/pre>\n<p>Bovenstaande code zou een <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/TypeError\" target=\"_blank\" rel=\"noopener noreferrer\">TypeError<\/a> opleveren.<\/p>\n<figure id=\"attachment_151747\" aria-describedby=\"caption-attachment-151747\" style=\"width: 1166px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151747 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/uncaught-type-error-uncaught-type-error-assignment-to-constant-variable-2.jpg\" alt=\"Uncaught TypeError: Assignment to constant variable.\" width=\"1166\" height=\"227\"><figcaption id=\"caption-attachment-151747\" class=\"wp-caption-text\"><em>Uncaught TypeError: Assignment to constant variable<\/em> in Chrome<\/figcaption><\/figure>\n<p>Je kunt objectproperties en methoden toevoegen, opnieuw toewijzen en verwijderen:<\/p>\n<pre><code class=\"language-js\">\/\/ Declare a constant obj\nconst post = {\n\tid: 1,\n\tname: 'JavaScript is awesome',\n\texcerpt: 'JavaScript is an awesome scripting language',\n\tcontent: 'JavaScript is a scripting language that enables you to create dynamically updating content.'\n};\n\n\/\/ add a new property\npost.slug = \"javascript-is-awesome\";\n\n\/\/ Reassign property\npost.id = 5;\n\n\/\/ Delete a property\ndelete post.excerpt;\n\nconsole.log(post);\n\n\/\/ {id: 5, name: 'JavaScript is awesome', content: 'JavaScript is a scripting language that enables you to create dynamically updating content.', slug: 'javascript-is-awesome'}<\/code><\/pre>\n<p>Maar je mag het object zelf niet opnieuw toewijzen. De volgende code zou door een <code>Uncaught TypeError<\/code>:<\/p>\n<pre><code class=\"language-js\">\/\/ Declare a constant obj\nconst post = {\n\tid: 1,\n\tname: 'JavaScript is awesome',\n\texcerpt: 'JavaScript is an awesome scripting language'\n};\n\npost = {\n\tid: 1,\n\tname: 'React is powerful',\n\texcerpt: 'React lets you build user interfaces'\n};<\/code><\/pre>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f In React is het declaren van variabelen met <code>const<\/code> de standaard. <code>let<\/code> moet worden gebruikt als <code>const<\/code> niet geschikt is. Het gebruik van <code>var<\/code> wordt sterk afgeraden.<\/strong><\/p>\n<\/aside>\n\n<h3>Object.freeze()<\/h3>\n<p>We zijn het er nu over eens dat het gebruik van <code>const<\/code> niet altijd sterke immutability garandeert (vooral bij het werken met objecten en arrays). Hoe kun je dan het immutabilitypatroon implementeren in je React applicaties?<\/p>\n<p>Ten eerste, wanneer je wilt voorkomen dat de elementen van een array of properties van een object worden gewijzigd, kun je de <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Object\/freeze\" target=\"_blank\" rel=\"noopener noreferrer\">statische methode <code>Object.freeze()<\/code><\/a> gebruiken.<\/p>\n<blockquote><p>Het freezen van een object voorkomt uitbreidingen en maakt bestaande properties niet-schrijfbaar en niet-configureerbaar. Een frozen object kan niet meer worden gewijzigd: er kunnen geen nieuwe properties worden toegevoegd, bestaande properties kunnen niet worden verwijderd, hun enumerability, configureerbaarheid, beschrijfbaarheid of waarde kan niet worden gewijzigd, en het prototype van het object kan niet opnieuw worden toegekend. <code>freeze()<\/code> retourneert hetzelfde object dat werd meegegeven.<\/p><\/blockquote>\n<p>Elke poging om een property toe te voegen, te wijzigen of te verwijderen zal mislukken, hetzij stilletjes, hetzij door het geven van een <code>TypeError<\/code>, meestal in <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Strict_mode\" target=\"_blank\" rel=\"noopener noreferrer\">strict mode<\/a>.<\/p>\n<p>Je kunt <code>Object.freeze()<\/code> op deze manier gebruiken:<\/p>\n<pre><code class=\"language-js\">'use strict'\n\/\/ Declare a constant obj\nconst post = {\n\tid: 1,\n\tname: 'JavaScript is awesome',\n\texcerpt: 'JavaScript is an awesome scripting language'\n};\n\/\/ Freeze the object\nObject.freeze(post);<\/code><\/pre>\n<p>Als je nu probeert een property toe te voegen, krijg je een <code>Uncaught TypeError<\/code>:<\/p>\n<pre><code class=\"language-js\">\/\/ Add a new property\npost.slug = \"javascript-is-awesome\"; \/\/ Uncaught TypeError<\/code><\/pre>\n<figure id=\"attachment_151753\" aria-describedby=\"caption-attachment-151753\" style=\"width: 1256px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151753 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/uncaught-type-error-object-is-not-extensible.jpg\" alt=\"Uncaught TypeError: can't define property \"slug\": Object is not extensible\" width=\"1256\" height=\"300\"><figcaption id=\"caption-attachment-151753\" class=\"wp-caption-text\"><em>Uncaught TypeError: can&#8217;t define property &#8220;slug&#8221;: Object is not extensible<\/em> in Firefox<\/figcaption><\/figure>\n<p>Als je een property opnieuw probeert toe te wijzen, krijg je een ander soort <code>TypeError<\/code>:<\/p>\n<pre><code class=\"language-js\">\/\/ Reassign property\npost.id = 5; \/\/ Uncaught TypeError<\/code><\/pre>\n<figure id=\"attachment_151865\" aria-describedby=\"caption-attachment-151865\" style=\"width: 1198px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151865 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/uncaught-type-error-read-only-property.jpg\" alt=\"Het opnieuw toewijzen van een alleen-lezen property gooit een Uncaught TypeError\" width=\"1198\" height=\"288\"><figcaption id=\"caption-attachment-151865\" class=\"wp-caption-text\">Het opnieuw toewijzen van een alleen-lezen property geeft een Uncaught TypeError<\/figcaption><\/figure>\n<figure id=\"attachment_151868\" aria-describedby=\"caption-attachment-151868\" style=\"width: 1190px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151868 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/uncaught-type-error-cannot-assign-to-read-only-property.jpg\" alt=\"Uncaught TypeError: Cannot assign to read only property in Chrome\" width=\"1190\" height=\"254\"><figcaption id=\"caption-attachment-151868\" class=\"wp-caption-text\"><em>Uncaught TypeError: Cannot assign to read only property in Chrome &#8216;id&#8217; of object &#8216;#&lt;Object&gt;&#8217;<\/em> in Google Chrome<\/figcaption><\/figure>\n<p>Je kunt ook proberen een property te verwijderen. Het resultaat zal een andere <code>TypeError<\/code> zijn:<\/p>\n<pre><code class=\"language-js\">\/\/ Delete a property\ndelete post.excerpt; \/\/ Uncaught TypeError<\/code><\/pre>\n<figure id=\"attachment_151869\" aria-describedby=\"caption-attachment-151869\" style=\"width: 1370px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151869 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/uncaught-type-error-property-excerpt-is-non-configurable-and-cant-be-deleted-firefox.jpg\" alt=\"Uncaught TypeError: property \"excerpt\" is non-configurable and can't be deleted in Firefox\" width=\"1370\" height=\"298\"><figcaption id=\"caption-attachment-151869\" class=\"wp-caption-text\"><em>Uncaught TypeError: property &#8220;excerpt&#8221; is non-configurable and can&#8217;t be deleted <\/em> in Firefox<\/figcaption><\/figure>\n<h2>Template literals<\/h2>\n<p>Wanneer je in JavaScript strings moet combineren met de uitvoer van expressions, gebruik je meestal de opteloperator <code>+<\/code>. Je kunt echter ook een JavaScript feature gebruiken waarmee je expressions binnen strings kunt opnemen zonder de opteloperator te gebruiken: <strong>template literals<\/strong>.<\/p>\n<p><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Template_literals\" target=\"_blank\" rel=\"noopener noreferrer\">Template literals<\/a> zijn een speciaal soort strings die begrensd worden door backtick (<code>`<\/code>) tekens.<\/p>\n<p>Binnen template literals kun je placeholders opnemen, die ingesloten expressions zijn, begrensd door een dollarteken en tussen accolades gewikkeld.<\/p>\n<p>Hier is een voorbeeld:<\/p>\n<pre><code class=\"language-js\">const align = 'left';\nconsole.log(`This string is ${ align }-aligned`);<\/code><\/pre>\n<p>De strings en placeholders worden doorgegeven aan een standaardfunctie die stringinterpolatie uitvoert om de placeholders te vervangen en de delen samen te voegen tot een enkele string. Je kunt de standaardfunctie ook vervangen door een eigen functie.<\/p>\n<p>Je kunt template literals gebruiken voor:<\/p>\n<p><strong>Meerregelige strings<\/strong>: newline-tekens zijn hierbij onderdeel van de template literal.<\/p>\n<pre><code class=\"language-js\">console.log(`Twinkle, twinkle, little bat!\nHow I wonder what you\u2019re at!`);<\/code><\/pre>\n<p><strong>Interpolatie van strings<\/strong>: Zonder template literals kun je alleen de opteloperator gebruiken om de uitvoer van expressions te combineren met strings. Bekijk het volgende voorbeeld:<\/p>\n<pre><code class=\"language-js\">const a = 3;\nconst b = 7;\nconsole.log(\"The result of \" + a + \" + \" + b + \" is \" + (a + b));<\/code><\/pre>\n<p>Ik snap dat dit een beetje verwarrend is. Je kunt deze code op een beter leesbare en onderhoudbare manier schrijven met behulp van template literals:<\/p>\n<pre><code class=\"language-js\">const a = 3;\nconst b = 7;\nconsole.log(`The result of ${ a } + ${ b } is ${ a + b }`);<\/code><\/pre>\n<p>Maar bedenk wel dat er een <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Template_literals#string_interpolation\" target=\"_blank\" rel=\"noopener noreferrer\">verschil is tussen de twee syntaxen<\/a>:<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f Template literals dwingen hun expressions direct naar strings, terwijl addition de operands eerst naar primitives dwingt.<\/strong><\/p>\n<\/aside>\n\n<p>Template literals lenen zich voor verschillende toepassingen. In het volgende voorbeeld gebruiken we een <a href=\"#ternary-operator\" target=\"_blank\" rel=\"noopener noreferrer\">ternary operator<\/a> om een waarde toe te kennen aan een <code>class<\/code> attribuut.<\/p>\n<pre><code class=\"language-js\">const page = 'archive';\nconsole.log(`class=${ page === 'archive' <code>?<\/code> 'archive' : 'single' }`);<\/code><\/pre>\n<p>Hieronder voeren we een eenvoudige berekening uit:<\/p>\n<pre><code class=\"language-js\">const price = 100;\nconst VAT = 0.22;\n\nconsole.log(`Total price: ${ (price * (1 + VAT)).toFixed(2) }`);<\/code><\/pre>\n<p>Het is ook mogelijk template literals te nesten door ze op te nemen binnen een <code>${expression}<\/code> placeholder (maar <a href=\"https:\/\/dev.to\/remrkabledev\/nesting-template-literals-a-recommended-approach-2jgj\" target=\"_blank\" rel=\"noopener noreferrer\">gebruik nested templates met voorzichtigheid<\/a>, omdat complexe stringstructuren moeilijk te lezen en te onderhouden kunnen zijn).<\/p>\n<p><strong>Tagged templates<\/strong>: Zoals we hierboven al vermeldden, is het ook mogelijk om een custom functie te defini\u00ebren om string concatenation uit te voeren. Dit soort template literal heet <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Template_literals#tagged_templates\" target=\"_blank\" rel=\"noopener noreferrer\">tagged template<\/a>.<\/p>\n<blockquote><p>Met tags kun je template literals parsen met een functie. Het eerste argument van een tag-functie bevat een array van string-waarden. De overige argumenten hebben betrekking op de expressions.<\/p><\/blockquote>\n<p>Met tags kun je template literals parsen met een custom functie. Het eerste argument van deze functie is een array van de string die in de template literal grep zijn opgenomen, de andere argumenten zijn de expressions.<\/p>\n<p>Je kunt een custom functie maken om elke gewenste bewerking op de template argumenten uit te voeren en de bewerkte string terug te geven. Hier is een heel eenvoudig voorbeeld van <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Template_literals#tagged_templates\" target=\"_blank\" rel=\"noopener noreferrer\">een tagged template<\/a>:<\/p>\n<pre><code class=\"language-js\">const name = \"Carlo\";\nconst role = \"student\";\nconst organization = \"North Pole University\";\nconst age = 25;\n\nfunction customFunc(strings, ...tags) {\n\tconsole.log(strings); \/\/ ['My name is ', \", I'm \", ', and I am ', ' at ', '', raw: Array(5)]\n\tconsole.log(tags); \/\/ ['Carlo', 25, 'student', 'North Pole University']\n\tlet string = '';\n\tfor ( let i = 0; i &lt; strings.length - 1; i++ ){\n\t\tconsole.log(i + \"\" + strings[i] + \"\" + tags[i]);\n\t\tstring += strings[i] + tags[i];\n\t}\n\treturn string.toUpperCase();\n}\n\nconst output = customFunc`My name is ${name}, I'm ${age}, and I am ${role} at ${organization}`;\nconsole.log(output);<\/code><\/pre>\n<p>De code hierboven drukt de array-elementen <code>strings<\/code> en <code>tags<\/code> af en zet dan de tekenreeksen in hoofdletters voordat de uitvoer in de browserconsole wordt geprint.<\/p>\n<h2>Arrow functies<\/h2>\n<p>Arrow zijn een alternatief voor anonieme functies (functies zonder naam) in JavaScript, maar met enkele verschillen en beperkingen.<\/p>\n<p>De volgende declarations zijn allemaal geldige voorbeelden van arrow functies:<\/p>\n<pre><code class=\"language-javascript\">\/\/ Arrow function without parameters\nconst myFunction = () =&gt; expression;\n\n\/\/ Arrow function with one parameter\nconst myFunction = param =&gt; expression;\n\n\/\/ Arrow function with one parameter\nconst myFunction = (param) =&gt; expression;\n\n\/\/ Arrow function with more parameters\nconst myFunction = (param1, param2) =&gt; expression;\n\n\/\/ Arrow function without parameters\nconst myFunction = () =&gt; {\n\tstatements\n}\n\n\/\/ Arrow function with one parameter\nconst myFunction = param =&gt; {\n\tstatements\n}\n\n\/\/ Arrow function with more parameters\nconst myFunction = (param1, param2) =&gt; {\n\tstatements\n}<\/code><\/pre>\n<p>Je mag de ronde haakjes weglaten als je maar \u00e9\u00e9n parameter aan de functie doorgeeft. Als je twee of meer parameters doorgeeft, moet je ze tussen haakjes zetten. Hier volgt een voorbeeld:<\/p>\n<pre><code class=\"language-javascript\">const render = ( id, title, category ) =&gt; `${id}: ${title} - ${category}`;\nconsole.log( render ( 5, 'Hello World!', \"JavaScript\" ) );<\/code><\/pre>\n<p>Functies met \u00e9\u00e9n regel geven standaard een waarde terug. Als je de syntaxis van meerdere regels gebruikt, moet je handmatig een waarde teruggeven:<\/p>\n<pre><code class=\"language-javascript\">const render = ( id, title, category ) =&gt; {\n\tconsole.log( `Post title: ${ title }` );\n\treturn `${ id }: ${ title } - ${ category }`;\n}\nconsole.log( `Post details: ${ render ( 5, 'Hello World!', \"JavaScript\" ) }` );<\/code><\/pre>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f Je zult arrow functies meestal gebruiken in React applicaties, tenzij er een specifieke reden is om ze niet te gebruiken.<\/strong><\/p>\n<\/aside>\n\n<p>Een belangrijk verschil tussen normale functies en arrow functies om in gedachten te houden is dat arrow functies geen eigen bindingen hebben met het keyword <code>this<\/code>. Als je <code>this<\/code> probeert te gebruiken in een arrow functie, zal het buiten het bereik van de functie vallen.<\/p>\n<p>Lees voor een meer diepgaande beschrijving van arrow functies en gebruiksvoorbeelden ook de <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Functions\/Arrow_functions\" target=\"_blank\" rel=\"noopener noreferrer\">mdn web docs<\/a>.<\/p>\n<h2>Klassen<\/h2>\n<p><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Learn\/JavaScript\/Objects\/Classes_in_JavaScript\" target=\"_blank\" rel=\"noopener noreferrer\">Klassen in JavaScript<\/a> zijn een speciaal type functie voor het maken van objecten die het prototypische inheritance mechanisme gebruiken.<\/p>\n<p>Volgens <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Inheritance_and_the_prototype_chain\" target=\"_blank\" rel=\"noopener noreferrer\">mdn web docs<\/a>,<\/p>\n<blockquote><p>Wat betreft inheritance kent JavaScript maar \u00e9\u00e9n constructie: objecten. Elk object heeft een private property eigenschap die een link bevat naar een ander object dat zijn prototype wordt genoemd. Dat prototype object heeft een eigen prototype, enzovoort totdat een object wordt bereikt met <code>null<\/code> als prototype.<\/p><\/blockquote>\n<p>Net als bij functies heb je twee manieren om een klasse te defini\u00ebren:<\/p>\n<ul>\n<li>Een klasse-expression<\/li>\n<li>Een klasse-declaration<\/li>\n<\/ul>\n<p>Je kunt het keyword <code>class<\/code> gebruiken om een klasse te defini\u00ebren binnen een expression, zoals in het volgende voorbeeld:<\/p>\n<pre><code class=\"language-javascript\">const Circle = class {\n\tconstructor(radius) {\n\t\tthis.radius = Number(radius);\n\t}\n\tarea() {\n\t\treturn Math.PI * Math.pow(this.radius, 2);\n\t}\n\tcircumference() {\n\t\treturn Math.PI * this.radius * 2;\n\t}\n}\nconsole.log('Circumference: ' + new Circle(10).circumference()); \/\/ 62.83185307179586\nconsole.log('Area: ' + new Circle(10).area()); \/\/ 314.1592653589793<\/code><\/pre>\n<p>Een klasse heeft een body, dat is de code die in krulhaken is opgenomen. Hier definieer je constructor en methoden, die ook wel class members worden genoemd. De body van de klasse wordt uitgevoerd in strict mode, zelfs zonder gebruik te maken van de directive <code>'strict mode'<\/code>.<\/p>\n<p>De methode <code>constructor<\/code> wordt gebruikt voor het maken en initialiseren van een object van een klasse en wordt automatisch uitgevoerd als de klasse wordt ge\u00efnstantieerd. Als je geen constructormethode definieert in je klasse, zal JavaScript automatisch een standaard constructor gebruiken.<\/p>\n<p>Een klasse kan worden uitgebreid met het keyword <code>extends<\/code>.<\/p>\n<pre><code class=\"language-javascript\">class Book {\n\tconstructor(title, author) {\n\t\tthis.booktitle = title;\n\t\tthis.authorname = author;\n\t}\n\tpresent() {\n\t\treturn this.booktitle + ' is a great book from ' + this.authorname;\n\t}\n}\n\nclass BookDetails extends Book {\n\tconstructor(title, author, cat) {\n\t\tsuper(title, author);\n\t\tthis.category = cat;\n\t}\n\tshow() {\n\t\treturn this.present() + ', it is a ' + this.category + ' book';\n\t}\n}\n\nconst bookInfo = new BookDetails(\"The Fellowship of the Ring\", \"J. R. R. Tolkien\", \"Fantasy\");\nconsole.log(bookInfo.show());<\/code><\/pre>\n<p>Een constructor kan het keyword <code>super<\/code> gebruiken om de bovenliggende constructor te callen. Als je een argument doorgeeft aan de methode <code>super()<\/code>, zal dit argument ook beschikbaar zijn in de parent constructorklasse.<\/p>\n<p>Voor een uitgebreidere bespreking van JavaScript klassen en diverse voorbeelden van gebruik, zie ook de <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Classes\" target=\"_blank\" rel=\"noopener noreferrer\">mdn web docs<\/a>.<\/p>\n<p>Klassen worden vaak gebruikt om React componenten te maken. Meestal zul je geen eigen klassen maken, maar eerder ingebouwde React klassen uitbreiden.<\/p>\n<p>Alle <a href=\"https:\/\/react.dev\/reference\/react\/Component#defining-a-class-component\" target=\"_blank\" rel=\"noopener noreferrer\">klassen in React<\/a> hebben een<code>render()<\/code> methode die een React element teruggeeft:<\/p>\n<pre><code class=\"language-javascript\">class Animal extends React.Component {\n\trender() {\n\t\treturn &lt;h2&gt;Hey, I am a {this.props.name}!&lt;\/h2&gt;;\n\t}\n}<\/code><\/pre>\n<p>In het bovenstaande voorbeeld is <code>Animal<\/code> een klasse-element. Bedenk dat<\/p>\n<ul>\n<li>De naam van de component moet beginnen met een hoofdletter<\/li>\n<li>De component moet de expression <code>extends React.Component<\/code> bevatten. Dit geeft toegang tot de methoden van de <code>React.Component<\/code>.<\/li>\n<li>De methode <code>render()<\/code> geeft de HTML terug en is vereist.<\/li>\n<\/ul>\n<p>Als je eenmaal je klassecomponent hebt gemaakt, kun je de HTML op de pagina renderen:<\/p>\n<pre><code class=\"language-javascript\">const root = ReactDOM.createRoot(document.getElementById('root'));\nconst element = &lt;Animal name=\"Rabbit\" \/&gt;;\nroot.render(element);<\/code><\/pre>\n<p>De afbeelding hieronder toont het resultaat op de pagina (Je kunt het <a href=\"https:\/\/codepen.io\/carlodaniele\/pen\/LYgPvEP\">in actie zien op CodePen<\/a>).<\/p>\n<figure id=\"attachment_151880\" aria-describedby=\"caption-attachment-151880\" style=\"width: 2162px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-151880\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/react-class-component.jpg\" alt=\"A simple React class component\" width=\"2162\" height=\"996\"><figcaption id=\"caption-attachment-151880\" class=\"wp-caption-text\">Een eenvoudige React klassecomponent<\/figcaption><\/figure>\n<p>Let wel op dat <a href=\"https:\/\/react.dev\/reference\/react\/Component#migrating-a-simple-component-from-a-class-to-a-function\" target=\"_blank\" rel=\"noopener noreferrer\">het gebruik van klassecomponenten in React niet wordt aanbevolen<\/a> en dat het de <a href=\"https:\/\/kinsta.com\/nl\/blog\/react-best-practices\/#12-make-use-of-functional-components\">voorkeur verdient om componenten als functies te defini\u00ebren<\/a>.<\/p>\n<h2>Het keyword &#8217;this&#8217;<\/h2>\n<p>In JavaScript is het keyword <code>this<\/code> een algemene placeholder die gewoonlijk wordt gebruikt binnen objecten, klassen en functies, en het verwijst naar verschillende elementen, afhankelijk van de context of het applicatiegebied.<\/p>\n<p><strong><code>this<\/code> kan worden gebruikt in de globale scope.<\/strong> Als je <code>this<\/code> digitaliseert in de console van je browser, krijg je:<\/p>\n<pre><code>Window {window: Window, self: Window, document: document, name: '', location: Location, ...}<\/code><\/pre>\n<p>Je hebt toegang tot alle methoden en properties van het object <code>Window<\/code>. Als je dus <code>this.location<\/code> uitvoert in de console van je browser, krijg je de volgende output:<\/p>\n<pre><code>Location {ancestorOrigins: DOMStringList, href: 'https:\/\/kinsta.com\/', origin: 'https:\/\/kinsta.com', protocol: 'https:', host: 'kinsta.com', ...}<\/code><\/pre>\n<p><strong>Wanneer je <code>this<\/code> in een object gebruikt, verwijst het naar het object zelf.<\/strong> Zo kun je naar de waarden van een object verwijzen in de methoden van het object zelf:<\/p>\n<pre><code class=\"language-javascript\">const post = { \n\tid: 5,\n\tgetSlug: function(){\n\t\treturn `post-${this.id}`;\n\t},\n\ttitle: 'Awesome post', \n\tcategory: 'JavaScript' \n};\nconsole.log( post.getSlug );<\/code><\/pre>\n<p>Laten we nu proberen <code>this<\/code> te gebruiken in een functie:<\/p>\n<pre><code class=\"language-javascript\">const useThis = function () {\n\treturn this;\n}\nconsole.log( useThis() );<\/code><\/pre>\n<p>Als je niet in de strict mode zit, krijg je:<\/p>\n<pre><code>Window {window: Window, self: Window, document: document, name: '', location: Location, ...}<\/code><\/pre>\n<p>Maar als je <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Strict_mode\" target=\"_blank\" rel=\"noopener noreferrer\">de strict mode<\/a> callt, krijg je een ander resultaat:<\/p>\n<pre><code class=\"language-javascript\">const doSomething = function () {\n\t'use strict';\n\treturn this;\n}\nconsole.log( doSomething() );<\/code><\/pre>\n<p>In dit geval geeft de functie <code>undefined<\/code> terug. Dat komt omdat <code>this<\/code> in een functie verwijst naar de expliciete waarde ervan.<\/p>\n<p>Dus hoe stel je expliciet <code>this<\/code> in een functie in?<\/p>\n<p>Ten eerste kun je handmatig properties en methoden aan de functie toekennen:<\/p>\n<pre><code class=\"language-javascript\">function doSomething( post ) {\n\tthis.id = post.id;\n\tthis.title = post.title;\n\tconsole.log( `${this.id} - ${this.title}` );\n}\nnew doSomething( { id: 5, title: 'Awesome post' } );<\/code><\/pre>\n<p>Maar je kunt ook methoden <code>call<\/code>, <code>apply<\/code>, en <code>bind<\/code> gebruiken, naast arrow functies.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f De methode <code>call()<\/code> op een functie accepteert een object waarnaar <code>this<\/code> verwijst.<\/strong><\/p>\n<\/aside>\n\n<pre><code class=\"language-javascript\">const doSomething = function() {\n\tconsole.log( `${this.id} - ${this.title}` );\n}\ndoSomething.call( { id: 5, title: 'Awesome post' } );<\/code><\/pre>\n<p>De methode <code>call()<\/code> kan op elke functie worden gebruikt en doet precies wat het zegt: het callt de functie.<\/p>\n<p>Verder accepteert <code>call()<\/code> elke andere parameter die in de functie is gedefinieerd:<\/p>\n<pre><code class=\"language-javascript\">const doSomething = function( cat ) {\n\tconsole.log( `${this.id} - ${this.title} - Category: ${cat}` );\n}\ndoSomething.call( { id: 5, title: 'Awesome post' }, 'JavaScript' );<\/code><\/pre>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f De methode <code>apply()<\/code> accepteert een object waarnaar <code>this<\/code> zal verwijzen en een array van de parameters van de functie.<\/strong><\/p>\n<\/aside>\n\n<pre><code class=\"language-javascript\">const doSomething = function( cat1, cat2 ) {\n\tconsole.log( `${this.id} - ${this.title} - Categories: ${cat1}, ${cat2}` );\n}\ndoSomething.apply( { id: 5, title: 'Awesome post' }, ['JavaScript', 'React'] );<\/code><\/pre>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f De methode <code>bind()<\/code> associeert een object met een functie, zodat telkens als je de functie callt, <code>this<\/code> naar het object verwijst.<\/strong><\/p>\n<\/aside>\n\n<pre><code class=\"language-javascript\">const post = { id: 5, title: 'Awesome post', category: 'JavaScript' };\nconst doSomething = function() {\n\treturn `${this.id} - ${this.title} - ${this.category}`;\n}\nconst bindRender = doSomething.bind( post );\nconsole.log( bindRender() );<\/code><\/pre>\n<p>Een alternatief voor de hierboven besproken opties is het gebruik van <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Functions\/Arrow_functions\" target=\"_blank\" rel=\"noopener noreferrer\">arrow functies<\/a>.<\/p>\n<blockquote><p>Arrow functie-expressions moeten alleen gebruikt worden voor niet-methodische functies, omdat ze geen eigen <code>this<\/code> hebben.<\/p><\/blockquote>\n<p>Dit maakt arrow functies bijzonder nuttig bij event handlers.<\/p>\n<p>Dat komt omdat &#8220;wanneer de code wordt gecalld vanuit een inline event handler attribuut, zijn <code>this<\/code> wordt ingesteld op het DOM element waarop de listener is geplaatst&#8221; (zie <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Operators\/this#this_in_inline_event_handlers\" target=\"_blank\" rel=\"noopener noreferrer\">mdn web docs<\/a>).<\/p>\n<p>Maar dingen veranderen met arrow functies omdat&#8230;<\/p>\n<blockquote><p>&#8230; arrow functies stellen <code>this<\/code> vast op basis van het bereik waarbinnen de arrow functie is gedefinieerd, en de <code>this<\/code> waarde verandert niet op basis van hoe de functie wordt gecalled.<\/p><\/blockquote>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f Met arrow functies kun je de context direct binden aan een event handler.<\/strong><\/p>\n<\/aside>\n\n<h3>&#8216;This&#8217; binden aan event handlers in React<\/h3>\n<p>Bij React heb je een paar manieren om ervoor te zorgen dat de event handler zijn context niet verliest:<\/p>\n<p><strong>1. Met behulp van <code>bind()<\/code> binnen de render methode:<\/strong><\/p>\n<pre><code class=\"language-javascript\">import React, { Component } from 'react';\nclass MyComponent extends Component {\n\tstate = { message: 'Hello World!' };\n\n\tshowMessage(){\n\t\tconsole.log( 'This refers to: ', this );\n\t\tconsole.log( 'The message is: ', this.state.message );\n\t}\n\n\trender(){\n\t\treturn( &lt;button onClick={ this.showMessage.bind( this ) }&gt;Show message from state!&lt;\/button&gt; );\n\t}\n}\nexport default MyComponent;<\/code><\/pre>\n<p><strong>2. De context binden aan de event handler in de constructor:<\/strong><\/p>\n<pre><code class=\"language-javascript\">import React, { Component } from 'react';\nclass MyComponent extends Component {\n\tstate = { message: 'Hello World!' };\n\n\tconstructor(props) {\n\t\tsuper(props);\n\t\tthis.showMessage = this.showMessage.bind( this );\n\t}\n\n\tshowMessage(){\n\t\tconsole.log( 'This refers to: ', this );\n\t\tconsole.log( 'The message is: ', this.state.message );\n\t}\n\n\trender(){\n\t\treturn( &lt;button onClick={ this.showMessage }&gt;Show message from state!&lt;\/button&gt; );\n\t}\n}\nexport default MyComponent;<\/code><\/pre>\n<p><strong>3. De event handler defini\u00ebren met behulp van arrow functies:<\/strong><\/p>\n<pre><code class=\"language-javascript\">import React, { Component } from 'react';\nclass MyComponent extends Component {\n\tstate = { message: 'Hello World!' };\n\n\tshowMessage = () =&gt; {\n\t\tconsole.log( 'This refers to: ', this );\n\t\tconsole.log( 'The message is: ', this.state.message );\n\t}\n\n\trender(){\n\t\treturn( &lt;button onClick={this.showMessage}&gt;Show message from state!&lt;\/button&gt; );\n\t}\n}\nexport default MyComponent;<\/code><\/pre>\n<p><strong>4. Arrow functies gebruiken in de rendermethode:<\/strong><\/p>\n<pre><code class=\"language-javascript\">import React, { Component } from 'react';\nclass MyComponent extends Component {\n\tstate = { message: 'Hello World!' };\n\n\tshowMessage() {\n\t\tconsole.log( 'This refers to: ', this );\n\t\tconsole.log( 'The message is: ', this.state.message );\n\t}\n\n\trender(){\n\t\treturn( &lt;button onClick={()=&gt;{this.showMessage()}}&gt;Show message from state!&lt;\/button&gt; );\n\t}\n}\nexport default MyComponent;<\/code><\/pre>\n<p>Welke methode je ook kiest, als je op de knop klikt, toont de browserconsole de volgende uitvoer:<\/p>\n<pre><code>This refers to:  MyComponent {props: {\u2026}, context: {\u2026}, refs: {\u2026}, updater: {\u2026}, state: {\u2026}, \u2026}\nThe message is:  Hello World!<\/code><\/pre>\n<h2>Ternary operator<\/h2>\n<p>Met de <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Operators\/Conditional_Operator\" target=\"_blank\" rel=\"noopener noreferrer\">conditional operator<\/a> (of ternary operator) kun je eenvoudige conditional (voorwaardelijke) expressions schrijven in JavaScript. Hij gebruikt drie operands:<\/p>\n<ul>\n<li>een voorwaarde gevolgd door een vraagteken (<code>?<\/code>),<\/li>\n<li>een expression om uit te voeren als de voorwaarde <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Glossary\/Truthy\" target=\"_blank\" rel=\"noopener noreferrer\">waar is<\/a>, gevolgd door een dubbele punt (<code>:<\/code>),<\/li>\n<li>een tweede expression om uit te voeren als de voorwaarde <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Glossary\/Falsy\" target=\"_blank\" rel=\"noopener noreferrer\">fout is<\/a>.<\/li>\n<\/ul>\n<pre><code class=\"language-javascript\">const drink = personAge &gt;= 18 ? \"Wine\" : \"Juice\";<\/code><\/pre>\n<p>Het is ook mogelijk om meerdere expressions te chainen:<\/p>\n<pre><code class=\"language-javascript\">const drink = personAge &gt;= 18 ? \"Wine\" : personAge &gt;= 6 ? \"Juice\" : \"Milk\";<\/code><\/pre>\n<p>Wees echter voorzichtig, want het chainen van meerdere expressions kan leiden tot rommelige code die moeilijk te onderhouden is.<\/p>\n<p>De ternary operator is bijzonder nuttig in React, vooral in je JSX code, die alleen expressions tussen accolades accepteert.<\/p>\n<p>Je kunt de ternary operator bijvoorbeeld gebruiken om de waarde van een attribuut in te stellen op basis van een specifieke voorwaarde:<\/p>\n<pre><code class=\"language-jsx\">render(){\t\t\t\n\tconst person = {\n\t\tname: 'Carlo',\n\t\tavatar: 'https:\/\/en.gravatar.com\/...',\n\t\tdescription: 'Content Writer',\n\t\ttheme: 'light'\n\t}\n\n\treturn (\n\t\t&lt;div\n\t\t\tclassName='card' \n\t\t\tstyle={\n\t\t\t\tperson.theme === 'dark' ? \n\t\t\t\t{ background: 'black', color: 'white' } : \n\t\t\t\t{ background: 'white', color: 'black'} \n\t\t\t}&gt;\n\t\t\t&lt;img\n\t\t\t\tsrc={person.avatar}\n\t\t\t\talt={person.name}\n\t\t\t\tstyle={ { width: '100%' } }\n\t\t\t\/&gt;\n\t\t\t&lt;div style={ { padding: '2px 16px' } }&gt;\n\t\t\t\t&lt;h3&gt;{person.name}&lt;\/h3&gt;\n\t\t\t\t&lt;p&gt;{person.description}.&lt;\/p&gt;\n\t\t\t&lt;\/div&gt;\n\t\t&lt;\/div&gt;\n\t);\n}<\/code><\/pre>\n<p>In bovenstaande code controleren we de voorwaarde <code>person.theme === 'dark'<\/code> om de waarde van het attribuut <code>style<\/code> van de container <code>div<\/code> in te stellen.<\/p>\n<h2>Short circuit evaluation<\/h2>\n<p>De logische AND (<code>&&<\/code>) operator evalueert operands van links naar rechts en geeft <code>true<\/code> terug als &#8211; en alleen als &#8211; alle operands <code>true<\/code> zijn.<\/p>\n<p>De logische AND is een <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Operators\/Logical_AND#short-circuit_evaluation\" target=\"_blank\" rel=\"noopener noreferrer\">short circuit operator<\/a>. Elke operand wordt omgezet in een boolean en als het resultaat van de omzetting <code>false<\/code> is, stopt de AND operator en geeft de oorspronkelijke waarde van de falsy operand terug. Als alle waarden <code>true<\/code> zijn, wordt de oorspronkelijke waarde van de laatste operand teruggegeven.<\/p>\n<p><aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f In JavaScript geeft <code>true &amp;&amp; expression<\/code> altijd <code>expression<\/code> terug, en <code>false &amp;&amp; expression<\/code> geeft altijd <code>false<\/code> terug.<\/strong><\/p>\n<\/aside>\n<strong><br \/>\n<\/strong><br \/>\nShort circuit evaluation is een JavaScript functie die vaak wordt gebruikt in React, omdat je hiermee blokken code kunt uitvoeren op basis van specifieke voorwaarden. <a href=\"https:\/\/kinsta.com\/nl\/blog\/dynamische-blokken\/#add-the-excerpt\">Hier<\/a> volgt een voorbeeld:<\/p>\n<pre><code class=\"language-jsx\">{\n\tdisplayExcerpt &&\n\tpost.excerpt.rendered && (\n\t\t&lt;p&gt;\n\t\t\t&lt;RawHTML&gt;\n\t\t\t\t{ post.excerpt.rendered }\n\t\t\t&lt;\/RawHTML&gt;\n\t\t&lt;\/p&gt;\n\t)\n}<\/code><\/pre>\n<p>In bovenstaande code, als <code>displayExcerpt<\/code> <strong>EN<\/strong> <code>post.excerpt.rendered<\/code> evalueren naar <code>true<\/code>, geeft React het laatste blok JSX terug.<\/p>\n<p><a href=\"https:\/\/legacy.reactjs.org\/docs\/conditional-rendering.html#inline-if-with-logical--operator\" target=\"_blank\" rel=\"noopener noreferrer\">Samengevat<\/a>: &#8220;als de voorwaarde <code>true<\/code> is, verschijnt het element direct na <code>&&<\/code> in de output. Als het <code>false<\/code> is, zal React het negeren en overslaan&#8221;.<\/p>\n<h2>Spread syntax<\/h2>\n<p>In JavaScript kun je met <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Operators\/Spread_syntax\" target=\"_blank\" rel=\"noopener noreferrer\">spread syntax<\/a> een iterabel element, zoals een array of object, uitbreiden tot functie-argumenten, array-literals of object-literals.<\/p>\n<p>In het volgende voorbeeld pakken we een array uit in een functiecall:<\/p>\n<pre><code class=\"language-jsx\">function doSomething( x, y, z ){\n\treturn `First: ${x} - Second: ${y} - Third: ${z} - Sum: ${x+y+z}`;\n}\nconst numbers = [3, 4, 7];\nconsole.log( doSomething( ...numbers ) );<\/code><\/pre>\n<p>Je kunt de spread syntax gebruiken om een array te dupliceren (zelfs multidimensionale arrays) of om arrays aan elkaar te chainen. In de volgende voorbeelden voegen we twee arrays op twee verschillende manieren samen:<\/p>\n<pre><code class=\"language-jsx\">const firstArray = [1, 2, 3];\nconst secondArray = [4, 5, 6];\nfirstArray.push( ...secondArray );\nconsole.log( firstArray );<\/code><\/pre>\n<p>Als alternatief:<\/p>\n<pre><code class=\"language-jsx\">let firstArray = [1, 2, 3];\nconst secondArray = [4, 5, 6];\nfirstArray = [ ...firstArray, ...secondArray];\nconsole.log( firstArray );<\/code><\/pre>\n<p>Je kunt ook de spread syntax gebruiken om twee objecten te klonen of samen te voegen:<\/p>\n<pre><code class=\"language-jsx\">const firstObj = { id: '1', title: 'JS is awesome' };\nconst secondObj = { cat: 'React', description: 'React is easy' };\n\n\/\/ clone object\nconst thirdObj = { ...firstObj };\n\n\/\/ merge objects\nconst fourthObj = { ...firstObj, ...secondObj }\n\nconsole.log( { ...thirdObj } );\nconsole.log( { ...fourthObj } );<\/code><\/pre>\n<h2>Destructuring assignment<\/h2>\n<p>Een andere syntactische structuur die je vaak in React gebruikt zult vinden is <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Operators\/Destructuring_assignment\" target=\"_blank\" rel=\"noopener noreferrer\">de destructuring assignment<\/a> syntax.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f Met de destructuring assignment syntax kun je waarden uit een array, of eigenschappen uit een object, uitpakken in aparte variabelen.<\/strong><\/p>\n<\/aside>\n\n<p>In het volgende voorbeeld pakken we waarden uit een array uit:<\/p>\n<pre><code class=\"language-javascript\">const user = ['Carlo', 'Content writer', 'Kinsta'];\nconst [name, description, company] = user;\nconsole.log( `${name} is ${description} at ${company}` );<\/code><\/pre>\n<p>En hier is een eenvoudig voorbeeld van destructuring assignment met een object:<\/p>\n<pre><code class=\"language-javascript\">const user = {\n\tname: 'Carlo',\n\tdescription: 'Content writer',\n\tcompany: 'Kinsta'\n}\nconst { name, description, company } = user;\nconsole.log( `${name} is ${description} at ${company}` );<\/code><\/pre>\n<p>Maar we kunnen nog meer doen. In het volgende voorbeeld pakken we enkele properties van een object uit en wijzen we de resterende properties toe aan een ander object met behulp van de spread syntaxis:<\/p>\n<pre><code class=\"language-javascript\">const user = {\n\tname: 'Carlo',\n\tfamily: 'Daniele',\n\tdescription: 'Content writer',\n\tcompany: 'Kinsta',\n\tpower: 'swimming'\n}\nconst { name, description, company, ...rest } = user;\nconsole.log( rest ); \/\/ {family: 'Daniele', power: 'swimming'}<\/code><\/pre>\n<p>Je kunt ook waarden toewijzen aan een array:<\/p>\n<pre><code class=\"language-javascript\">const user = [];\nconst object = { name: 'Carlo', company: 'Kinsta' };\n( { name: user[0], company: user[1] } = object );\nconsole.log( user ); \/\/ (2) ['Carlo', 'Kinsta']<\/code><\/pre>\n<p>Let op dat de haakjes rond de assignment statement nodig zijn bij het gebruik van object-literal destructuring assignments zonder declaration.<\/p>\n<p>Voor een meer diepgaande analyse van destructuring assignment, met diverse gebruiksvoorbeelden, kun je de <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Operators\/Destructuring_assignment\" target=\"_blank\" rel=\"noopener noreferrer\">mdn web docs<\/a> raadplegen.<\/p>\n<h2>filter(), map() en reduce()<\/h2>\n<p>JavaScript biedt verschillende nuttige methoden die je vaak gebruikt in React.<\/p>\n<h3>filter()<\/h3>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f De <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Array\/filter\" target=\"_blank\" rel=\"noopener noreferrer\">methode<code>filter()<\/code><\/a> maakt een <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Glossary\/Shallow_copy\" target=\"_blank\" rel=\"noopener noreferrer\">shallow copy<\/a> van een deel van een gegeven array, gefilterd tot de elementen die voldoen aan de voorwaarde van de opgegeven functie.<\/strong><\/p>\n<\/aside>\n\n<p>In het volgende voorbeeld passen we het filter toe op de array <code>numbers<\/code> om een array te krijgen waarvan de elementen getallen groter dan 5 zijn:<\/p>\n<pre><code class=\"language-javascript\">const numbers = [2, 6, 8, 2, 5, 9, 23];\nconst result = numbers.filter( number =&gt; number &gt; 5);\nconsole.log(result); \/\/ (4) [6, 8, 9, 23]<\/code><\/pre>\n<p>In het volgende voorbeeld krijgen we een array van berichten met het woord &#8216;JavaScript&#8217; in de titel:<\/p>\n<pre><code class=\"language-javascript\">const posts = [\n\t{id: 0, title: 'JavaScript is awesome', content: 'your content'},\n\t{id: 1, title: 'WordPress is easy', content: 'your content'},\n\t{id: 2, title: 'React is cool', content: 'your content'},\n\t{id: 3, title: 'With JavaScript to the moon', content: 'your content'},\n];\n\nconst jsPosts = posts.filter( post =&gt; post.title.includes( 'JavaScript' ) );\n\nconsole.log( jsPosts );<\/code><\/pre>\n<figure id=\"attachment_152106\" aria-describedby=\"caption-attachment-152106\" style=\"width: 1198px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-152106 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/filter.jpg\" alt=\"Een array van berichten waarin de titel 'JavaScript' bevat\" width=\"1198\" height=\"346\"><figcaption id=\"caption-attachment-152106\" class=\"wp-caption-text\">Een array van berichten waarin de titel &#8216;JavaScript&#8217; bevat<\/figcaption><\/figure>\n<h3>map()<\/h3>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f De <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Array\/map\" target=\"_blank\" rel=\"noopener noreferrer\">methode<code>map()<\/code><\/a> voert een opgegeven functie uit op elk element van een array en geeft een nieuwe array terug, gevuld met elk element dat het resultaat is van de callback-functie.<\/strong><\/p>\n<\/aside>\n\n<pre><code class=\"language-javascript\">const numbers = [2, 6, 8, 2, 5, 9, 23];\nconst result = numbers.map( number =&gt; number * 5 );\nconsole.log(result); \/\/ (7) [10, 30, 40, 10, 25, 45, 115]<\/code><\/pre>\n<p>In een React component vind je de methode <code>map()<\/code> vaak gebruikt om lijsten op te bouwen. In het volgende voorbeeld mappen we het WordPress <code>posts<\/code> object om <a href=\"https:\/\/kinsta.com\/nl\/blog\/dynamische-blokken\/\">een lijst van berichten op<\/a> te bouwen:<\/p>\n<pre><code class=\"language-javascript\">&lt;ul&gt;\n\t{ posts && posts.map( ( post ) =&gt; {\n\t\treturn (\n\t\t\t&lt;li key={ post.id }&gt;\n\t\t\t\t&lt;h5&gt;\n\t\t\t\t\t&lt;a href={ post.link }&gt;\n\t\t\t\t\t\t{ \n\t\t\t\t\t\t\tpost.title.rendered ? \n\t\t\t\t\t\t\tpost.title.rendered :\n\t\t\t\t\t\t\t__( 'Default title', 'author-plugin' )\n\t\t\t\t\t\t}\n\t\t\t\t\t&lt;\/a&gt;\n\t\t\t\t&lt;\/h5&gt;\n\t\t\t&lt;\/li&gt;\n\t\t)\n\t})}\n&lt;\/ul&gt;<\/code><\/pre>\n<h3>reduce()<\/h3>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f De <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Array\/reduce\" target=\"_blank\" rel=\"noopener noreferrer\">methode<code>reduce()<\/code><\/a> voert een callback-functie (<em>reducer<\/em>) uit op elk element van een array en geeft de geretourneerde waarde door aan de volgende iteratie. Kortom, de reducer &#8220;reduceert&#8221; alle elementen van een array tot een enkele waarde.<\/strong><\/p>\n<\/aside>\n\n<p><code>reduce()<\/code> accepteert twee parameters:<\/p>\n<ul>\n<li>Een callbackfunctie om uit te voeren voor elk element in de array. Deze geeft een waarde terug die bij de volgende call de waarde wordt van de accumulator-parameter. Bij de laatste call geeft de functie de waarde terug die de retourwaarde wordt van <code>reduce()<\/code>.<\/li>\n<li>Een beginwaarde die de eerste waarde is van de accumulator die aan de terugroepfunctie wordt doorgegeven.<\/li>\n<\/ul>\n<p>De callback funtie gebruikt een paar parameters:<\/p>\n<ul>\n<li>Een <strong>accumulator<\/strong>: De waarde die bij de vorige call van de callback functie is teruggekomen. Bij de eerste call wordt deze ingesteld op een beginwaarde, indien gespecificeerd. Anders neemt het de waarde van het eerste element van de array.<\/li>\n<li>De waarde van het <strong>current element<\/strong>: De waarde wordt ingesteld op het eerste element van de array (<code>array[0]<\/code>) als een beginwaarde is ingesteld, anders neemt het de waarde van het tweede element (<code>array[1]<\/code>).<\/li>\n<li>De <strong>current index<\/strong> is de indexpositie van het huidige element.<\/li>\n<\/ul>\n<p>Een voorbeeld zal alles duidelijker maken.<\/p>\n<pre><code class=\"language-javascript\">const numbers = [1, 2, 3, 4, 5];\nconst initialValue = 0;\nconst sumElements = numbers.reduce(\n\t( accumulator, currentValue ) =&gt; accumulator + currentValue,\n\tinitialValue\n);\nconsole.log( numbers ); \/\/ (5) [1, 2, 3, 4, 5]\nconsole.log( sumElements ); \/\/ 15<\/code><\/pre>\n<p>Laten we in detail uitzoeken wat er bij elke iteratie gebeurt. Ga terug naar het vorige voorbeeld en verander de <code>initialValue<\/code>:<\/p>\n<pre><code class=\"language-javascript\">const numbers = [1, 2, 3, 4, 5];\nconst initialValue = 5;\nconst sumElements = numbers.reduce(\n\t( accumulator, currentValue, index ) =&gt; {\n\t\tconsole.log('Accumulator: ' + accumulator + ' - currentValue: ' + currentValue + ' - index: ' + index);\n\t\treturn accumulator + currentValue;\n\t},\n\tinitialValue\n);\nconsole.log( sumElements );<\/code><\/pre>\n<p>De volgende afbeelding toont de output in de browserconsole:<\/p>\n<figure id=\"attachment_152231\" aria-describedby=\"caption-attachment-152231\" style=\"width: 1172px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-152231 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/reduce-with-initial-value.jpg\" alt=\"using reduce() with initial value set to 5\" width=\"1172\" height=\"388\"><figcaption id=\"caption-attachment-152231\" class=\"wp-caption-text\">reduce() gebruiken met initi\u00eble waarde ingesteld op 5<\/figcaption><\/figure>\n<p>Laten we nu eens kijken wat er gebeurt zonder de parameter <code>initialValue<\/code>:<\/p>\n<pre><code class=\"language-javascript\">const numbers = [1, 2, 3, 4, 5];\nconst sumElements = numbers.reduce(\n\t( accumulator, currentValue, index ) =&gt; {\n\t\tconsole.log( 'Accumulator: ' + accumulator + ' - currentValue: ' + currentValue + ' - index: ' + index );\n\t\treturn accumulator + currentValue;\n\t}\n);\nconsole.log( sumElements );<\/code><\/pre>\n<figure id=\"attachment_152232\" aria-describedby=\"caption-attachment-152232\" style=\"width: 1176px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-152232\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/reduce-without-initial-value.jpg\" alt=\"Using reduce() without initial value\" width=\"1176\" height=\"360\"><figcaption id=\"caption-attachment-152232\" class=\"wp-caption-text\">Reductie() gebruiken zonder beginwaarde<\/figcaption><\/figure>\n<p>Meer voorbeelden en use cases worden besproken op de <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Array\/reduce\" target=\"_blank\" rel=\"noopener noreferrer\">mdn web docs<\/a> website.<\/p>\n<h2>Exporteren en importeren<\/h2>\n<p>Vanaf ECMAScript 2015 (ES6) is het mogelijk om waarden uit een JavaScript module te exporteren en te importeren in een ander script. Je zult imports en exports veelvuldig gebruiken in je React applicaties en daarom is het belangrijk om goed te begrijpen hoe ze werken.<\/p>\n<p>De volgende code maakt een functionele component. De eerste regel importeert de React bibliotheek:<\/p>\n<pre><code class=\"language-javascript\">import React from 'react';\n\nfunction MyComponent() {\n\tconst person = {\n\t\tname: 'Carlo',\n\t\tavatar: 'https:\/\/en.gravatar.com\/userimage\/954861\/fc68a728946aac04f8531c3a8742ac22?size=original',\n\t\tdescription: 'Content Writer',\n\t\ttheme: 'dark'\n\t}\n \n\treturn (\n\t\t&lt;div\n\t\t\tclassName = 'card'\n\t\t\tstyle = {\n\t\t\t\tperson.theme === 'dark' ?\n\t\t\t\t{ background: 'black', color: 'white' } :\n\t\t\t\t{ background: 'white', color: 'black'}\n\t\t\t}&gt;\n\t\t\t&lt;img\n\t\t\t\tsrc = { person.avatar }\n\t\t\t\talt = { person.name }\n\t\t\t\tstyle = { { width: '100%' } }\n\t\t\t\/&gt;\n\t\t\t&lt;div\n\t\t\t\tstyle = { { padding: '2px 16px' } }\n\t\t\t&gt;\n\t\t\t\t&lt;h3&gt;{ person.name }&lt;\/h3&gt;\n\t\t\t\t&lt;p&gt;{ person.description }.&lt;\/p&gt;\n\t\t\t&lt;\/div&gt;\n\t\t&lt;\/div&gt;\n\t);\n}\nexport default MyComponent;<\/code><\/pre>\n<p>We hebben het keyword <code>import<\/code> gebruikt, gevolgd door de naam die we willen toekennen aan wat we importeren, gevolgd door de naam van het pakket dat we willen installeren zoals het wordt genoemd in het <strong>package.json<\/strong> bestand.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f <code>import<\/code> declarations worden gebruikt om <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Statements\/import\" target=\"_blank\" rel=\"noopener noreferrer\">read-only live bindings te importeren<\/a> die door andere modules worden ge\u00ebxporteerd.<\/strong><\/p>\n<\/aside>\n\n<p>Let op dat we in de bovenstaande <code>MyComponent()<\/code> functie enkele van de in de vorige secties besproken JavaScript properties hebben gebruikt. We hebben waarden van properties opgenomen tussen accolades en de waarde van de <code>style<\/code> property toegekend met de syntax van de conditional operator.<\/p>\n<p>Het script eindigt met het exporteren van onze custom component.<\/p>\n<p>Nu we wat meer weten over importeren en exporteren, laten we eens beter bekijken hoe ze werken.<\/p>\n<h3>Export<\/h3>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f De <code>export<\/code> statement wordt gebruikt om waarden van een JavaScript module te exporteren.<\/strong><\/p>\n<\/aside>\n\n<p>Elke React module kan <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Statements\/export#description\" target=\"_blank\" rel=\"noopener noreferrer\">twee verschillende soorten export<\/a> hebben: <strong>named export<\/strong> en <strong>default export<\/strong>.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f Je kunt meerdere named exports per module hebben, maar slechts \u00e9\u00e9n default export.<\/strong><\/p>\n<\/aside>\n\n<p>Je kunt bijvoorbeeld meerdere functies tegelijk exporteren met een enkel <code>export<\/code> statement:<\/p>\n<pre><code class=\"language-javascript\">export { MyComponent, MyVariable };<\/code><\/pre>\n<p>Je kunt ook individuele functies exporteren (<code>function<\/code>, <code>class<\/code>, <code>const<\/code>, <code>let<\/code>):<\/p>\n<pre><code class=\"language-javascript\">export function MyComponent() { ... };\nexport let myVariable = x + y;<\/code><\/pre>\n<p>Maar je kunt maar \u00e9\u00e9n standaard export hebben:<\/p>\n<pre><code class=\"language-javascript\">export default MyComponent;<\/code><\/pre>\n<p>Je kunt ook standaardexport gebruiken voor afzonderlijke functies:<\/p>\n<pre><code class=\"language-javascript\">export default function() { ... }\nexport default class { ... }<\/code><\/pre>\n<h3>Import<\/h3>\n<p>Als de component eenmaal ge\u00ebxporteerd is, kan hij samen met andere modules ge\u00efmporteerd worden in een ander bestand, bijvoorbeeld een <strong>index.js<\/strong> bestand:<\/p>\n<pre><code class=\"language-javascript\">import React from 'react';\nimport ReactDOM from 'react-dom\/client';\nimport '.\/index.css';\nimport MyComponent from '.\/MyComponent';\n\nconst root = ReactDOM.createRoot( document.getElementById( 'root' ) );\nroot.render(\n\t&lt;React.StrictMode&gt;\n\t\t&lt;MyComponent \/&gt;\n\t&lt;\/React.StrictMode&gt;\n);<\/code><\/pre>\n<p>In bovenstaande code hebben we de importstatement op verschillende manieren gebruikt.<\/p>\n<p>In de eerste twee regels hebben we een naam toegekend aan de ge\u00efmporteerde bronnen, in de derde regel hebben we geen naam toegekend, maar simpelweg het <strong>.\/index.css<\/strong> bestand ge\u00efmporteerd. Het laatste <code>import<\/code> statement importeert het <strong>.\/MyComponent<\/strong> bestand en kent een naam toe.<\/p>\n<p>Laten we eens kijken wat de verschillen zijn tussen deze imports.<\/p>\n<p>In totaal zijn er vier soorten imports:<\/p>\n<p><strong>Named import<\/strong><\/p>\n<pre><code class=\"language-javascript\">import { MyFunction, MyVariable } from \".\/my-module\";<\/code><\/pre>\n<p><strong>Standaard import<\/strong><\/p>\n<pre><code class=\"language-javascript\">import MyComponent from \".\/MyComponent\";<\/code><\/pre>\n<p><strong>Namespace import<\/strong><\/p>\n<pre><code class=\"language-javascript\">import * as name from \"my-module\";<\/code><\/pre>\n<p><strong>Side effect import<\/strong><\/p>\n<pre><code class=\"language-javascript\">import \"module-name\";<\/code><\/pre>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f Een <code>import<\/code> statement zonder accolades wordt gebruikt om de standaard <code>export<\/code> te importeren. Een <code>import<\/code> statement met accolades wordt gebruikt om een named <code>export<\/code> te importeren.<\/strong><\/p>\n<\/aside>\n\n<p>Als je een paar stijlen hebt toegevoegd in je <strong>index.css<\/strong>, zou je kaart eruit moeten zien als in de afbeelding hieronder, waar je ook de bijbehorende HTML code kunt zien:<\/p>\n<figure id=\"attachment_152317\" aria-describedby=\"caption-attachment-152317\" style=\"width: 1806px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-152317\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/react-card.jpg\" alt=\"A simple React component\" width=\"1806\" height=\"678\"><figcaption id=\"caption-attachment-152317\" class=\"wp-caption-text\">Een eenvoudig React component<\/figcaption><\/figure>\n<p>Let op dat <code>import<\/code> declarations alleen kunnen worden gebruikt in modules op het hoogste niveau (niet binnen functies, klassen, enz.).<\/p>\n<p>Voor een uitgebreider overzicht van <code>import<\/code> en <code>export<\/code> statements kun je misschien ook de volgende bronnen bekijken:<\/p>\n<ul>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Statements\/export\" target=\"_blank\" rel=\"noopener noreferrer\">export<\/a> (mdn web docs)<\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Statements\/import\" target=\"_blank\" rel=\"noopener noreferrer\">importeren<\/a> (mdn web docs)<\/li>\n<li><a href=\"https:\/\/react.dev\/learn\/importing-and-exporting-components\" target=\"_blank\" rel=\"noopener noreferrer\">Componenten importeren en exporteren<\/a> (React dev)<\/li>\n<li><a href=\"https:\/\/stackoverflow.com\/questions\/36795819\/when-should-i-use-curly-braces-for-es6-import\/36796281\" target=\"_blank\" rel=\"noopener noreferrer\">Wanneer moet ik accolades gebruiken voor ES6 import?<\/a> (Stack Overflow)<\/li>\n<\/ul>\n\n<h2>Samenvatting<\/h2>\n<p>React is een van de <a href=\"https:\/\/kinsta.com\/nl\/blog\/javascript-bibliotheken\/#reactjs\">populairste JavaScript bibliotheken<\/a> van dit moment en is een van de meest <a href=\"https:\/\/kinsta.com\/nl\/blog\/salaris-van-webdevelopers\/\">gevraagde vaardigheden in de wereld van webdevelopment<\/a>.<\/p>\n<p>Met React is het mogelijk om dynamische webapplicaties en geavanceerde interfaces te maken. Het maken van grote, dynamische en interactieve applicaties kan eenvoudig zijn dankzij de herbruikbare componenten.<\/p>\n<p>Maar React is nog altijd een bibliotheek voor JavaScript en een goed begrip van de belangrijkste functies van JavaScript is essentieel om je reis met React te beginnen. Daarom hebben we op \u00e9\u00e9n plaats enkele van de JavaScript functies verzameld die je het meest gebruikt in React. Het beheersen van deze functies geeft je een voorsprong op je <a href=\"https:\/\/kinsta.com\/nl\/blog\/beste-react-tutorials\/\">React leerreis<\/a>.<\/p>\n<p>En als het gaat om <a href=\"https:\/\/kinsta.com\/nl\/blog\/soorten-developers\/\">webdevelopment<\/a> kost de overstap van JS\/React naar WordPress weinig moeite.<\/p>\n<p>Nu is het jouw beurt, welke JavaScript functies zijn volgens jou het nuttigst bij React ontwikkeling? Hebben we iets belangrijks gemist dat je graag op onze lijst had gezien? Deel je gedachten met ons in de comments hieronder.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>React is vandaag de dag een van de populairste JavaScript bibliotheken ter wereld. Het kan worden gebruikt om dynamische en responsieve applicaties te maken, maakt betere &#8230;<\/p>\n","protected":false},"author":36,"featured_media":52957,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[431,413,760],"topic":[848,871,883],"class_list":["post-52956","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-javascript","tag-javascript-libraries","tag-react","topic-javascript-tutorials","topic-react","topic-webdevelopment-talen"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>JavaScript features die je moet kennen als je React wil beheersen - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Haal alles uit dynamische app-ontwikkeling met React! Ontdek de belangrijkste JavaScript features die je moet kennen om direct aan de slag te kunnen.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/nl\/blog\/javascript-react\/\" \/>\n<meta property=\"og:locale\" content=\"nl_NL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JavaScript features die je moet kennen als je React wil beheersen\" \/>\n<meta property=\"og:description\" content=\"Haal alles uit dynamische app-ontwikkeling met React! Ontdek de belangrijkste JavaScript features die je moet kennen om direct aan de slag te kunnen.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/nl\/blog\/javascript-react\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-06-01T09:02:56+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-11T07:01:53+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/06\/javascript-and-react-01.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"3042\" \/>\n\t<meta property=\"og:image:height\" content=\"1521\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Carlo Daniele\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Haal alles uit dynamische app-ontwikkeling met React! Ontdek de belangrijkste JavaScript features die je moet kennen om direct aan de slag te kunnen.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/06\/javascript-and-react-01.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@carlodaniele\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_NL\" \/>\n<meta name=\"twitter:label1\" content=\"Geschreven door\" \/>\n\t<meta name=\"twitter:data1\" content=\"Carlo Daniele\" \/>\n\t<meta name=\"twitter:label2\" content=\"Geschatte leestijd\" \/>\n\t<meta name=\"twitter:data2\" content=\"35 minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/javascript-react\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/javascript-react\/\"},\"author\":{\"name\":\"Carlo Daniele\",\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63\"},\"headline\":\"JavaScript features die je moet kennen als je React wil beheersen\",\"datePublished\":\"2023-06-01T09:02:56+00:00\",\"dateModified\":\"2023-08-11T07:01:53+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/javascript-react\/\"},\"wordCount\":5241,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/javascript-react\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/06\/javascript-and-react-01.jpg\",\"keywords\":[\"JavaScript\",\"JavaScript Libraries\",\"React\"],\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/nl\/blog\/javascript-react\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/javascript-react\/\",\"url\":\"https:\/\/kinsta.com\/nl\/blog\/javascript-react\/\",\"name\":\"JavaScript features die je moet kennen als je React wil beheersen - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/javascript-react\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/javascript-react\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/06\/javascript-and-react-01.jpg\",\"datePublished\":\"2023-06-01T09:02:56+00:00\",\"dateModified\":\"2023-08-11T07:01:53+00:00\",\"description\":\"Haal alles uit dynamische app-ontwikkeling met React! Ontdek de belangrijkste JavaScript features die je moet kennen om direct aan de slag te kunnen.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/javascript-react\/#breadcrumb\"},\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/nl\/blog\/javascript-react\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/javascript-react\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/06\/javascript-and-react-01.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/06\/javascript-and-react-01.jpg\",\"width\":3042,\"height\":1521},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/javascript-react\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/nl\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript tutorials\",\"item\":\"https:\/\/kinsta.com\/nl\/onderwerpen\/javascript-tutorials\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"JavaScript features die je moet kennen als je React wil beheersen\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/nl\/#website\",\"url\":\"https:\/\/kinsta.com\/nl\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Snelle, veilige, premium hostingoplossingen\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/nl\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"nl-NL\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/nl\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/nl\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/\",\"https:\/\/x.com\/Kinsta_NL\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63\",\"name\":\"Carlo Daniele\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g\",\"caption\":\"Carlo Daniele\"},\"description\":\"Carlo is a passionate lover of webdesign and front-end development. He has been playing with WordPress for more than 20 years, also in collaboration with Italian and European universities and educational institutions. He has written hundreds of articles and guides about WordPress, published both on Italian and international websites, as well as on printed magazines. You can find him on LinkedIn.\",\"sameAs\":[\"https:\/\/frammentidicodice.com\/\",\"https:\/\/x.com\/carlodaniele\"],\"url\":\"https:\/\/kinsta.com\/nl\/blog\/author\/carlodaniele\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"JavaScript features die je moet kennen als je React wil beheersen - Kinsta\u00ae","description":"Haal alles uit dynamische app-ontwikkeling met React! Ontdek de belangrijkste JavaScript features die je moet kennen om direct aan de slag te kunnen.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/nl\/blog\/javascript-react\/","og_locale":"nl_NL","og_type":"article","og_title":"JavaScript features die je moet kennen als je React wil beheersen","og_description":"Haal alles uit dynamische app-ontwikkeling met React! Ontdek de belangrijkste JavaScript features die je moet kennen om direct aan de slag te kunnen.","og_url":"https:\/\/kinsta.com\/nl\/blog\/javascript-react\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/","article_published_time":"2023-06-01T09:02:56+00:00","article_modified_time":"2023-08-11T07:01:53+00:00","og_image":[{"width":3042,"height":1521,"url":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/06\/javascript-and-react-01.jpg","type":"image\/jpeg"}],"author":"Carlo Daniele","twitter_card":"summary_large_image","twitter_description":"Haal alles uit dynamische app-ontwikkeling met React! Ontdek de belangrijkste JavaScript features die je moet kennen om direct aan de slag te kunnen.","twitter_image":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/06\/javascript-and-react-01.jpg","twitter_creator":"@carlodaniele","twitter_site":"@Kinsta_NL","twitter_misc":{"Geschreven door":"Carlo Daniele","Geschatte leestijd":"35 minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/nl\/blog\/javascript-react\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/nl\/blog\/javascript-react\/"},"author":{"name":"Carlo Daniele","@id":"https:\/\/kinsta.com\/nl\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63"},"headline":"JavaScript features die je moet kennen als je React wil beheersen","datePublished":"2023-06-01T09:02:56+00:00","dateModified":"2023-08-11T07:01:53+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/nl\/blog\/javascript-react\/"},"wordCount":5241,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/nl\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/nl\/blog\/javascript-react\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/06\/javascript-and-react-01.jpg","keywords":["JavaScript","JavaScript Libraries","React"],"inLanguage":"nl-NL","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/nl\/blog\/javascript-react\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/nl\/blog\/javascript-react\/","url":"https:\/\/kinsta.com\/nl\/blog\/javascript-react\/","name":"JavaScript features die je moet kennen als je React wil beheersen - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/nl\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/nl\/blog\/javascript-react\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/nl\/blog\/javascript-react\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/06\/javascript-and-react-01.jpg","datePublished":"2023-06-01T09:02:56+00:00","dateModified":"2023-08-11T07:01:53+00:00","description":"Haal alles uit dynamische app-ontwikkeling met React! Ontdek de belangrijkste JavaScript features die je moet kennen om direct aan de slag te kunnen.","breadcrumb":{"@id":"https:\/\/kinsta.com\/nl\/blog\/javascript-react\/#breadcrumb"},"inLanguage":"nl-NL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/nl\/blog\/javascript-react\/"]}]},{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/kinsta.com\/nl\/blog\/javascript-react\/#primaryimage","url":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/06\/javascript-and-react-01.jpg","contentUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/06\/javascript-and-react-01.jpg","width":3042,"height":1521},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/nl\/blog\/javascript-react\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/nl\/"},{"@type":"ListItem","position":2,"name":"JavaScript tutorials","item":"https:\/\/kinsta.com\/nl\/onderwerpen\/javascript-tutorials\/"},{"@type":"ListItem","position":3,"name":"JavaScript features die je moet kennen als je React wil beheersen"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/nl\/#website","url":"https:\/\/kinsta.com\/nl\/","name":"Kinsta\u00ae","description":"Snelle, veilige, premium hostingoplossingen","publisher":{"@id":"https:\/\/kinsta.com\/nl\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/nl\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"nl-NL"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/nl\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/nl\/","logo":{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/kinsta.com\/nl\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/nl\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/","https:\/\/x.com\/Kinsta_NL","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/nl\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63","name":"Carlo Daniele","image":{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/kinsta.com\/nl\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g","caption":"Carlo Daniele"},"description":"Carlo is a passionate lover of webdesign and front-end development. He has been playing with WordPress for more than 20 years, also in collaboration with Italian and European universities and educational institutions. He has written hundreds of articles and guides about WordPress, published both on Italian and international websites, as well as on printed magazines. You can find him on LinkedIn.","sameAs":["https:\/\/frammentidicodice.com\/","https:\/\/x.com\/carlodaniele"],"url":"https:\/\/kinsta.com\/nl\/blog\/author\/carlodaniele\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts\/52956","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/users\/36"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/comments?post=52956"}],"version-history":[{"count":9,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts\/52956\/revisions"}],"predecessor-version":[{"id":54878,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts\/52956\/revisions\/54878"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/52956\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/52956\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/52956\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/52956\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/52956\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/52956\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/52956\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/52956\/translations\/es"},{"embeddable":true,"hreflang":"sv","title":"Swedish","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/52956\/translations\/se"},{"embeddable":true,"hreflang":"da","title":"Danish","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/52956\/translations\/dk"},{"href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/52956\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/media\/52957"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/media?parent=52956"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/tags?post=52956"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/topic?post=52956"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}