{"id":51021,"date":"2023-06-01T10:01:11","date_gmt":"2023-06-01T09:01:11","guid":{"rendered":"https:\/\/kinsta.com\/dk\/?p=51021&#038;preview=true&#038;preview_id=51021"},"modified":"2023-08-24T10:13:49","modified_gmt":"2023-08-24T09:13:49","slug":"javascript-react","status":"publish","type":"post","link":"https:\/\/kinsta.com\/dk\/blog\/javascript-react\/","title":{"rendered":"JavaScript-funktioner, du skal kende for at mestre React"},"content":{"rendered":"<p>I dag er <a href=\"https:\/\/kinsta.com\/dk\/emner\/react\/\">React<\/a> et af de mest popul\u00e6re <a href=\"https:\/\/kinsta.com\/dk\/blog\/javascript-biblioteker\/\">JavaScript-biblioteker<\/a>. Det kan bruges til at skabe dynamiske og responsive applikationer, giver bedre ydeevne og kan nemt udvides. Den underliggende logik er baseret p\u00e5 komponenter, der kan genbruges i forskellige sammenh\u00e6nge, hvilket reducerer behovet for at skrive den samme kode flere gange. Kort sagt, med React kan du skabe <a href=\"https:\/\/kinsta.com\/dk\/emner\/react\/\">effektive og kraftfulde applikationer<\/a>.<\/p>\n<p>S\u00e5 der har aldrig v\u00e6ret et bedre tidspunkt at l\u00e6re at skabe React-applikationer.<\/p>\n<p>Men uden en solid forst\u00e5else af nogle centrale <a href=\"https:\/\/kinsta.com\/javascript\/\">JavaScript-funktioner<\/a>, kan det v\u00e6re sv\u00e6rt eller endda umuligt at bygge React-applikationer.<\/p>\n<p>Derfor har vi samlet en liste over JavaScript-funktioner og -koncepter, som du skal kende, f\u00f8r du kommer i gang med React. Jo bedre du forst\u00e5r disse begreber, jo lettere bliver det for dig at bygge professionelle React-applikationer.<\/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 og ECMAScript<\/h2>\n<p><a href=\"https:\/\/kinsta.com\/blog\/what-is-javascript\/\">JavaScript<\/a> er et popul\u00e6rt scripting-sprog, der bruges sammen med <a href=\"https:\/\/kinsta.com\/blog\/what-is-html\/\">HTML<\/a> og CSS til at bygge dynamiske websider. Mens HTML bruges til at skabe strukturen p\u00e5 en webside og CSS til at skabe stilen og layoutet p\u00e5 dens elementer, er JavaScript det sprog, der bruges til at tilf\u00f8je adf\u00e6rd til siden, dvs. til at skabe funktionalitet og interaktivitet.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f JavaScript blev udviklet af Brendan Eich fra Netscape Communications i 1995 med det form\u00e5l at tilf\u00f8je interaktivitet til websider i Netscape Navigator-browseren.<\/strong><\/p>\n<\/aside>\n\n<p>Sproget er siden blevet adopteret af de store browsere, og der blev skrevet et dokument for at beskrive den m\u00e5de, JavaScript skulle fungere p\u00e5: <a href=\"https:\/\/en.wikipedia.org\/wiki\/ECMAScript\" target=\"_blank\" rel=\"noopener noreferrer\">ECMAScript-standarden<\/a>.<\/p>\n<p>Fra og med 2015 udgives der hvert \u00e5r en opdatering af ECMAScript-standarden, og dermed tilf\u00f8jes der nye funktioner til JavaScript hvert \u00e5r.<\/p>\n<p><a href=\"https:\/\/262.ecma-international.org\/6.0\/\" target=\"_blank\" rel=\"noopener noreferrer\">ECMAScript 2015<\/a> var den sjette udgave af standarden og er derfor ogs\u00e5 kendt som <strong>ES6<\/strong>. De efterf\u00f8lgende versioner er markeret med progression, s\u00e5 vi kalder ECMAScript 2016 for ES7, ECMAScript 2017 for ES8 og s\u00e5 videre.<\/p>\n<p>P\u00e5 grund af den hyppighed, hvormed der tilf\u00f8jes nye funktioner til standarden, er det ikke sikkert, at alle browsere underst\u00f8tter nogle af dem. S\u00e5 hvordan kan du sikre dig, at de nyeste JavaScript-funktioner, du har tilf\u00f8jet til din JS-app, fungerer som forventet p\u00e5 tv\u00e6rs af alle webbrowsere?<\/p>\n<p>Du har tre muligheder:<\/p>\n<ol>\n<li>Vent, indtil alle st\u00f8rre browsere underst\u00f8tter de nye funktioner. Men hvis du absolut har brug for den fantastiske nye JS-funktion til din app, er dette ikke en mulighed.<\/li>\n<li>Brug en Polyfill, som er &#8220;et stykke kode (normalt JavaScript p\u00e5 nettet), der bruges til at give moderne funktionalitet i \u00e6ldre browsere, der ikke underst\u00f8tter det fra starten&#8221; (se ogs\u00e5 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Glossary\/Polyfill\" target=\"_blank\" rel=\"noopener noreferrer\">mdn web docs<\/a>).<\/li>\n<li>Brug en JavaScript-transpiler som <a href=\"https:\/\/babeljs.io\/docs\/\" target=\"_blank\" rel=\"noopener noreferrer\">Babel<\/a> eller <a href=\"https:\/\/github.com\/google\/traceur-compiler\" target=\"_blank\" rel=\"noopener noreferrer\">Traceur<\/a>, der konverterer ECMAScript 2015+-kode til en JavaScript-version, der underst\u00f8ttes af alle browsere.<\/li>\n<\/ol>\n\n<h2>Udsagn vs. udtryk<\/h2>\n<p>Det er vigtigt at forst\u00e5 forskellen mellem statements og expressions, n\u00e5r man bygger React-applikationer. S\u00e5 lad os g\u00e5 tilbage til de grundl\u00e6ggende begreber inden for programmering et \u00f8jeblik.<\/p>\n<p>Et computerprogram er en liste over instruktioner, der skal udf\u00f8res af en computer. Disse instruktioner kaldes <strong>statements<\/strong>.<\/p>\n<p>I mods\u00e6tning til statements er <strong>expression<\/strong> fragmenter af kode, der producerer en v\u00e6rdi. I et statement er en expression en del, der returnerer en v\u00e6rdi, og vi ser det normalt p\u00e5 h\u00f8jre side af et lighedstegn.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f Et statement er en blok af kode, der g\u00f8r noget.<\/strong><\/p>\n<\/aside>\n\n<p>Hvorimod:<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f En expression er et stykke kode, der producerer en v\u00e6rdi.<\/strong><\/p>\n<\/aside>\n\n<p>JavaScript-s\u00e6tninger kan v\u00e6re blokke eller linjer af kode, der normalt slutter med semikolon eller er omsluttet af kr\u00f8llede parenteser.<\/p>\n<p>Her er et simpelt eksempel p\u00e5 et statement i JavaScript:<\/p>\n<pre><code class=\"language-js\">document.getElementById(\"hello\").innerHTML = \"Hello World!\";<\/code><\/pre>\n<p>S\u00e6tningen ovenfor skriver <code>\"Hello World!\"<\/code> i et DOM-element med <code>id=\"hello\"<\/code>.<\/p>\n<p>Som vi allerede har n\u00e6vnt, producerer expessions en v\u00e6rdi eller er selv en v\u00e6rdi. Overvej f\u00f8lgende eksempel:<\/p>\n<pre><code class=\"language-js\">msg = document.getElementById(\"hello\").value;<\/code><\/pre>\n<p><code>document.getElementById(\"hello\").value<\/code> er en expression, da det returnerer en v\u00e6rdi.<\/p>\n<p>Et ekstra eksempel kan hj\u00e6lpe med at tydeligg\u00f8re forskellen mellem expression og statement:<\/p>\n<pre><code class=\"language-js\">const msg = \"Hello World!\";\nfunction sayHello( msg ) {\n\tconsole.log( msg );\n}<\/code><\/pre>\n<p>I eksemplet ovenfor,<\/p>\n<ul>\n<li>er den f\u00f8rste linje en erkl\u00e6ring, hvor <code>\"Hello World!\"<\/code> er en expression,<\/li>\n<li>funktionsdeklarationen er et statement, hvor parameteren <code>msg<\/code>, der sendes til funktionen, er en expression,<\/li>\n<li>linjen, der udskriver beskeden i konsollen, er en erkl\u00e6ring, hvor parameteren <code>msg<\/code> igen er en expression.<\/li>\n<\/ul>\n<h3>Hvorfor expression er vigtige i React<\/h3>\n<p>N\u00e5r du <a href=\"https:\/\/kinsta.com\/dk\/blog\/react-bedste-praksisser\/\">bygger en React-applikation<\/a>, kan du <a href=\"https:\/\/react.dev\/learn\/javascript-in-jsx-with-curly-braces\" target=\"_blank\" rel=\"noopener noreferrer\">injicere JavaScript-udtryk i din JSX-kode<\/a>. Du kan f.eks. videregive en variabel, skrive en event handler eller en betingelse. For at g\u00f8re dette skal du inkludere din JS-kode i kr\u00f8llede parenteser.<\/p>\n<p>Du kan f.eks. videregive en variabel:<\/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>Kort sagt fort\u00e6ller de kr\u00f8llede parenteser din transpiler, at den skal behandle koden i parenteserne som JS-kode. Alt, hvad der kommer f\u00f8r det \u00e5bnende <code>&lt;p&gt;<\/code> -tag og efter det afsluttende <code>&lt;\/p&gt;<\/code> -tag, er normal JavaScript-kode. Alt inden for de \u00e5bne <code>&lt;p&gt;<\/code> og de afsluttende <code>&lt;\/p&gt;<\/code> tags behandles som JSX-kode.<\/p>\n<p>Her er et andet eksempel:<\/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>Du kan ogs\u00e5 sende et objekt:<\/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>Og nedenfor er et mere omfattende eksempel:<\/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>L\u00e6g m\u00e6rke til de dobbelte kr\u00f8llede parenteser i <code>style<\/code> -attributterne i elementerne <code>img<\/code> og <code>div<\/code>. Vi brugte dobbelte parenteser til at videregive to objekter, der indeholder kort- og billedestile.<\/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=\"Et eksempel p\u00e5 et kort bygget med React\" width=\"1360\" height=\"694\"><figcaption id=\"caption-attachment-152320\" class=\"wp-caption-text\">Et eksempel p\u00e5 et kort bygget med React<\/figcaption><\/figure>\n<p>Du burde have bem\u00e6rket, at vi i alle eksemplerne ovenfor har inkluderet JavaScript-espression i <a href=\"https:\/\/kinsta.com\/blog\/what-is-jsx\/\">JSX<\/a>.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f JSX accepterer kun JavaScript-udtryk i kr\u00f8llede parenteser. Du m\u00e5 ikke skrive statements i din JSX-kode.<\/strong><\/p>\n<p><strong>Det g\u00e6lder bl.a:<\/strong><\/p>\n<ul>\n<li><strong>Variabler<\/strong><\/li>\n<li><strong>Strenge med anf\u00f8rselstegn<\/strong><\/li>\n<li><strong>Funktionsopkald<\/strong><\/li>\n<li><strong>Objekter<\/strong><\/li>\n<li><strong>Betingede expressions<\/strong><\/li>\n<\/ul>\n<p><\/p>\n<\/aside>\n\n<h2>Uforanderlighed i React<\/h2>\n<p>Foranderlighed og uforanderlighed er <a href=\"https:\/\/en.wikipedia.org\/wiki\/Immutable_object\" target=\"_blank\" rel=\"noopener noreferrer\">to n\u00f8glebegreber<\/a> i objektorienteret og funktionel programmering.<\/p>\n<p>Immutability betyder, at en v\u00e6rdi ikke kan \u00e6ndres, efter at den er blevet skabt. Mutability betyder selvf\u00f8lgelig det modsatte.<\/p>\n<p>I Javascript er <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Glossary\/Primitive\" target=\"_blank\" rel=\"noopener noreferrer\">primitive v\u00e6rdier<\/a> <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Glossary\/Immutable\" target=\"_blank\" rel=\"noopener noreferrer\">uforanderlige<\/a>, hvilket betyder, at n\u00e5r en primitiv v\u00e6rdi er oprettet, kan den ikke \u00e6ndres. Omvendt er arrays og objekter mutable, fordi deres egenskaber og elementer kan \u00e6ndres uden at tildele en ny v\u00e6rdi.<\/p>\n<p>Der er flere grunde til at bruge uforanderlige objekter i JavaScript:<\/p>\n<ul>\n<li>Forbedret ydeevne<\/li>\n<li>Reduceret hukommelsesforbrug<\/li>\n<li>Tr\u00e5d-sikkerhed<\/li>\n<li>Nemmere kodning og debugging<\/li>\n<\/ul>\n<p>If\u00f8lge m\u00f8nsteret for uforanderlighed kan en variabel eller et objekt ikke tildeles igen eller \u00e6ndres, n\u00e5r det f\u00f8rst er tildelt. N\u00e5r du har brug for at \u00e6ndre data, skal du oprette en kopi af den og \u00e6ndre dens indhold, s\u00e5 det oprindelige indhold forbliver u\u00e6ndret.<\/p>\n<p><strong>Uforanderlighed<\/strong> er ogs\u00e5 et n\u00f8glebegreb i React.<\/p>\n<p>I <a href=\"https:\/\/react.dev\/reference\/react\/Component#state\" target=\"_blank\" rel=\"noopener noreferrer\">React-dokumentationen<\/a> st\u00e5r der:<\/p>\n<blockquote><p>Tilstanden af en klassekomponent er tilg\u00e6ngelig som <code>this.state<\/code>. Tilstandsfeltet skal v\u00e6re et objekt. Du m\u00e5 ikke mutere tilstanden direkte. Hvis du \u00f8nsker at \u00e6ndre tilstanden, skal du kalde <code>setState<\/code> med den nye<\/p><\/blockquote>\n<p>tilstand.<br \/>\nHver gang en komponents tilstand \u00e6ndres, beregner React, om komponenten skal gengives og den virtuelle DOM opdateres. Hvis React ikke havde styr p\u00e5 den tidligere tilstand, kunne den ikke afg\u00f8re, om komponenten skulle genskabes eller ej. React-dokumentationen giver et <a href=\"https:\/\/react.dev\/learn\/updating-objects-in-state#treat-state-as-read-only\" target=\"_blank\" rel=\"noopener noreferrer\">glimrende eksempel p\u00e5 dette<\/a>.<\/p>\n<p>Hvilke JavaScript-funktioner kan vi bruge til at garantere uforanderligheden af tilstandsobjektet i React? Lad os finde ud af det!<\/p>\n<h3>Deklarering af variabler<\/h3>\n<p>Du har tre m\u00e5der at deklarere en variabel p\u00e5 i JavaScript: <code>var<\/code>, <code>let<\/code>, og <code>const<\/code>.<\/p>\n<p><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Statements\/var#var_hoisting\">Erkl\u00e6ringen <code>var<\/code><\/a> har eksisteret siden begyndelsen af JavaScript. Den bruges til at deklarere en funktionsskoblet eller globalskoblet variabel og eventuelt initialisere den til en v\u00e6rdi.<\/p>\n<p>N\u00e5r du erkl\u00e6rer en variabel ved hj\u00e6lp af <code>var<\/code>, kan du gen-deklarere og opdatere den variabel b\u00e5de i det globale og lokale scope. F\u00f8lgende kode er tilladt:<\/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> deklarationer behandles, f\u00f8r nogen kode udf\u00f8res. Som f\u00f8lge heraf svarer det at erkl\u00e6re en variabel hvor som helst i koden til at erkl\u00e6re den \u00f8verst. Denne adf\u00e6rd kaldes <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Glossary\/Hoisting\" target=\"_blank\" rel=\"noopener noreferrer\">hoisting<\/a>.<\/p>\n<p>Det er v\u00e6rd at bem\u00e6rke, at det kun er deklarationen af variablen, der hejses, ikke initialiseringen, som f\u00f8rst sker, n\u00e5r <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Glossary\/Control_flow\" target=\"_blank\" rel=\"noopener noreferrer\">kontrolflowet<\/a> n\u00e5r tildelingsudsagnet. Indtil da er variablen <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>Omfanget af en <code>var<\/code>, der er erkl\u00e6ret i en JS-funktion, er <a href=\"https:\/\/hacks.mozilla.org\/2015\/07\/es6-in-depth-let-and-const\/\" target=\"_blank\" rel=\"noopener noreferrer\">hele funktionens body<\/a>.<\/p>\n<p>Det betyder, at variablen ikke er defineret p\u00e5 blokniveau, men p\u00e5 niveau med hele funktionen. Det f\u00f8rer til en r\u00e6kke problemer, som kan g\u00f8re din JavaScript-kode rodet og sv\u00e6r at vedligeholde.<\/p>\n<p>For at l\u00f8se disse problemer introducerede ES6 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Statements\/let\" target=\"_blank\" rel=\"noopener noreferrer\">n\u00f8gleordet<code>let<\/code><\/a>.<\/p>\n<blockquote><p>Erkl\u00e6ringen <code>let<\/code> erkl\u00e6rer en lokal variabel, der er <strong>blokopdelt<\/strong>, og initialiserer den eventuelt til en v\u00e6rdi.<\/p><\/blockquote>\n<p>Hvad er fordelene ved <code>light<\/code> i forhold til <code>var<\/code>? Her er nogle af dem:<\/p>\n<ul>\n<li><strong><code>light<\/code> <\/strong> <code>var<\/code> <strong>erkl\u00e6rer en variabel til<\/strong> <strong>omfanget af en bloks\u00e6tning<\/strong>, mens erkl\u00e6rer en variabel globalt eller lokalt til en hel funktion uanset blokomfang.<\/li>\n<li><strong>Globale <code>let<\/code> -variabler er ikke egenskaber for <code>window<\/code> -objektet<\/strong>. Du kan ikke f\u00e5 adgang til dem med <code>window.variableName<\/code>.<\/li>\n<li><strong><code>light<\/code> <\/strong> en global variabel<strong>kan kun tilg\u00e5s, n\u00e5r dens deklaration er n\u00e5et<\/strong>. Variablen initialiseres ikke, f\u00f8r kontrolflowet n\u00e5r til den kodelinje, hvor den er erkl\u00e6ret (let-erkl\u00e6ringer er <strong>ikke-hoisted<\/strong>).<\/li>\n<li><strong>Hvis du erkl\u00e6rer en variabel igen med <code>light<\/code>, f\u00e5r du en <code>SyntaxError<\/code>.<\/strong><\/li>\n<\/ul>\n<p>Da variabler, der er erkl\u00e6ret med <code>var<\/code>, ikke kan blokskoperes, kan du, hvis du definerer en variabel med <code>var<\/code> i en l\u00f8kke eller inde i en <code>if<\/code> -s\u00e6tning, f\u00e5 adgang til den uden for blokken, og det kan f\u00f8re til fejlbeh\u00e6ftet kode.<\/p>\n<p>Koden i det f\u00f8rste eksempel udf\u00f8res uden fejl. Udskift nu <code>var<\/code> med <code>light<\/code> i den kodeblok, der ses ovenfor:<\/p>\n<pre><code class=\"language-js\">console.log(msg);\nlet msg = \"Hello!\";\nconsole.log(msg);<\/code><\/pre>\n<p>I det andet eksempel giver brugen af <code>light<\/code> i stedet for <code>var<\/code> en <code>Uncaught ReferenceError<\/code>:<\/p>\n<figure id=\"attachment_151741\" aria-describedby=\"caption-attachment-151741\" style=\"width: 1176px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151741 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/uncaught-referenceerror.jpg\" alt=\"Ufanget referencefejl i Chrome\" width=\"1176\" height=\"222\"><figcaption id=\"caption-attachment-151741\" class=\"wp-caption-text\">Ufanget referencefejl i Chrome<\/figcaption><\/figure>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f Som en generel regel b\u00f8r du derfor altid bruge <code>light<\/code> i stedet for <code>var<\/code>.<\/strong><\/p>\n<\/aside>\n\n<p>ES6 introducerer ogs\u00e5 et tredje n\u00f8gleord: <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Statements\/const\"><code>const<\/code><\/a>.<\/p>\n<p><code>const<\/code> er meget lig <code>light<\/code>, men med en vigtig forskel:<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f Variabler erkl\u00e6ret med <code>const<\/code> kan ikke tildeles en v\u00e6rdi undtagen p\u00e5 det tidspunkt, hvor de er erkl\u00e6ret<\/strong>.<\/p>\n<\/aside>\n\n<p>Overvej f\u00f8lgende eksempel:<\/p>\n<pre><code class=\"language-js\">const MAX_VALUE = 1000;\nMAX_VALUE = 2000;<\/code><\/pre>\n<p>Ovenst\u00e5ende kode ville generere f\u00f8lgende <a href=\"https:\/\/kinsta.com\/blog\/errors-in-javascript\/#typeerror\">TypeError<\/a>:<\/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: Tildeling til konstant variabel i Google Chrome\" width=\"1012\" height=\"268\"><figcaption id=\"caption-attachment-151743\" class=\"wp-caption-text\"><em>Uopdaget TypeError: Tildeling til konstant variabel<\/em> i Google Chrome<\/figcaption><\/figure>\n<p>Derudover:<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f Du kan ikke deklarere en <code>const<\/code> uden at give den en v\u00e6rdi.<\/strong><\/p>\n<\/aside>\n\n<p>Hvis du erkl\u00e6rer en <code>const<\/code> uden at give den en v\u00e6rdi, vil det give f\u00f8lgende <code>SyntaxError<\/code> (se ogs\u00e5 <a href=\"https:\/\/hacks.mozilla.org\/2015\/07\/es6-in-depth-let-and-const\/\">ES6 In Depth: let og 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=\"wp-image-151746 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/uncaught-syntax-error-missing-initializer-in-const-declaration.jpg\" alt=\"Uncaught syntaksfejl: Manglende initialisering i const-deklaration i Chrome\" width=\"1200\" height=\"214\"><figcaption id=\"caption-attachment-151746\" class=\"wp-caption-text\"><em>Uncaught SyntaxError: Manglende initializer i const-erkl\u00e6ring<\/em> i Chrome<\/figcaption><\/figure>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f En konstant kan ikke redeklareres, og dens v\u00e6rdi kan ikke \u00e6ndres gennem reassignment.<\/strong><\/p>\n<\/aside>\n\n<p>Men hvis en konstant er et array eller et objekt, kan du redigere egenskaber eller elementer i dette array eller objekt.<\/p>\n<p>Du kan f.eks. \u00e6ndre, tilf\u00f8je og fjerne array-elementer:<\/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>Men du m\u00e5 ikke tildele arrayet p\u00e5 ny:<\/p>\n<pre><code class=\"language-js\">const cities = [\"London\", \"New York\", \"Sydney\"];\n\ncities = [\"Athens\", \"Barcelona\", \"Naples\"];<\/code><\/pre>\n<p>Koden ovenfor ville resultere i en <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/TypeError\" target=\"_blank\" rel=\"noopener noreferrer\">TypeError<\/a>.<\/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: Tildeling til konstant variabel.\" width=\"1166\" height=\"227\"><figcaption id=\"caption-attachment-151747\" class=\"wp-caption-text\"><em>Uopdaget TypeError: Tildeling til konstant variabel<\/em> i Chrome<\/figcaption><\/figure>\n<p>Du kan tilf\u00f8je, omfordele og fjerne egenskaber og metoder for objekter:<\/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>Men du har ikke lov til at omfordele selve objektet. F\u00f8lgende kode ville g\u00e5 gennem en <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 I React er det standard at deklarere variabler med <code>const<\/code>. <code>light<\/code> b\u00f8r bruges, n\u00e5r <code>const<\/code> ikke er passende. Brug af <code>var<\/code> frar\u00e5des p\u00e5 det kraftigste.<\/strong><\/p>\n<\/aside>\n\n<h3>Object.freeze()<\/h3>\n<p>Vi er nu enige om, at brugen af <code>const<\/code> ikke altid garanterer st\u00e6rk uforanderlighed (is\u00e6r n\u00e5r man arbejder med objekter og arrays). S\u00e5 hvordan kan du implementere uforanderlighedsm\u00f8nsteret i dine React-applikationer?<\/p>\n<p>For det f\u00f8rste, n\u00e5r du vil forhindre, at elementerne i et array eller egenskaberne i et objekt bliver \u00e6ndret, kan du bruge den <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Object\/freeze\" target=\"_blank\" rel=\"noopener noreferrer\">statiske metode <code>Object.freeze()<\/code><\/a>.<\/p>\n<blockquote><p>Fastfrysning af et objekt forhindrer udvidelser og g\u00f8r eksisterende egenskaber ikke-skrivbare og ikke-konfigurerbare. Et frosset objekt kan ikke l\u00e6ngere \u00e6ndres: nye egenskaber kan ikke tilf\u00f8jes, eksisterende egenskaber kan ikke fjernes, deres opregnelighed, konfigurerbarhed, skrivbarhed eller v\u00e6rdi kan ikke \u00e6ndres, og objektets prototype kan ikke tildeles igen. <code>freeze()<\/code> returnerer det samme objekt, som blev <span style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1.125rem\">sendt ind.<\/span><\/p><\/blockquote>\n<p>Ethvert fors\u00f8g p\u00e5 at tilf\u00f8je, \u00e6ndre eller fjerne en egenskab vil mislykkes, enten lydl\u00f8st eller ved at kaste en <code>TypeError<\/code>, mest almindeligt i <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>Du kan bruge <code>Object.freeze()<\/code> p\u00e5 denne m\u00e5de:<\/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>Hvis du nu fors\u00f8ger at tilf\u00f8je en egenskab, vil du modtage en <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: kan ikke definere egenskaben. Objektet kan ikke udvides\" width=\"1256\" height=\"300\"><figcaption id=\"caption-attachment-151753\" class=\"wp-caption-text\"><em>Uncaught TypeError: kan ikke definere egenskaben &#8220;slug&#8221;: Objektet kan ikke udvides<\/em> i Firefox<\/figcaption><\/figure>\n<p>N\u00e5r du pr\u00f8ver at tildele en egenskab igen, f\u00e5r du en anden slags <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=\"Gentildeling af en skrivebeskyttet egenskab kaster en Uncaught TypeError\" width=\"1198\" height=\"288\"><figcaption id=\"caption-attachment-151865\" class=\"wp-caption-text\">Gentildeling af en skrivebeskyttet egenskab kaster en 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: Kan ikke tildele til skrivebeskyttet egenskab i Chrome\" width=\"1190\" height=\"254\"><figcaption id=\"caption-attachment-151868\" class=\"wp-caption-text\"><em>Ikke-godkendt TypeError: Kan ikke tildele den skrivebeskyttede egenskab &#8216;id&#8217; for objektet &#8216;#&lt;Object&gt;&#8217;<\/em> i Google Chrome<\/figcaption><\/figure>\n<p>Du kan ogs\u00e5 pr\u00f8ve at slette en egenskab. Resultatet vil v\u00e6re en anden <code>TypeError<\/code>:<\/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: egenskaben \"uddrag\" kan ikke konfigureres og kan ikke slettes i Firefox\" width=\"1370\" height=\"298\"><figcaption id=\"caption-attachment-151869\" class=\"wp-caption-text\"><em>Uncaught TypeError: Egenskaben &#8220;excerpt&#8221; er ikke konfigurerbar og kan ikke sl<\/em> ettes i Firefox<\/figcaption><\/figure>\n<h2>Bogstavelige skabeloner<\/h2>\n<p>N\u00e5r du skal kombinere strenge med output fra udtryk i JavaScript, bruger du normalt additionsoperatoren <code>+<\/code>. Men du kan ogs\u00e5 bruge en JavaScript-funktion, der giver dig mulighed for at inkludere udtryk i strenge uden at bruge additionsoperatoren: <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> er en s\u00e6rlig slags strenge afgr\u00e6nset med backtick (<code>`<\/code>) tegn.<\/p>\n<p>I Template Literals kan du inkludere pladsholdere, som er indlejrede udtryk afgr\u00e6nset af et dollartegn og pakket ind i kr\u00f8llede parenteser.<\/p>\n<p>Her er et eksempel:<\/p>\n<pre><code class=\"language-js\">const align = 'left';\nconsole.log(`This string is ${ align }-aligned`);<\/code><\/pre>\n<p>Strengene og pladsholderne sendes til en standardfunktion, der udf\u00f8rer strenginterpolation for at erstatte place holders og sammenk\u00e6de delene til en enkelt streng. Du kan ogs\u00e5 erstatte standardfunktionen med en brugerdefineret funktion.<\/p>\n<p>Du kan bruge Template Literals til:<\/p>\n<p><strong>Strenge med flere linjer<\/strong>: nylinjetegn er en del af skabelonlitteralen.<\/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>Interpolation af strenge<\/strong>: Uden Template Literals kan du kun bruge additionsoperatoren til at kombinere output fra udtryk med strenge. Se det f\u00f8lgende eksempel:<\/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>Det er lidt forvirrende, er det ikke? Men du kan skrive den kode p\u00e5 en mere l\u00e6selig og vedligeholdelsesvenlig m\u00e5de ved hj\u00e6lp af 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>Men husk p\u00e5, at der er en <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Template_literals#string_interpolation\" target=\"_blank\" rel=\"noopener noreferrer\">forskel mellem de to syntakser<\/a>:<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f Template literals tvinger deres udtryk direkte til strenge, mens addition f\u00f8rst tvinger sine operander til primitiver.<\/strong><\/p>\n<\/aside>\n\n<p>Template Literals egner sig til flere anvendelser. I det f\u00f8lgende eksempel bruger vi en <a href=\"#ternary-operator\" target=\"_blank\" rel=\"noopener noreferrer\">tern\u00e6r operator<\/a> til at tildele en v\u00e6rdi til en <code>class<\/code> -attribut.<\/p>\n<pre><code class=\"language-js\">const page = 'archive';\nconsole.log(`class=${ page === 'archive' <code>?<\/code> 'archive' : 'single' }`);<\/code><\/pre>\n<p>Nedenfor udf\u00f8rer vi en simpel beregning:<\/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>Det er ogs\u00e5 muligt at indlejre Template Literals ved at inkludere dem i en <code>${expression}<\/code> pladsholder (men <a href=\"https:\/\/dev.to\/remrkabledev\/nesting-template-literals-a-recommended-approach-2jgj\" target=\"_blank\" rel=\"noopener noreferrer\">brug indlejrede skabeloner med forsigtighed<\/a>, da komplekse strengstrukturer kan v\u00e6re sv\u00e6re at l\u00e6se og vedligeholde).<\/p>\n<p><strong>Taggede skabeloner<\/strong>: Som vi n\u00e6vnte ovenfor, er det ogs\u00e5 muligt at definere en brugerdefineret funktion til at udf\u00f8re sammenk\u00e6dning af strenge. Denne form for Template Literal kaldes <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>Tags giver dig mulighed for at parse template literals med en funktion. Det f\u00f8rste argument i en tag-funktion indeholder et array af strengv\u00e6rdier. De resterende argumenter er relateret til udtrykkene.<\/p><\/blockquote>\n<p>Tags giver dig mulighed for at parse template literals med en brugerdefineret funktion. Det f\u00f8rste argument i denne funktion er et array af de strenge, der er inkluderet i Template Literal, de andre argumenter er udtrykkene.<\/p>\n<p>Du kan oprette en brugerdefineret funktion til at udf\u00f8re enhver form for operation p\u00e5 skabelonargumenterne og returnere den manipulerede streng. Her er et meget grundl\u00e6ggende eksempel p\u00e5 en <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Template_literals#tagged_templates\" target=\"_blank\" rel=\"noopener noreferrer\">tagget skabel<\/a><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Template_literals#tagged_templates\" target=\"_blank\" rel=\"noopener noreferrer\">on<\/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>Koden ovenfor udskriver array-elementerne <code>strings<\/code> og <code>tags<\/code> og s\u00e6tter derefter store bogstaver p\u00e5 strengtegnene, f\u00f8r den udskriver output i browserkonsollen.<\/p>\n<h2>Pil-funktioner<\/h2>\n<p>Arrow-funktioner er et alternativ til anonyme funktioner (funktioner uden navne) i JavaScript, men med nogle forskelle og begr\u00e6nsninger.<\/p>\n<p>De f\u00f8lgende erkl\u00e6ringer er alle gyldige eksempler p\u00e5 Arrow Functions:<\/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>Du kan udelade de runde parenteser, hvis du kun sender \u00e9n parameter til funktionen. Hvis du sender to eller flere parametre, skal du omslutte dem med parenteser. Her er et eksempel p\u00e5 dette:<\/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>Pilefunktioner p\u00e5 \u00e9n linje returnerer som standard en v\u00e6rdi. Hvis du bruger syntaksen med flere linjer, skal du manuelt returnere en v\u00e6rdi:<\/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 Du vil normalt bruge Arrow Function i React-applikationer, medmindre der er en s\u00e6rlig grund til ikke at bruge dem.<\/strong><\/p>\n<\/aside>\n\n<p>En vigtig forskel mellem normale funktioner og Arrow-funktioner er, at Arrow-funktioner ikke har deres egne bindinger til n\u00f8gleordet <code>this<\/code>. Hvis du fors\u00f8ger at bruge <code>this<\/code> i en Arrow Function, vil den g\u00e5 uden for funktionens scope.<\/p>\n<p>For en mere dybdeg\u00e5ende beskrivelse af Arrow-funktioner og eksempler p\u00e5 brug, l\u00e6s ogs\u00e5 <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>Klasser<\/h2>\n<p><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Learn\/JavaScript\/Objects\/Classes_in_JavaScript\" target=\"_blank\" rel=\"noopener noreferrer\">Klasser i JavaScript<\/a> er en s\u00e6rlig type funktion til at skabe objekter, der bruger den prototypiske arvemekanisme.<\/p>\n<p>If\u00f8lge <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>N\u00e5r det kommer til nedarvning, har JavaScript kun \u00e9n konstruktion: objekter. Hvert objekt har en privat egenskab, som indeholder et link til et andet objekt kaldet dets prototype. Dette prototypeobjekt har sin egen prototype, og s\u00e5 videre, indtil man n\u00e5r frem til et objekt med <code>null<\/code> som prototype<\/p><\/blockquote>\n<p>.<br \/>\nLigesom med funktioner har du to m\u00e5der at definere en klasse p\u00e5:<\/p>\n<ul>\n<li>Et klasseudtryk<\/li>\n<li>En klassedeklaration<\/li>\n<\/ul>\n<p>Du kan bruge n\u00f8gleordet <code>class<\/code> til at definere en klasse inde i et udtryk, som vist i f\u00f8lgende eksempel:<\/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>En klasse har en body, som er den kode, der er sat i kr\u00f8llede parenteser. Her definerer du konstrukt\u00f8rer og metoder, som ogs\u00e5 kaldes klassemedlemmer. Klassens body eksekveres i strict mode, selv uden at bruge <code>'strict mode'<\/code> -direktivet.<\/p>\n<p>Metoden <code>constructor<\/code> bruges til at oprette og initialisere et objekt, der er oprettet med en klasse, og udf\u00f8res automatisk, n\u00e5r klassen instantieres. Hvis du ikke definerer en konstrukt\u00f8rmetode i din klasse, vil JavaScript automatisk bruge en standardkonstrukt\u00f8r.<\/p>\n<p>En klasse kan udvides ved hj\u00e6lp af n\u00f8gleordet <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>En konstrukt\u00f8r kan bruge <code>super<\/code> -n\u00f8gleordet til at kalde den overordnede konstrukt\u00f8r. Hvis du sender et argument til <code>super()<\/code> -metoden, vil dette argument ogs\u00e5 v\u00e6re tilg\u00e6ngeligt i den overordnede konstrukt\u00f8rklasse.<\/p>\n<p>For et dybere dyk ned i JavaScript-klasser og flere eksempler p\u00e5 brug, se ogs\u00e5 <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>Klasser bruges ofte til at skabe React-komponenter. Normalt vil du ikke oprette dine egne klasser, men snarere udvide indbyggede React-klasser.<\/p>\n<p>Alle <a href=\"https:\/\/react.dev\/reference\/react\/Component#defining-a-class-component\" target=\"_blank\" rel=\"noopener noreferrer\">klasser i React<\/a> har en <code>render()<\/code> -metode, der returnerer et React-element:<\/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>I eksemplet ovenfor er <code>Animal<\/code> en klassekomponent. V\u00e6r opm\u00e6rksom p\u00e5, at<\/p>\n<ul>\n<li>Navnet p\u00e5 komponenten skal begynde med et stort bogstav<\/li>\n<li>Komponenten skal indeholde udtrykket <code>extends React.Component<\/code>. Det giver adgang til metoderne i <code>React.Component<\/code>.<\/li>\n<li>Metoden <code>render()<\/code> returnerer HTML og er p\u00e5kr\u00e6vet.<\/li>\n<\/ul>\n<p>N\u00e5r du har oprettet din klassekomponent, kan du gengive HTML&#8217;en p\u00e5 siden:<\/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>Billedet nedenfor viser resultatet p\u00e5 siden (du kan se det <a href=\"https:\/\/codepen.io\/carlodaniele\/pen\/LYgPvEP\">i aktion p\u00e5 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=\"wp-image-151880 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/react-class-component.jpg\" alt=\"En simpel React-klassekomponent\" width=\"2162\" height=\"996\"><figcaption id=\"caption-attachment-151880\" class=\"wp-caption-text\">En simpel React-klassekomponent<\/figcaption><\/figure>\n<p>Bem\u00e6rk dog, at det <a href=\"https:\/\/react.dev\/reference\/react\/Component#migrating-a-simple-component-from-a-class-to-a-function\" target=\"_blank\" rel=\"noopener noreferrer\">ikke anbefales at bruge klassekomponenter i React<\/a>, og at det er at <a href=\"https:\/\/kinsta.com\/dk\/blog\/react-bedste-praksisser\/#12-make-use-of-functional-components\">foretr\u00e6kke at definere komponenter som funktioner<\/a>.<\/p>\n<h2>N\u00f8gleordet &#8216;this&#8217;<\/h2>\n<p>I JavaScript er n\u00f8gleordet <code>this<\/code> en generisk placeholder, der normalt bruges inde i objekter, klasser og funktioner, og det henviser til forskellige elementer afh\u00e6ngigt af konteksten eller omfanget.<\/p>\n<p><strong><code>this<\/code> kan bruges i det globale scope.<\/strong> Hvis du taster <code>this<\/code> i din browsers konsol, f\u00e5r du:<\/p>\n<pre><code>Window {window: Window, self: Window, document: document, name: '', location: Location, ...}<\/code><\/pre>\n<p>Du kan tilg\u00e5 alle metoder og egenskaber i <code>Window<\/code> -objektet. S\u00e5 hvis du k\u00f8rer <code>this.location<\/code> i din browsers konsol, f\u00e5r du f\u00f8lgende 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>N\u00e5r du bruger <code>this<\/code> i et objekt, henviser det til selve objektet.<\/strong> P\u00e5 denne m\u00e5de kan du henvise til et objekts v\u00e6rdier i selve objektets metoder:<\/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>Lad os nu pr\u00f8ve at bruge <code>this<\/code> i en funktion:<\/p>\n<pre><code class=\"language-javascript\">const useThis = function () {\n\treturn this;\n}\nconsole.log( useThis() );<\/code><\/pre>\n<p>Hvis du ikke er i strict mode, f\u00e5r du:<\/p>\n<pre><code>Window {window: Window, self: Window, document: document, name: '', location: Location, ...}<\/code><\/pre>\n<p>Men hvis du aktiverer <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Strict_mode\" target=\"_blank\" rel=\"noopener noreferrer\">strict mode<\/a>, f\u00e5r du et andet resultat:<\/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>I dette tilf\u00e6lde returnerer funktionen <code>undefined<\/code>. Det skyldes, at <code>this<\/code> i en funktion refererer til dens eksplicitte v\u00e6rdi.<\/p>\n<p>S\u00e5 hvordan s\u00e6tter man eksplicit <code>this<\/code> i en funktion?<\/p>\n<p>For det f\u00f8rste kan du manuelt tildele egenskaber og metoder til funktionen:<\/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>Men du kan ogs\u00e5 bruge <code>call<\/code>, <code>apply<\/code>, og <code>bind<\/code> metoder samt pilfunktioner.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f Metoden <code>call()<\/code> p\u00e5 en funktion accepterer et objekt, som <code>this<\/code> refererer til.<\/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><code>call()<\/code> -metoden kan bruges p\u00e5 enhver funktion og g\u00f8r pr\u00e6cis, hvad den siger: den kalder funktionen.<\/p>\n<p>Desuden accepterer <code>call()<\/code> enhver anden parameter, der er defineret i funktionen:<\/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 Metoden <code>apply()<\/code> accepterer et objekt, som <code>this<\/code> vil henvise til, og et array af funktionens parametre.<\/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 <code>bind()<\/code> -metoden forbinder et objekt med en funktion, s\u00e5 n\u00e5r du kalder funktionen, henviser <code>this<\/code> til objektet.<\/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>Et alternativ til de muligheder, der er diskuteret ovenfor, er at bruge <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Functions\/Arrow_functions\" target=\"_blank\" rel=\"noopener noreferrer\">pilefunktioner<\/a>.<\/p>\n<blockquote><p>Pilfunktionsudtryk b\u00f8r kun bruges til ikke-metodefunktioner, fordi de ikke har deres egen <code>this<\/code>.<\/p><\/blockquote>\n<p>Det g\u00f8r pilefunktioner s\u00e6rligt nyttige i forbindelse med event handlers.<\/p>\n<p>Det skyldes, at &#8220;n\u00e5r koden kaldes fra en inline event handler-attribut, s\u00e6ttes dens <code>this<\/code> til det DOM-element, som lytteren er placeret p\u00e5&#8221; (se <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>Men tingene \u00e6ndrer sig med pilefunktioner, fordi&#8230;<\/p>\n<blockquote><p>&#8230; pilefunktioner etablerer <code>this<\/code> baseret p\u00e5 det scope, pilefunktionen er defineret i, og <code>this<\/code> v\u00e6rdien \u00e6ndrer sig ikke baseret p\u00e5, hvordan funktionen kaldes.<\/p><\/blockquote>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f Brug af pilefunktioner giver dig mulighed for at binde konteksten direkte til en eventhandler.<\/strong><\/p>\n<\/aside>\n\n<h3>Binding af &#8216;this&#8217; til eventhandlere i React<\/h3>\n<p>N\u00e5r det kommer til React, har du et par m\u00e5der at sikre dig, at event handleren ikke mister sin kontekst:<\/p>\n<p><strong>1. Ved at bruge <code>bind()<\/code> inde i render-metoden:<\/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. Binding af konteksten til eventhandleren i konstrukt\u00f8ren:<\/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. Definer event handler ved hj\u00e6lp af pilefunktioner:<\/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. Brug af pilefunktioner i render-metoden:<\/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>Uanset hvilken metode du v\u00e6lger, viser browserkonsollen f\u00f8lgende output, n\u00e5r du klikker p\u00e5 knappen:<\/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>Den <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Operators\/Conditional_Operator\" target=\"_blank\" rel=\"noopener noreferrer\">conditional operator<\/a> (eller ternary operator) giver dig mulighed for at skrive simple betingede udtryk i JavaScript. Den tager tre operander:<\/p>\n<ul>\n<li>en betingelse efterfulgt af et sp\u00f8rgsm\u00e5lstegn (<code>?<\/code>),<\/li>\n<li>et udtryk, der skal udf\u00f8res, hvis betingelsen er <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Glossary\/Truthy\" target=\"_blank\" rel=\"noopener noreferrer\">sand<\/a> efterfulgt af et kolon (<code>:<\/code>),<\/li>\n<li>et andet udtryk, der skal udf\u00f8res, hvis betingelsen er <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Glossary\/Falsy\" target=\"_blank\" rel=\"noopener noreferrer\">falsk<\/a>.<\/li>\n<\/ul>\n<pre><code class=\"language-javascript\">const drink = personAge &gt;= 18 ? \"Wine\" : \"Juice\";<\/code><\/pre>\n<p>Det er ogs\u00e5 muligt at k\u00e6de flere udtryk sammen:<\/p>\n<pre><code class=\"language-javascript\">const drink = personAge &gt;= 18 ? \"Wine\" : personAge &gt;= 6 ? \"Juice\" : \"Milk\";<\/code><\/pre>\n<p>V\u00e6r dog forsigtig, for k\u00e6dning af flere udtryk kan f\u00f8re til rodet kode, der er sv\u00e6r at vedligeholde.<\/p>\n<p>Den ternary operator er s\u00e6rlig nyttig i React, is\u00e6r i din JSX-kode, som kun accepterer udtryk i kr\u00f8llede parenteser.<\/p>\n<p>Du kan f.eks. bruge den tern\u00e6re operator til at indstille v\u00e6rdien af en attribut baseret p\u00e5 en bestemt betingelse:<\/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>I koden ovenfor kontrollerer vi betingelsen <code>person.theme === 'dark'<\/code> for at indstille v\u00e6rdien af <code>style<\/code> -attributten i containeren <code>div<\/code>.<\/p>\n<h2>Evaluering af kortslutning<\/h2>\n<p>Den logiske AND (<code>&&<\/code>) operator evaluerer operanderne fra venstre mod h\u00f8jre og returnerer <code>true<\/code> hvis og kun hvis alle operanderne er <code>true<\/code>.<\/p>\n<p>Den logiske AND er en <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Operators\/Logical_AND#short-circuit_evaluation\" target=\"_blank\" rel=\"noopener noreferrer\">kortslutningsoperator<\/a>. Hver operand konverteres til en boolsk, og hvis resultatet af konverteringen er <code>false<\/code>, stopper AND-operatoren og returnerer den oprindelige v\u00e6rdi af den fejlbeh\u00e6ftede operand. Hvis alle v\u00e6rdier er <code>true<\/code>, returnerer den den oprindelige v\u00e6rdi af den sidste operand.<\/p>\n<p><aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f I JavaScript returnerer <code>true &amp;&amp; expression<\/code> altid <code>expression<\/code>, og <code>false &amp;&amp; expression<\/code> returnerer altid <code>false<\/code>.<\/p>\n<\/aside>\n<br \/>\n<\/strong><br \/>\nKortslutningsevaluering er en JavaScript-funktion, der ofte bruges i React, da den giver dig mulighed for at udl\u00e6se blokke af kode baseret p\u00e5 specifikke betingelser. <a href=\"https:\/\/kinsta.com\/blog\/dynamic-blocks\/#add-the-excerpt\">Her<\/a> er et eksempel:<\/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>I koden ovenfor, hvis <code>displayExcerpt<\/code> <strong>AND<\/strong> <code>post.excerpt.rendered<\/code> evaluerer til <code>true<\/code>, returnerer React den endelige blok af JSX.<\/p>\n<p><a href=\"https:\/\/legacy.reactjs.org\/docs\/conditional-rendering.html#inline-if-with-logical--operator\" target=\"_blank\" rel=\"noopener noreferrer\">For at ops<\/a>ummere: &#8220;Hvis betingelsen er <code>true<\/code>, vil elementet lige efter <code>&&<\/code> blive vist i outputtet. Hvis det er <code>false<\/code>, vil React ignorere og springe det over&#8221;.<\/p>\n<h2>Spread syntax<\/h2>\n<p>I JavaScript giver <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Operators\/Spread_syntax\" target=\"_blank\" rel=\"noopener noreferrer\">spread syntax<\/a> dig mulighed for at udvide et iterabelt element, s\u00e5som et array eller objekt, til funktionsargumenter, array literals eller object literals.<\/p>\n<p>I det f\u00f8lgende eksempel pakker vi et array ud i et funktionskald:<\/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>Du kan bruge spread-syntaksen til at duplikere et array (selv multidimensionale arrays) eller til at sammenk\u00e6de arrays. I de f\u00f8lgende eksempler sammenk\u00e6der vi to arrays p\u00e5 to forskellige m\u00e5der:<\/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>Alternativt:<\/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>Du kan ogs\u00e5 bruge spread-syntaksen til at klone eller flette to objekter:<\/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>Destrukturering af tildelinger<\/h2>\n<p>En anden syntaktisk struktur, du ofte vil finde brugt i React, er <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Operators\/Destructuring_assignment\" target=\"_blank\" rel=\"noopener noreferrer\">destructuring assignment-syntaksen<\/a>.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f Destructuring assignment-syntaksen giver dig mulighed for at pakke v\u00e6rdier fra et array eller egenskaber fra et objekt ud i separate variabler.<\/strong><\/p>\n<\/aside>\n\n<p>I det f\u00f8lgende eksempel udpakker vi v\u00e6rdier fra et array:<\/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>Og her er et simpelt eksempel p\u00e5 destruktureringstildeling med et objekt:<\/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>Men vi kan g\u00f8re endnu mere. I det f\u00f8lgende eksempel pakker vi nogle egenskaber ud af et objekt og tildeler de resterende egenskaber til et andet objekt ved hj\u00e6lp af den spredte syntaks:<\/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>Du kan ogs\u00e5 tildele v\u00e6rdier til et 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>Bem\u00e6rk, at parenteserne omkring assignment-s\u00e6tningen er p\u00e5kr\u00e6vet, n\u00e5r du bruger object literal destructuring assignment uden en deklaration.<\/p>\n<p>For en mere dybdeg\u00e5ende analyse af destruktureringstildeling, med flere eksempler p\u00e5 brug, henvises til <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Operators\/Destructuring_assignment\" target=\"_blank\" rel=\"noopener noreferrer\">mdn web docs<\/a>.<\/p>\n<h2>filter(), map() og reduce()<\/h2>\n<p>JavaScript indeholder flere nyttige metoder, som ofte bruges i React.<\/p>\n<h3>filter()<\/h3>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Array\/filter\" target=\"_blank\" rel=\"noopener noreferrer\">Metoden<code>filter()<\/code> <\/a> opretter en <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Glossary\/Shallow_copy\" target=\"_blank\" rel=\"noopener noreferrer\">overfladisk kopi<\/a> af en del af en given matrix filtreret ned til de elementer, der opfylder betingelsen i den angivne funktion.<\/strong><\/p>\n<\/aside>\n\n<p>I det f\u00f8lgende eksempel anvender vi filteret p\u00e5 arrayet <code>numbers<\/code> for at f\u00e5 et array, hvis elementer er tal st\u00f8rre end 5:<\/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>I det f\u00f8lgende eksempel f\u00e5r vi et array af indl\u00e6g med ordet &#8216;JavaScript&#8217; i titlen:<\/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=\"Et array af indl\u00e6g, hvor titlen indeholder 'JavaScript'\" width=\"1198\" height=\"346\"><figcaption id=\"caption-attachment-152106\" class=\"wp-caption-text\">Et array af indl\u00e6g, hvor titlen indeholder &#8216;JavaScript&#8217;<\/figcaption><\/figure>\n<h3>map()<\/h3>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Array\/map\" target=\"_blank\" rel=\"noopener noreferrer\">Metoden<code>map()<\/code><\/a> udf\u00f8rer en given funktion p\u00e5 hvert element i et array og returnerer et nyt array, der er udfyldt med hvert element, der er resultatet af callback-funktionen<\/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>I en React-komponent vil du ofte finde <code>map()<\/code> -metoden brugt til at opbygge lister. I det f\u00f8lgende eksempel kortl\u00e6gger vi WordPress-objektet <code>posts<\/code> for at <a href=\"https:\/\/kinsta.com\/blog\/dynamic-blocks\/\">opbygge en liste over indl\u00e6g<\/a>:<\/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 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Array\/reduce\" target=\"_blank\" rel=\"noopener noreferrer\"><code>reduce()<\/code> -metoden<\/a> udf\u00f8rer en callback-funktion (<em>reducer<\/em>) p\u00e5 hvert element i et array og sender den returnerede v\u00e6rdi til den n\u00e6ste iteration. Kort sagt &#8220;reducerer&#8221; reduceren alle elementerne i et array til en enkelt v\u00e6rdi.<\/strong><\/p>\n<\/aside>\n\n<p><code>reduce()<\/code> accepterer to parametre:<\/p>\n<ul>\n<li>En callback-funktion, der skal udf\u00f8res for hvert element i arrayet. Den returnerer en v\u00e6rdi, der bliver v\u00e6rdien af akkumulatorparameteren ved det n\u00e6ste kald. Ved det sidste kald returnerer funktionen den v\u00e6rdi, der vil v\u00e6re returv\u00e6rdien af <code>reduce()<\/code>.<\/li>\n<li>En startv\u00e6rdi, som er den f\u00f8rste v\u00e6rdi i akkumulatoren, der sendes til callback-funktionen.<\/li>\n<\/ul>\n<p>Callback-funktionen tager et par parametre:<\/p>\n<ul>\n<li>En <strong>akkumulator<\/strong>: Den v\u00e6rdi, der returneres fra det forrige kald til callback-funktionen. Ved det f\u00f8rste kald s\u00e6ttes den til en startv\u00e6rdi, hvis det er angivet. Ellers tager den v\u00e6rdien af det f\u00f8rste element i arrayet.<\/li>\n<li>V\u00e6rdien af det <strong>aktuelle element<\/strong>: V\u00e6rdien s\u00e6ttes til det f\u00f8rste element i arrayet (<code>array[0]<\/code>), hvis der er indstillet en startv\u00e6rdi, ellers tager den v\u00e6rdien af det andet element (<code>array[1]<\/code>).<\/li>\n<li>Det <strong>aktuelle indeks<\/strong> er indekspositionen for det aktuelle element.<\/li>\n<\/ul>\n<p>Et eksempel vil g\u00f8re det hele klarere.<\/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>Lad os finde ud af i detaljer, hvad der sker ved hver iteration. G\u00e5 tilbage til det forrige eksempel, og \u00e6ndr <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>Det f\u00f8lgende billede viser outputtet i browserkonsollen:<\/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() med startv\u00e6rdien sat til 5\" width=\"1172\" height=\"388\"><figcaption id=\"caption-attachment-152231\" class=\"wp-caption-text\">using reduce() med startv\u00e6rdien sat til 5<\/figcaption><\/figure>\n<p>Lad os nu finde ud af, hvad der sker uden parameteren <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=\"wp-image-152232 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/reduce-without-initial-value.jpg\" alt=\"Brug af reduce() uden startv\u00e6rdi\" width=\"1176\" height=\"360\"><figcaption id=\"caption-attachment-152232\" class=\"wp-caption-text\">Brug af reduce() uden startv\u00e6rdi<\/figcaption><\/figure>\n<p>Flere eksempler og brugsscenarier er beskrevet p\u00e5 <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> hjemmeside.<\/p>\n<h2>Eksport og import<\/h2>\n<p>Fra og med ECMAScript 2015 (ES6) er det muligt at eksportere v\u00e6rdier fra et JavaScript-modul og importere dem til et andet script. Du kommer til at bruge import og eksport flittigt i dine React-applikationer, og derfor er det vigtigt at have en god forst\u00e5else af, hvordan de fungerer.<\/p>\n<p>Den f\u00f8lgende kode opretter en funktionel komponent. Den f\u00f8rste linje importerer React-biblioteket:<\/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>Vi brugte n\u00f8gleordet <code>import<\/code> efterfulgt af det navn, vi \u00f8nsker at tildele det, vi importerer, efterfulgt af navnet p\u00e5 den pakke, vi \u00f8nsker at installere, som der henvises til i <strong>package.json-filen<\/strong>.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f <code>import<\/code> erkl\u00e6ringer bruges til at <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Statements\/import\" target=\"_blank\" rel=\"noopener noreferrer\">importere skrivebeskyttede live bindinger<\/a>, der eksporteres af andre moduler.<\/strong><\/p>\n<\/aside>\n\n<p>Bem\u00e6rk, at vi i <code>MyComponent()<\/code> -funktionen ovenfor brugte nogle af de JavaScript-funktioner, der blev diskuteret i de foreg\u00e5ende afsnit. Vi inkluderede egenskabsv\u00e6rdier i kr\u00f8llede parenteser og tildelte v\u00e6rdien af <code>style<\/code> -egenskaben ved hj\u00e6lp af den betingede operat\u00f8rsyntaks.<\/p>\n<p>Scriptet slutter med eksport af vores brugerdefinerede komponent.<\/p>\n<p>Nu hvor vi ved lidt mere om import og eksport, s\u00e5 lad os se n\u00e6rmere p\u00e5, hvordan de fungerer.<\/p>\n<h3>Eksport<\/h3>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f Erkl\u00e6ringen <code>export<\/code> bruges til at eksportere v\u00e6rdier fra et JavaScript-modul<\/strong>.<\/p>\n<\/aside>\n\n<p>Hvert React-modul kan have <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Statements\/export#description\" target=\"_blank\" rel=\"noopener noreferrer\">to forskellige typer eksport<\/a>: <strong>navngivet eksport<\/strong> og <strong>standardeksport<\/strong>.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f Du kan have flere navngivne eksporter pr. modul, men kun \u00e9n standardeksport.<\/strong><\/p>\n<\/aside>\n\n<p>Du kan f.eks. eksportere flere funktioner p\u00e5 \u00e9n gang med en enkelt <code>export<\/code> erkl\u00e6ring:<\/p>\n<pre><code class=\"language-javascript\">export { MyComponent, MyVariable };<\/code><\/pre>\n<p>Du kan ogs\u00e5 eksportere individuelle funktioner (<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>Men du kan kun have en enkelt standardeksport:<\/p>\n<pre><code class=\"language-javascript\">export default MyComponent;<\/code><\/pre>\n<p>Du kan ogs\u00e5 bruge standardeksport til individuelle funktioner:<\/p>\n<pre><code class=\"language-javascript\">export default function() { ... }\nexport default class { ... }<\/code><\/pre>\n<h3>Import<\/h3>\n<p>N\u00e5r komponenten er blevet eksporteret, kan den importeres til en anden fil, f.eks. en <strong>index.js-fil<\/strong>, sammen med andre moduler:<\/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>I koden ovenfor brugte vi importerkl\u00e6ringen p\u00e5 flere m\u00e5der.<\/p>\n<p>I de to f\u00f8rste linjer tildelte vi et navn til de importerede ressourcer, i den tredje linje tildelte vi ikke et navn, men importerede simpelthen <strong>.\/index.css-filen<\/strong>. Den sidste erkl\u00e6ring <code>import<\/code> importerer filen <strong>.\/MyComponent<\/strong> og tildeler den et navn.<\/p>\n<p>Lad os finde ud af forskellene mellem disse importer.<\/p>\n<p>I alt er der fire typer af import:<\/p>\n<p><strong>Navngivet import<\/strong><\/p>\n<pre><code class=\"language-javascript\">import { MyFunction, MyVariable } from \".\/my-module\";<\/code><\/pre>\n<p><strong>Standard-import<\/strong><\/p>\n<pre><code class=\"language-javascript\">import MyComponent from \".\/MyComponent\";<\/code><\/pre>\n<p><strong>Import af name space<\/strong><\/p>\n<pre><code class=\"language-javascript\">import * as name from \"my-module\";<\/code><\/pre>\n<p><strong>Import af side effect<\/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 En <code>import<\/code> -s\u00e6tning uden kr\u00f8llede parenteser bruges til at importere standard <code>export<\/code>. En <code>import<\/code> -s\u00e6tning med kr\u00f8llede parenteser bruges til at importere en navngivet <code>export<\/code>.<\/strong><\/p>\n<\/aside>\n\n<p>N\u00e5r du har tilf\u00f8jet et par stilarter i din <strong>index.css<\/strong>, skulle dit kort se ud som p\u00e5 billedet nedenfor, hvor du ogs\u00e5 kan se den tilsvarende HTML-kode:<\/p>\n<figure id=\"attachment_152317\" aria-describedby=\"caption-attachment-152317\" style=\"width: 1806px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-152317 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/react-card.jpg\" alt=\"Et simpelt React-komponent\" width=\"1806\" height=\"678\"><figcaption id=\"caption-attachment-152317\" class=\"wp-caption-text\">Et simpelt React-komponent<\/figcaption><\/figure>\n<p>Bem\u00e6rk, at <code>import<\/code> erkl\u00e6ringer kun kan bruges i moduler p\u00e5 \u00f8verste niveau (ikke inde i funktioner, klasser osv.).<\/p>\n<p>Hvis du vil have et mere omfattende overblik over <code>import<\/code> og <code>export<\/code> erkl\u00e6ringer, kan du ogs\u00e5 tjekke f\u00f8lgende ressourcer:<\/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\">import<\/a> (mdn web docs)<\/li>\n<li><a href=\"https:\/\/react.dev\/learn\/importing-and-exporting-components\" target=\"_blank\" rel=\"noopener noreferrer\">Import og eksport af komponenter<\/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\">Hvorn\u00e5r skal jeg bruge kr\u00f8llede parenteser til ES6-import?<\/a> (Stack Overflow)<\/li>\n<\/ul>\n\n<h2>Opsummering<\/h2>\n<p>React er et af de mest <a href=\"https:\/\/kinsta.com\/dk\/blog\/javascript-biblioteker\/#reactjs\">popul\u00e6re JavaScript-biblioteker<\/a> i dag og er en af de mest efterspurgte <a href=\"https:\/\/kinsta.com\/blog\/web-developer-salary\/\">f\u00e6rdigheder<\/a> inden for <a href=\"https:\/\/kinsta.com\/blog\/frontend-developer\/\">webudvikling<\/a>.<\/p>\n<p>Med React er det muligt at skabe dynamiske webapplikationer og avancerede gr\u00e6nseflader. Det er nemt at skabe store, dynamiske og interaktive applikationer takket v\u00e6re de genanvendelige komponenter.<\/p>\n<p>Men React er et JavaScript-bibliotek, og en god forst\u00e5else af de vigtigste funktioner i JavaScript er afg\u00f8rende for at starte din rejse med React. Derfor har vi samlet nogle af de JavaScript-funktioner, der oftest bruges i React, p\u00e5 \u00e9t sted. At mestre disse funktioner vil give dig et forspring p\u00e5 din <a href=\"https:\/\/kinsta.com\/dk\/blog\/bedste-react-vejledninger\/\">React-l\u00e6ringsrejse<\/a>.<\/p>\n<p>Og n\u00e5r det kommer til <a href=\"https:\/\/kinsta.com\/dk\/blog\/typer-udviklere\/\">webudvikling<\/a>, kr\u00e6ver det kun en lille indsats at g\u00e5 fra JS\/React til WordPress.<\/p>\n<p>Nu er det din tur, hvilke JavaScript-funktioner synes du er mest nyttige i React-udvikling? Har vi overset noget vigtigt, som du gerne ville have set p\u00e5 vores liste? Del dine tanker med os i kommentarerne nedenfor.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I dag er React et af de mest popul\u00e6re JavaScript-biblioteker. Det kan bruges til at skabe dynamiske og responsive applikationer, giver bedre ydeevne og kan nemt &#8230;<\/p>\n","protected":false},"author":36,"featured_media":51022,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[559,593,594],"topic":[706,730,745,746],"class_list":["post-51021","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-javascript","tag-javascript-libraries","tag-react","topic-javascript-tutorials","topic-react","topic-web-udvikling-sprog","topic-web-udviklingsvaerktoejer"],"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-funktioner, du skal kende for at mestre React - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Slip det fulde potentiale af dynamisk app-udvikling l\u00f8s med React! Opdag de vigtigste JavaScript-funktioner, du skal kende for at komme i gang nu.\" \/>\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\/dk\/blog\/javascript-react\/\" \/>\n<meta property=\"og:locale\" content=\"da_DK\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JavaScript-funktioner, du skal kende for at mestre React\" \/>\n<meta property=\"og:description\" content=\"Slip det fulde potentiale af dynamisk app-udvikling l\u00f8s med React! Opdag de vigtigste JavaScript-funktioner, du skal kende for at komme i gang nu.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/dk\/blog\/javascript-react\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Kinsta-Danmark-122855885298660\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-06-01T09:01:11+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-24T09:13:49+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/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=\"Slip det fulde potentiale af dynamisk app-udvikling l\u00f8s med React! Opdag de vigtigste JavaScript-funktioner, du skal kende for at komme i gang nu.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2023\/06\/javascript-and-react-01.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@carlodaniele\" \/>\n<meta name=\"twitter:site\" content=\"@kinsta_dk\" \/>\n<meta name=\"twitter:label1\" content=\"Skrevet af\" \/>\n\t<meta name=\"twitter:data1\" content=\"Carlo Daniele\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimeret l\u00e6setid\" \/>\n\t<meta name=\"twitter:data2\" content=\"34 minutter\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/dk\/blog\/javascript-react\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/dk\/blog\/javascript-react\/\"},\"author\":{\"name\":\"Carlo Daniele\",\"@id\":\"https:\/\/kinsta.com\/dk\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63\"},\"headline\":\"JavaScript-funktioner, du skal kende for at mestre React\",\"datePublished\":\"2023-06-01T09:01:11+00:00\",\"dateModified\":\"2023-08-24T09:13:49+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/dk\/blog\/javascript-react\/\"},\"wordCount\":5238,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/dk\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/dk\/blog\/javascript-react\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2023\/06\/javascript-and-react-01.jpg\",\"keywords\":[\"JavaScript\",\"JavaScript Libraries\",\"React\"],\"inLanguage\":\"da-DK\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/dk\/blog\/javascript-react\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/dk\/blog\/javascript-react\/\",\"url\":\"https:\/\/kinsta.com\/dk\/blog\/javascript-react\/\",\"name\":\"JavaScript-funktioner, du skal kende for at mestre React - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/dk\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/dk\/blog\/javascript-react\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/dk\/blog\/javascript-react\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2023\/06\/javascript-and-react-01.jpg\",\"datePublished\":\"2023-06-01T09:01:11+00:00\",\"dateModified\":\"2023-08-24T09:13:49+00:00\",\"description\":\"Slip det fulde potentiale af dynamisk app-udvikling l\u00f8s med React! Opdag de vigtigste JavaScript-funktioner, du skal kende for at komme i gang nu.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/dk\/blog\/javascript-react\/#breadcrumb\"},\"inLanguage\":\"da-DK\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/dk\/blog\/javascript-react\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"da-DK\",\"@id\":\"https:\/\/kinsta.com\/dk\/blog\/javascript-react\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2023\/06\/javascript-and-react-01.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2023\/06\/javascript-and-react-01.jpg\",\"width\":3042,\"height\":1521},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/dk\/blog\/javascript-react\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/dk\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript tutorials\",\"item\":\"https:\/\/kinsta.com\/dk\/emner\/javascript-tutorials\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"JavaScript-funktioner, du skal kende for at mestre React\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/dk\/#website\",\"url\":\"https:\/\/kinsta.com\/dk\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Hurtig, sikker, premium hostingl\u00f8sninger\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/dk\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/dk\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"da-DK\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/dk\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/dk\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"da-DK\",\"@id\":\"https:\/\/kinsta.com\/dk\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/dk\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Kinsta-Danmark-122855885298660\/\",\"https:\/\/x.com\/kinsta_dk\",\"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\/dk\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63\",\"name\":\"Carlo Daniele\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"da-DK\",\"@id\":\"https:\/\/kinsta.com\/dk\/#\/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\/dk\/blog\/author\/carlodaniele\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"JavaScript-funktioner, du skal kende for at mestre React - Kinsta\u00ae","description":"Slip det fulde potentiale af dynamisk app-udvikling l\u00f8s med React! Opdag de vigtigste JavaScript-funktioner, du skal kende for at komme i gang nu.","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\/dk\/blog\/javascript-react\/","og_locale":"da_DK","og_type":"article","og_title":"JavaScript-funktioner, du skal kende for at mestre React","og_description":"Slip det fulde potentiale af dynamisk app-udvikling l\u00f8s med React! Opdag de vigtigste JavaScript-funktioner, du skal kende for at komme i gang nu.","og_url":"https:\/\/kinsta.com\/dk\/blog\/javascript-react\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/Kinsta-Danmark-122855885298660\/","article_published_time":"2023-06-01T09:01:11+00:00","article_modified_time":"2023-08-24T09:13:49+00:00","og_image":[{"width":3042,"height":1521,"url":"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2023\/06\/javascript-and-react-01.jpg","type":"image\/jpeg"}],"author":"Carlo Daniele","twitter_card":"summary_large_image","twitter_description":"Slip det fulde potentiale af dynamisk app-udvikling l\u00f8s med React! Opdag de vigtigste JavaScript-funktioner, du skal kende for at komme i gang nu.","twitter_image":"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2023\/06\/javascript-and-react-01.jpg","twitter_creator":"@carlodaniele","twitter_site":"@kinsta_dk","twitter_misc":{"Skrevet af":"Carlo Daniele","Estimeret l\u00e6setid":"34 minutter"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/dk\/blog\/javascript-react\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/dk\/blog\/javascript-react\/"},"author":{"name":"Carlo Daniele","@id":"https:\/\/kinsta.com\/dk\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63"},"headline":"JavaScript-funktioner, du skal kende for at mestre React","datePublished":"2023-06-01T09:01:11+00:00","dateModified":"2023-08-24T09:13:49+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/dk\/blog\/javascript-react\/"},"wordCount":5238,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/dk\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/dk\/blog\/javascript-react\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2023\/06\/javascript-and-react-01.jpg","keywords":["JavaScript","JavaScript Libraries","React"],"inLanguage":"da-DK","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/dk\/blog\/javascript-react\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/dk\/blog\/javascript-react\/","url":"https:\/\/kinsta.com\/dk\/blog\/javascript-react\/","name":"JavaScript-funktioner, du skal kende for at mestre React - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/dk\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/dk\/blog\/javascript-react\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/dk\/blog\/javascript-react\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2023\/06\/javascript-and-react-01.jpg","datePublished":"2023-06-01T09:01:11+00:00","dateModified":"2023-08-24T09:13:49+00:00","description":"Slip det fulde potentiale af dynamisk app-udvikling l\u00f8s med React! Opdag de vigtigste JavaScript-funktioner, du skal kende for at komme i gang nu.","breadcrumb":{"@id":"https:\/\/kinsta.com\/dk\/blog\/javascript-react\/#breadcrumb"},"inLanguage":"da-DK","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/dk\/blog\/javascript-react\/"]}]},{"@type":"ImageObject","inLanguage":"da-DK","@id":"https:\/\/kinsta.com\/dk\/blog\/javascript-react\/#primaryimage","url":"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2023\/06\/javascript-and-react-01.jpg","contentUrl":"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2023\/06\/javascript-and-react-01.jpg","width":3042,"height":1521},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/dk\/blog\/javascript-react\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/dk\/"},{"@type":"ListItem","position":2,"name":"JavaScript tutorials","item":"https:\/\/kinsta.com\/dk\/emner\/javascript-tutorials\/"},{"@type":"ListItem","position":3,"name":"JavaScript-funktioner, du skal kende for at mestre React"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/dk\/#website","url":"https:\/\/kinsta.com\/dk\/","name":"Kinsta\u00ae","description":"Hurtig, sikker, premium hostingl\u00f8sninger","publisher":{"@id":"https:\/\/kinsta.com\/dk\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/dk\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"da-DK"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/dk\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/dk\/","logo":{"@type":"ImageObject","inLanguage":"da-DK","@id":"https:\/\/kinsta.com\/dk\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/dk\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Kinsta-Danmark-122855885298660\/","https:\/\/x.com\/kinsta_dk","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\/dk\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63","name":"Carlo Daniele","image":{"@type":"ImageObject","inLanguage":"da-DK","@id":"https:\/\/kinsta.com\/dk\/#\/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\/dk\/blog\/author\/carlodaniele\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/dk\/wp-json\/wp\/v2\/posts\/51021","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/dk\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/dk\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/dk\/wp-json\/wp\/v2\/users\/36"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/dk\/wp-json\/wp\/v2\/comments?post=51021"}],"version-history":[{"count":7,"href":"https:\/\/kinsta.com\/dk\/wp-json\/wp\/v2\/posts\/51021\/revisions"}],"predecessor-version":[{"id":52088,"href":"https:\/\/kinsta.com\/dk\/wp-json\/wp\/v2\/posts\/51021\/revisions\/52088"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/dk\/wp-json\/kinsta\/v1\/posts\/51021\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/dk\/wp-json\/kinsta\/v1\/posts\/51021\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/dk\/wp-json\/kinsta\/v1\/posts\/51021\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/dk\/wp-json\/kinsta\/v1\/posts\/51021\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/dk\/wp-json\/kinsta\/v1\/posts\/51021\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/dk\/wp-json\/kinsta\/v1\/posts\/51021\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/dk\/wp-json\/kinsta\/v1\/posts\/51021\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/dk\/wp-json\/kinsta\/v1\/posts\/51021\/translations\/es"},{"embeddable":true,"hreflang":"sv","title":"Swedish","href":"https:\/\/kinsta.com\/dk\/wp-json\/kinsta\/v1\/posts\/51021\/translations\/se"},{"embeddable":true,"hreflang":"da","title":"Danish","href":"https:\/\/kinsta.com\/dk\/wp-json\/kinsta\/v1\/posts\/51021\/translations\/dk"},{"href":"https:\/\/kinsta.com\/dk\/wp-json\/kinsta\/v1\/posts\/51021\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/dk\/wp-json\/wp\/v2\/media\/51022"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/dk\/wp-json\/wp\/v2\/media?parent=51021"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/dk\/wp-json\/wp\/v2\/tags?post=51021"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/dk\/wp-json\/wp\/v2\/topic?post=51021"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}