{"id":53371,"date":"2023-06-01T09:04:09","date_gmt":"2023-06-01T09:04:09","guid":{"rendered":"https:\/\/kinsta.com\/se\/?p=53371&#038;preview=true&#038;preview_id=53371"},"modified":"2023-09-21T10:02:09","modified_gmt":"2023-09-21T10:02:09","slug":"javascript-react","status":"publish","type":"post","link":"https:\/\/kinsta.com\/se\/blog\/javascript-react\/","title":{"rendered":"Viktiga JavaScript-funktioner f\u00f6r att bem\u00e4stra React"},"content":{"rendered":"<p><a href=\"https:\/\/kinsta.com\/se\/topics\/react\/\">React<\/a> \u00e4r idag ett av de mest popul\u00e4ra <a href=\"https:\/\/kinsta.com\/se\/blog\/javascript-biblioteken\/\">JavaScript-biblioteken<\/a>. Det kan exempelvis anv\u00e4ndas f\u00f6r att skapa dynamiska och responsiva applikationer, ger b\u00e4ttre prestanda och kan dessutom enkelt ut\u00f6kas. Den underliggande logiken bygger p\u00e5 komponenter som kan \u00e5teranv\u00e4ndas i olika sammanhang. Som ett resultat minskar behovet av att skriva samma kod flera g\u00e5nger. Kort sagt, med React kan du skapa <a href=\"https:\/\/kinsta.com\/se\/topics\/react\/\">effektiva och kraftfulla applikationer<\/a>.<\/p>\n<p>S\u00e5 det har aldrig funnits ett b\u00e4ttre tillf\u00e4lle att l\u00e4ra sig hur man skapar React-applikationer.<\/p>\n<p>Men utan en gedigen f\u00f6rst\u00e5else f\u00f6r vissa viktiga <a href=\"https:\/\/kinsta.com\/javascript\/\">JavaScript-funktioner<\/a> kan det vara sv\u00e5rt eller till och med om\u00f6jligt att bygga React-applikationer.<\/p>\n<p>D\u00e4rf\u00f6r har vi sammanst\u00e4llt en lista \u00f6ver JavaScript-funktioner och begrepp som du beh\u00f6ver k\u00e4nna till innan du b\u00f6rjar anv\u00e4nda React. Ju b\u00e4ttre du f\u00f6rst\u00e5r dessa begrepp, desto l\u00e4ttare blir det f\u00f6r dig att bygga professionella React-applikationer.<\/p>\n<p>Med detta sagt, h\u00e4r \u00e4r vad vi kommer att diskutera i den h\u00e4r artikeln:<\/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 och ECMAScript<\/h2>\n<p><a href=\"https:\/\/kinsta.com\/blog\/what-is-javascript\/\">JavaScript<\/a> \u00e4r ett popul\u00e4rt skriptspr\u00e5k. Det anv\u00e4nds tillsammans med <a href=\"https:\/\/kinsta.com\/blog\/what-is-html\/\">HTML<\/a> och CSS f\u00f6r att bygga dynamiska webbsidor. HTML anv\u00e4nds f\u00f6r att skapa strukturen p\u00e5 en webbsida och CSS f\u00f6r att skapa stil och layout f\u00f6r dess element. JavaScript \u00e4r ist\u00e4llet det spr\u00e5k som anv\u00e4nds f\u00f6r att l\u00e4gga till beteende p\u00e5 sidan, dvs. f\u00f6r att skapa funktionalitet och interaktivitet.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f JavaScript utvecklades av Brendan Eich p\u00e5 Netscape Communications \u00e5r 1995 i syfte att g\u00f6ra webbsidor i webbl\u00e4saren Netscape Navigator mer interaktiva.<\/strong><\/p>\n<\/aside>\n\n<p>Spr\u00e5ket har sedan dess anammats av de stora webbl\u00e4sarna och det har skapats ett dokument f\u00f6r att beskriva hur JavaScript var t\u00e4nkt att fungera: <a href=\"https:\/\/en.wikipedia.org\/wiki\/ECMAScript\" target=\"_blank\" rel=\"noopener noreferrer\">ECMAScript-standarden<\/a>.<\/p>\n<p>Fr\u00e5n och med \u00e5r 2015 sl\u00e4pps en uppdatering av ECMAScript-standarden \u00e5rligen. Det l\u00e4ggs d\u00e4rf\u00f6r till nya funktioner i JavaScript varje \u00e5r.<\/p>\n<p><a href=\"https:\/\/262.ecma-international.org\/6.0\/\" target=\"_blank\" rel=\"noopener noreferrer\">ECMAScript 2015<\/a> var den sj\u00e4tte versionen av standarden och kallas d\u00e4rf\u00f6r \u00e4ven <strong>ES6<\/strong>. Efterf\u00f6ljande versioner \u00e4r markerade med en progression, s\u00e5 vi refererar till ECMAScript 2016 som ES7, ECMAScript 2017 som ES8, och s\u00e5 vidare.<\/p>\n<p>Eftersom nya funktioner ofta l\u00e4ggs till i standarden kan det h\u00e4nda att vissa inte st\u00f6ds i alla webbl\u00e4sare. S\u00e5 hur kan du se till att de senaste JavaScript-funktionerna som du har lagt till i din JS-app kommer att fungera som f\u00f6rv\u00e4ntat?<\/p>\n<h3>Alternativ f\u00f6r att funktionerna ska fungera som v\u00e4ntat<\/h3>\n<p>Du har tre alternativ:<\/p>\n<ol>\n<li>V\u00e4nta tills alla st\u00f6rre webbl\u00e4sare har st\u00f6d f\u00f6r de nya funktionerna. Om du absolut beh\u00f6ver den fantastiska nya JS-funktionen f\u00f6r din app \u00e4r detta dock inte ett alternativ.<\/li>\n<li>Anv\u00e4nd en Polyfill, som \u00e4r &#8221;en kodbit (vanligtvis JavaScript p\u00e5 webben). Den anv\u00e4nds f\u00f6r att tillhandah\u00e5lla modern funktionalitet i \u00e4ldre webbl\u00e4sare som inte har inbyggt st\u00f6d f\u00f6r detta (se \u00e4ven <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Glossary\/Polyfill\" target=\"_blank\" rel=\"noopener noreferrer\">mdn web docs<\/a>).<\/li>\n<li>Anv\u00e4nd 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>, som konverterar ECMAScript 2015+-kod till en JavaScript-version som st\u00f6ds av alla webbl\u00e4sare.<\/li>\n<\/ol>\n\n<h2>Statement vs Expressions<\/h2>\n<p>Att f\u00f6rst\u00e5 skillnaden mellan statements och expressions \u00e4r viktigt n\u00e4r man bygger React-applikationer. S\u00e5 l\u00e5t oss g\u00e5 tillbaka till de grundl\u00e4ggande begreppen inom programmering f\u00f6r ett \u00f6gonblick.<\/p>\n<p>Ett datorprogram \u00e4r en lista med instruktioner som ska utf\u00f6ras av en dator. Dessa instruktioner kallas f\u00f6r <strong>statements<\/strong>.<\/p>\n<p>Till skillnad fr\u00e5n satser \u00e4r <strong>expressions<\/strong> fragment av kod som producerar ett v\u00e4rde. I ett statement \u00e4r ett uttryck en del som returnerar ett v\u00e4rde och vi ser det vanligtvis p\u00e5 h\u00f6ger sida av ett likhetstecken.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f Ett statement \u00e4r ett kodblock som g\u00f6r n\u00e5got.<\/strong><\/p>\n<\/aside>\n\n<p>Medan:<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f En expression \u00e4r ett kodfragment som producerar ett v\u00e4rde.<\/strong><\/p>\n<\/aside>\n\n<p>JavaScript-satser kan vara block eller rader av kod som vanligtvis avslutas med semikolon eller omsluts av hakparenteser.<\/p>\n<p>H\u00e4r \u00e4r ett enkelt exempel p\u00e5 ett statement i JavaScript:<\/p>\n<pre><code class=\"language-js\">document.getElementById(\"hello\").innerHTML = \"Hello World!\";<\/code><\/pre>\n<p>Uttalandet ovan skriver <code>\"Hello World!\"<\/code> i ett DOM-element med <code>id=\"hello\"<\/code>.<\/p>\n<h3>Expressions producerar ett v\u00e4rde eller \u00e4r ett v\u00e4rde<\/h3>\n<p>Som vi redan n\u00e4mnt producerar expessions ett v\u00e4rde eller \u00e4r sj\u00e4lva ett v\u00e4rde. Betrakta f\u00f6ljande exempel:<\/p>\n<pre><code class=\"language-js\">msg = document.getElementById(\"hello\").value;<\/code><\/pre>\n<p><code>document.getElementById(\"hello\").value<\/code> \u00e4r ett expression eftersom det returnerar ett v\u00e4rde.<\/p>\n<p>Ett ytterligare exempel b\u00f6r hj\u00e4lpa till att klarg\u00f6ra skillnaden mellan expressions och statements:<\/p>\n<pre><code class=\"language-js\">const msg = \"Hello World!\";\nfunction sayHello( msg ) {\n\tconsole.log( msg );\n}<\/code><\/pre>\n<p>I exemplet ovan,<\/p>\n<ul>\n<li>\u00e4r den f\u00f6rsta raden ett statement, d\u00e4r <code>\"Hello World!\"<\/code> \u00e4r ett uttryck,<\/li>\n<li>funktionsdeklarationen \u00e4r en sats, d\u00e4r parametern <code>msg<\/code> som skickas till funktionen \u00e4r ett expression,<\/li>\n<li>raden som skriver ut meddelandet i konsolen \u00e4r en sats, d\u00e4r parametern <code>msg<\/code> \u00e5terigen \u00e4r ett expression.<\/li>\n<\/ul>\n<h3>Varf\u00f6r expressions \u00e4r viktiga i React<\/h3>\n<p>N\u00e4r du <a href=\"https:\/\/kinsta.com\/se\/blog\/react-basta-praxis\/\">bygger en React-applikation<\/a> kan du <a href=\"https:\/\/react.dev\/learn\/javascript-in-jsx-with-curly-braces\" target=\"_blank\" rel=\"noopener noreferrer\">injicera JavaScript-expressions i din JSX-kod<\/a>. Du kan exempelvis skicka en variabel, skriva en h\u00e4ndelsehanterare eller ett villkor. F\u00f6r att g\u00f6ra detta m\u00e5ste du inkludera din JS-kod i lockiga parenteser.<\/p>\n<p>Du kan exempelvis skicka 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, de lockiga hakparenteserna talar om f\u00f6r din transpiler att den kod som \u00e4r inslagen i hakparenteser ska behandlas som JS-kod. Allt som kommer f\u00f6re den inledande <code>&lt;p&gt;<\/code>-taggen och efter den avslutande <code>&lt;\/p&gt;<\/code>-taggen \u00e4r normal JavaScript-kod. Allt som kommer innanf\u00f6r den inledande <code>&lt;p&gt;<\/code>-taggen och den avslutande <code>&lt;\/p&gt;<\/code>-taggen behandlas som JSX-kod.<\/p>\n<p>H\u00e4r \u00e4r ett annat exempel:<\/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 dessutom skicka ett 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>Och nedan finns ett mer omfattande exempel:<\/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<h4>Dubbla lockiga parenteser<\/h4>\n<p>L\u00e4gg m\u00e4rke till de dubbla lockiga parenteserna i <code>style<\/code>-attributen i elementen <code>img<\/code> och <code>div<\/code>. Vi anv\u00e4nde dubbla parenteser f\u00f6r att skicka tv\u00e5 objekt som inneh\u00e5ller kort- och bildstilar.<\/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=\"Ett exempel p\u00e5 ett kort som \u00e4r byggt med React\" width=\"1360\" height=\"694\"><figcaption id=\"caption-attachment-152320\" class=\"wp-caption-text\">Ett exempel p\u00e5 ett kort som \u00e4r byggt med React<\/figcaption><\/figure>\n<p>Du b\u00f6r ha lagt m\u00e4rke till att vi inkluderade JavaScript-uttryck i <a href=\"https:\/\/kinsta.com\/blog\/what-is-jsx\/\">JSX<\/a>\u00a0i alla exemplen ovan.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f JSX accepterar endast JavaScript-uttryck inom hakparenteser. Du f\u00e5r inte skriva expressions i din JSX-kod.<\/strong><\/p>\n<p><strong>Detta g\u00e4ller bl.a:<\/strong><\/p>\n<ul>\n<li><strong>Variabler<\/strong><\/li>\n<li><strong>Str\u00e4ngar med citattecken<\/strong><\/li>\n<li><strong>Funktionsanrop<\/strong><\/li>\n<li><strong>Objekt<\/strong><\/li>\n<li><strong>Villkorliga uttryck<\/strong><\/li>\n<\/ul>\n<p><\/p>\n<\/aside>\n\n<h2>Mutability i React<\/h2>\n<p>Mutability och Immutability \u00e4r <a href=\"https:\/\/en.wikipedia.org\/wiki\/Immutable_object\" target=\"_blank\" rel=\"noopener noreferrer\">tv\u00e5 nyckelbegrepp<\/a> inom objektorienterad och funktionell programmering.<\/p>\n<p>Immutability inneb\u00e4r att ett v\u00e4rde inte kan \u00e4ndras efter att det har skapats. Mutability inneb\u00e4r naturligtvis motsatsen.<\/p>\n<p>I Javascript \u00e4r <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Glossary\/Primitive\" target=\"_blank\" rel=\"noopener noreferrer\">primitiva v\u00e4rden<\/a> <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Glossary\/Immutable\" target=\"_blank\" rel=\"noopener noreferrer\">of\u00f6r\u00e4nderliga<\/a>, vilket inneb\u00e4r att n\u00e4r ett primitivt v\u00e4rde har skapats kan det inte \u00e4ndras. Arrayer och objekt \u00e4r d\u00e4remot mutable eftersom deras egenskaper och element kan \u00e4ndras utan att ett nytt v\u00e4rde tilldelas.<\/p>\n<p>Det finns flera anledningar till att anv\u00e4nda of\u00f6r\u00e4nderliga objekt i JavaScript:<\/p>\n<ul>\n<li>F\u00f6rb\u00e4ttrad prestanda<\/li>\n<li>Minskad minnesf\u00f6rbrukning<\/li>\n<li>Tr\u00e5d-s\u00e4kerhet<\/li>\n<li>Enklare kodning och fels\u00f6kning<\/li>\n<\/ul>\n<p>Enligt m\u00f6nstret f\u00f6r of\u00f6r\u00e4nderlighet kan en variabel eller ett objekt inte tilldelas p\u00e5 nytt eller \u00e4ndras n\u00e4r den eller det har tilldelats. N\u00e4r du beh\u00f6ver \u00e4ndra data b\u00f6r du d\u00e4rf\u00f6r skapa en kopia av den och \u00e4ndra dess inneh\u00e5ll s\u00e5 att det ursprungliga inneh\u00e5llet f\u00f6rblir of\u00f6r\u00e4ndrat.<\/p>\n<p><strong>Immutability<\/strong> \u00e4r dessutom ett nyckelkoncept i React.<\/p>\n<h3>react-dokumentationen<\/h3>\n<p>I <a href=\"https:\/\/react.dev\/reference\/react\/Component#state\" target=\"_blank\" rel=\"noopener noreferrer\">React-dokumentationen<\/a> anges f\u00f6ljande:<\/p>\n<blockquote><p>Tillst\u00e5ndet f\u00f6r en klasskomponent \u00e4r tillg\u00e4ngligt som <code>this.state<\/code>. Statusf\u00e4ltet m\u00e5ste vara ett objekt. \u00c4ndra inte tillst\u00e5ndet direkt. Om du vill \u00e4ndra tillst\u00e5ndet anropar du <code>setState<\/code> med det nya till<span style=\"font-size: 1rem\">st\u00e5ndet.<\/span><\/p><\/blockquote>\n<p>N\u00e4r en komponents tillst\u00e5nd \u00e4ndras ber\u00e4knar React om komponenten ska renderas p\u00e5 nytt och uppdatera den virtuella DOM: en. Om React inte har koll p\u00e5 det tidigare tillst\u00e5ndet kan det dock inte avg\u00f6ra om komponenten ska renderas p\u00e5 nytt eller inte. React-dokumentationen ger ett <a href=\"https:\/\/react.dev\/learn\/updating-objects-in-state#treat-state-as-read-only\" target=\"_blank\" rel=\"noopener noreferrer\">utm\u00e4rkt exempel p\u00e5 detta<\/a>.<\/p>\n<p>Vilka JavaScript-funktioner kan vi anv\u00e4nda f\u00f6r att garantera of\u00f6r\u00e4nderligheten hos tillst\u00e5nds-objektet i React? L\u00e5t oss ta reda p\u00e5 detta!<\/p>\n<h3>Deklarera variabler<\/h3>\n<p>Det finns tre s\u00e4tt att deklarera en variabel i JavaScript: <code>var<\/code>, <code>let<\/code>, och <code>const<\/code>.<\/p>\n<p><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Statements\/var#var_hoisting\" target=\"_blank\" rel=\"noopener noreferrer\">Satsen<code>var<\/code><\/a> \u00a0har funnits sedan JavaScript skapades. Det anv\u00e4nds f\u00f6r att deklarera en funktions-omfattande eller globalt omfattande variabel och eventuellt initiera den till ett v\u00e4rde.<\/p>\n<p>N\u00e4r du deklarerar en variabel med <code>var<\/code> kan du dessutom omdeklarera och uppdatera variabeln b\u00e5de i den globala och lokala omfattningen. F\u00f6ljande kod \u00e4r till\u00e5ten:<\/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 behandlas innan n\u00e5gon kod exekveras. Att deklarera en variabel var som helst i koden \u00e4r d\u00e4rf\u00f6r detsamma som att deklarera den h\u00f6gst upp. Detta beteende kallas f\u00f6r <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Glossary\/Hoisting\" target=\"_blank\" rel=\"noopener noreferrer\">hoisting<\/a>.<\/p>\n<p>Det \u00e4r v\u00e4rt att notera att det bara \u00e4r variabeldeklarationen som hoistas, inte initialiseringen. Den sker endast n\u00e4r <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Glossary\/Control_flow\" target=\"_blank\" rel=\"noopener noreferrer\">kontrollfl\u00f6det<\/a> n\u00e5r assignment-satsen. Fram till dess \u00e4r variabeln <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>Omfattningen av en <code>var<\/code> som deklareras i en JS-funktion \u00e4r <a href=\"https:\/\/hacks.mozilla.org\/2015\/07\/es6-in-depth-let-and-const\/\" target=\"_blank\" rel=\"noopener noreferrer\">hela funktionens kropp<\/a>.<\/p>\n<p>Som ett resultat definieras variabeln inte p\u00e5 blockniv\u00e5, utan p\u00e5 hela funktionens niv\u00e5. Detta leder till ett antal problem som kan g\u00f6ra din JavaScript-kod buggig och sv\u00e5r att underh\u00e5lla.<\/p>\n<p>F\u00f6r att \u00e5tg\u00e4rda dessa problem introducerade ES6 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Statements\/let\" target=\"_blank\" rel=\"noopener noreferrer\">nyckelordet<code>let<\/code><\/a>.<\/p>\n<blockquote><p>Deklarationen <code>let<\/code> deklarerar en <strong>block-omfattande<\/strong>\u00a0lokal variabel och initierar den eventuellt till ett v\u00e4rde<\/p><\/blockquote>\n<h3>.F\u00f6rdelar med let j\u00e4mf\u00f6rt med var<\/h3>\n<p>Vilka \u00e4r f\u00f6rdelarna med <code>let<\/code> j\u00e4mf\u00f6rt med <code>var<\/code>? De \u00e4r exempelvis f\u00f6ljande:<\/p>\n<ul>\n<li><strong><code>let<\/code>\u00a0deklarerar en variabel f\u00f6r ett block<\/strong> medan <code>var<\/code> deklarerar en variabel globalt eller lokalt f\u00f6r en hel funktion oavsett blockets\u00a0omfattning.<\/li>\n<li><strong>Globala <code>let<\/code>-variabler \u00e4r inte egenskaper hos <code>window<\/code>-objektet<\/strong>. Du kan inte komma \u00e5t dem med <code>window.variableName<\/code>.<\/li>\n<li><strong><code>let<\/code> kan endast n\u00e5s efter att dess deklaration har n\u00e5tts<\/strong>. Variabeln initialiseras inte f\u00f6rr\u00e4n kontrollfl\u00f6det n\u00e5r den kodrad d\u00e4r den deklareras (let-deklarationer \u00e4r <strong>icke-hoistade<\/strong>).<\/li>\n<li><strong>Om du deklarerar en variabel p\u00e5 nytt med <code>let<\/code> uppst\u00e5r ett\u00a0<code>SyntaxError<\/code><\/strong>.<\/li>\n<\/ul>\n<p>Eftersom variabler som deklareras med <code>var<\/code> inte kan block-omfattas, kan en variabel som definieras med <code>var<\/code> i en loop eller inuti en <code>if<\/code>-sats n\u00e5s utanf\u00f6r blocket. Som ett resultat kan det uppst\u00e5 en buggig kod.<\/p>\n<p>Koden i det f\u00f6rsta exemplet exekveras utan fel. Ers\u00e4tt nu <code>var<\/code> med <code>let<\/code> i kodblocket ovan:<\/p>\n<pre><code class=\"language-js\">console.log(msg);\nlet msg = \"Hello!\";\nconsole.log(msg);<\/code><\/pre>\n<p>I det andra exemplet ger <code>let<\/code> ist\u00e4llet f\u00f6r <code>var<\/code> ett\u00a0<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=\"Ouppt\u00e4ckt referensfel i Chrome\" width=\"1176\" height=\"222\"><figcaption id=\"caption-attachment-151741\" class=\"wp-caption-text\">Ouppt\u00e4ckt referensfel i Chrome<\/figcaption><\/figure>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f Som en allm\u00e4n regel b\u00f6r du d\u00e4rf\u00f6r alltid anv\u00e4nda <code>let<\/code> ist\u00e4llet f\u00f6r <code>var<\/code>.<\/strong><\/p>\n<\/aside>\n\n<p>ES6 introducerar dessutom ett tredje nyckelord: <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Statements\/const\"><code>const<\/code><\/a>.<\/p>\n<p><code>const<\/code> \u00e4r ganska likt <code>let<\/code>, men med en viktig skillnad:<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f Variabler som deklareras med <code>const<\/code> kan inte tilldelas ett v\u00e4rde annat \u00e4n vid den punkt d\u00e4r de deklareras<\/strong>.<\/p>\n<\/aside>\n\n<p>Betrakta f\u00f6ljande exempel:<\/p>\n<pre><code class=\"language-js\">const MAX_VALUE = 1000;\nMAX_VALUE = 2000;<\/code><\/pre>\n<p>Ovanst\u00e5ende kod skulle generera f\u00f6ljande <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=\"Ouppt\u00e4ckt typfel: Tilldelning till konstant variabel i Google Chrome\" width=\"1012\" height=\"268\"><figcaption id=\"caption-attachment-151743\" class=\"wp-caption-text\"><em>Ouppt\u00e4ckt typfel: Tilldelning till konstant variabel<\/em> i Google Chrome<\/figcaption><\/figure>\n<p>Dessutom:<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f Du kan inte deklarera en <code>const<\/code> utan att ge den ett v\u00e4rde.<\/strong><\/p>\n<\/aside>\n\n<p>Att deklarera en <code>const<\/code> utan att ge den ett v\u00e4rde skulle leda till f\u00f6ljande <code>SyntaxError<\/code> (se \u00e4ven <a href=\"https:\/\/hacks.mozilla.org\/2015\/07\/es6-in-depth-let-and-const\/\">ES6 In Depth: let och 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=\"Ouppt\u00e4ckt SyntaxError: Initialiseraren saknas i const-deklarationen i Chrome\" width=\"1200\" height=\"214\"><figcaption id=\"caption-attachment-151746\" class=\"wp-caption-text\"><em>Ouppt\u00e4ckt SyntaxError: Initialiseraren saknas i const-deklarationen<\/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 inte omdeklareras och dess v\u00e4rde kan inte \u00e4ndras genom \u00e5tertilldelning.<\/strong><\/p>\n<\/aside>\n\n<h3>Redigera egenskapar eller objekt<\/h3>\n<p>Men om en konstant \u00e4r en array eller ett objekt kan du redigera egenskaper eller objekt i den arrayen eller det objektet.<\/p>\n<p>Du kan exempelvis \u00e4ndra, l\u00e4gga till och ta bort arrayobjekt:<\/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 f\u00e5r inte tilldela arrayen p\u00e5 nytt:<\/p>\n<pre><code class=\"language-js\">const cities = [\"London\", \"New York\", \"Sydney\"];\n\ncities = [\"Athens\", \"Barcelona\", \"Naples\"];<\/code><\/pre>\n<p>Koden ovan skulle resultera i ett <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=\"Ouppt\u00e4ckt typfel: Tilldelning till konstant variabel i Chrome\" width=\"1166\" height=\"227\"><figcaption id=\"caption-attachment-151747\" class=\"wp-caption-text\"><em>Ouppt\u00e4ckt typfel: Tilldelning till konstant variabel<\/em> i Chrome<\/figcaption><\/figure>\n<p>Du kan l\u00e4gga till, omf\u00f6rdela och ta bort egenskaper och metoder f\u00f6r objekt:<\/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<h3>Du kan inte omf\u00f6rdela sj\u00e4lva objektet<\/h3>\n<p>Men det \u00e4r inte till\u00e5tet att omf\u00f6rdela sj\u00e4lva objektet. F\u00f6ljande kod skulle g\u00e5 igenom 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 \u00e4r standardinst\u00e4llningen f\u00f6r att deklarera variabler\u00a0<code>const<\/code>. <code>let<\/code> b\u00f6r anv\u00e4ndas n\u00e4r <code>const<\/code> inte \u00e4r l\u00e4mpligt. Att anv\u00e4nda <code>var<\/code>\u00a0\u00e4r inte l\u00e4mpligt.<\/strong><\/p>\n<\/aside>\n\n<h3>Objekt.freeze()<\/h3>\n<p>Vi \u00e4r nu \u00f6verens om att anv\u00e4ndningen av <code>const<\/code> inte alltid garanterar en stark of\u00f6r\u00e4nderlighet (s\u00e4rskilt n\u00e4r man arbetar med objekt och arrayer). S\u00e5 hur kan du implementera of\u00f6r\u00e4nderlighetsm\u00f6nstret i dina React-applikationer?<\/p>\n<p>N\u00e4r du vill f\u00f6rhindra att elementen i en array eller egenskaperna hos ett objekt \u00e4ndras kan du anv\u00e4nda den <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Object\/freeze\" target=\"_blank\" rel=\"noopener noreferrer\">statiska metoden <code>Object.freeze()<\/code><\/a>.<\/p>\n<blockquote><p>Att frysa ett objekt f\u00f6rhindrar till\u00e4gg och g\u00f6r befintliga egenskaper icke-skrivbara och icke-konfigurerbara. Ett fryst objekt kan d\u00e4rf\u00f6r inte l\u00e4ngre \u00e4ndras. Nya egenskaper kan inte l\u00e4ggas till och befintliga egenskaper kan inte tas bort. Deras uppr\u00e4kningsbarhet, konfigurerbarhet, skrivbarhet eller v\u00e4rde kan heller inte \u00e4ndras och objektets prototyp kan inte tilldelas p\u00e5 nytt. <code>freeze()<\/code> returnerar samma objekt som det som skickades in.<\/p><\/blockquote>\n<p>Alla f\u00f6rs\u00f6k att l\u00e4gga till, \u00e4ndra eller ta bort en egenskap misslyckas, antingen tyst eller genom att kasta en <code>TypeError<\/code>, vanligast i <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Strict_mode\" target=\"_blank\" rel=\"noopener noreferrer\">strikt l\u00e4ge<\/a>.<\/p>\n<p>Du kan anv\u00e4nda <code>Object.freeze()<\/code> p\u00e5 detta s\u00e4tt:<\/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>Om du nu f\u00f6rs\u00f6ker att l\u00e4gga till en egenskap kommer du att f\u00e5 ett\u00a0<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=\"Ouppt\u00e4ckt TypeError: kan inte definiera egenskapen \"slug\": Objektet \u00e4r inte utbyggbart i Firefox\" width=\"1256\" height=\"300\"><figcaption id=\"caption-attachment-151753\" class=\"wp-caption-text\"><em>Ouppt\u00e4ckt TypeError: kan inte definiera egenskapen &#8221;slug&#8221;: Objektet \u00e4r inte utbyggbart<\/em> i Firefox<\/figcaption><\/figure>\n<p>N\u00e4r du f\u00f6rs\u00f6ker att omf\u00f6rdela en egenskap f\u00e5r du en annan typ av <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=\"Omplacering av en skrivskyddad egenskap ger ett of\u00e5ngat typfel\" width=\"1198\" height=\"288\"><figcaption id=\"caption-attachment-151865\" class=\"wp-caption-text\">Omplacering av en skrivskyddad egenskap ger ett of\u00e5ngat typfel<\/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=\"Ouppt\u00e4ckt typfel: Kan inte tilldela skrivskyddad egenskap 'id' f\u00f6r objektet '#&lt;Object&gt;' i Google Chrome\" width=\"1190\" height=\"254\"><figcaption id=\"caption-attachment-151868\" class=\"wp-caption-text\"><em>Ouppt\u00e4ckt typfel: Kan inte tilldela skrivskyddad egenskap &#8217;id&#8217; f\u00f6r objektet &#8217;#&lt;Object&gt;&#8217;<\/em> i Google Chrome<\/figcaption><\/figure>\n<p>Du kan dessutom f\u00f6rs\u00f6ka att ta bort en egenskap. Resultatet blir ett annat\u00a0<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=\"Typfel: egenskapen \"excerpt\" \u00e4r inte konfigurerbar och kan inte tas bort i Firefox\" width=\"1370\" height=\"298\"><figcaption id=\"caption-attachment-151869\" class=\"wp-caption-text\"><em>Typfel: egenskapen &#8221;excerpt&#8221; \u00e4r inte konfigurerbar och kan inte<\/em> tas bort i Firefox<\/figcaption><\/figure>\n<h2>Literala mallar<\/h2>\n<p>N\u00e4r du beh\u00f6ver kombinera str\u00e4ngar med resultatet av uttryck i JavaScript anv\u00e4nder du vanligtvis adderings-operat\u00f6ren\u00a0<code>+<\/code>. Du kan dock \u00e4ven anv\u00e4nda en JavaScript-funktion som g\u00f6r att du kan inkludera uttryck i str\u00e4ngar utan att anv\u00e4nda adderings-operat\u00f6ren: <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> \u00e4r en speciell typ av str\u00e4ngar som avgr\u00e4nsas med backtick (<code>`<\/code>).<\/p>\n<p>I Template Literals kan du inkludera platsh\u00e5llare. Det \u00e4r inb\u00e4ddade uttryck som avgr\u00e4nsas med ett dollartecken och omsluts av krulliga parenteser.<\/p>\n<p>H\u00e4r \u00e4r ett exempel:<\/p>\n<pre><code class=\"language-js\">const align = 'left';\nconsole.log(`This string is ${ align }-aligned`);<\/code><\/pre>\n<p>Str\u00e4ngarna och platsh\u00e5llarna skickas till en standardfunktion som utf\u00f6r str\u00e4nginterpolation. Som ett resultat ers\u00e4tter de platsh\u00e5llarna och sammanfogar delarna till en enda str\u00e4ng. Du kan dessutom ers\u00e4tta standardfunktionen med en anpassad funktion.<\/p>\n<p>Anv\u00e4nd Template Literals f\u00f6r:<\/p>\n<p><strong>Str\u00e4ngar med flera rader<\/strong>: Tecken f\u00f6r nya rader \u00e4r en del av Template Literals.<\/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>Interpolering av str\u00e4ngar<\/strong>: Utan Template Literals kan du bara anv\u00e4nda adderings-operat\u00f6ren f\u00f6r att kombinera utdata fr\u00e5n uttryck med str\u00e4ngar. Se f\u00f6ljande exempel:<\/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<h3>Skriv koden p\u00e5 ett mer l\u00e4ttl\u00e4st s\u00e4tt<\/h3>\n<p>Det \u00e4r lite f\u00f6rvirrande, eller hur? Men du kan skriva koden p\u00e5 ett mer l\u00e4ttl\u00e4st och underh\u00e5llbart s\u00e4tt med hj\u00e4lp av 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>Kom dock ih\u00e5g att det finns en <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Template_literals#string_interpolation\" target=\"_blank\" rel=\"noopener noreferrer\">skillnad mellan de tv\u00e5 syntaxerna<\/a>:<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f Template literals tvingar sina uttryck direkt till str\u00e4ngar, medan addering f\u00f6rst tvingar sina operander till primitiver.<\/strong><\/p>\n<\/aside>\n\n<p>Template Literals l\u00e4mpar sig f\u00f6r flera anv\u00e4ndningsomr\u00e5den. I f\u00f6ljande exempel anv\u00e4nder vi en <a href=\"#ternary-operator\" target=\"_blank\" rel=\"noopener noreferrer\">tern\u00e4r operator<\/a> f\u00f6r att tilldela ett v\u00e4rde till ett <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>Nedan utf\u00f6r vi en enkel ber\u00e4kning:<\/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 \u00e4r dessutom m\u00f6jligt att kapsla in Template Literals genom att inkludera dem i en <code>${expression}<\/code> platsh\u00e5llare. (<a href=\"https:\/\/dev.to\/remrkabledev\/nesting-template-literals-a-recommended-approach-2jgj\" target=\"_blank\" rel=\"noopener noreferrer\">Anv\u00e4nd dock kapslade mallar med f\u00f6rsiktighet<\/a> eftersom komplexa str\u00e4ngstrukturer kan vara sv\u00e5ra att l\u00e4sa och underh\u00e5lla).<\/p>\n<p><strong>Taggade mallar<\/strong>: Som vi n\u00e4mnde ovan \u00e4r det dessutom m\u00f6jligt att definiera en anpassad funktion f\u00f6r att utf\u00f6ra str\u00e4ng-sammanfogning. Denna typ av litter\u00e4r mall kallas f\u00f6r <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Template_literals#tagged_templates\">taggad mall<\/a>.<\/p>\n<blockquote><p>Med taggar kan du analysera Template Literals med en funktion. Det f\u00f6rsta argumentet i en taggfunktion inneh\u00e5ller en array med str\u00e4ngv\u00e4rden. De \u00e5terst\u00e5ende argumenten \u00e4r relaterade till uttrycken.<\/p><\/blockquote>\n<h3>Analysera Template Literals<\/h3>\n<p>Med taggar kan du analysera Template Literals med en anpassad funktion. Det f\u00f6rsta argumentet i den h\u00e4r funktionen \u00e4r en array med de str\u00e4ngar som ing\u00e5r i Template Literal, de andra argumenten \u00e4r uttrycken.<\/p>\n<p>Du kan skapa en anpassad funktion f\u00f6r att utf\u00f6ra vilken typ av operation som helst p\u00e5 mallargumenten och returnera den manipulerade str\u00e4ngen. H\u00e4r \u00e4r ett mycket grundl\u00e4ggande exempel p\u00e5 en <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Template_literals#tagged_templates\" target=\"_blank\" rel=\"noopener noreferrer\">taggad mall<\/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 ovan skriver ut arrayelementen <code>strings<\/code> och <code>tags<\/code> och kapitaliserar sedan str\u00e4ngtecknen innan utdata skrivs ut i webbl\u00e4sarkonsolen.<\/p>\n<h2>Pil-funktioner<\/h2>\n<p>Pil-funktioner \u00e4r ett alternativ till anonyma funktioner (funktioner utan namn) i JavaScript, men med vissa skillnader och begr\u00e4nsningar.<\/p>\n<p>F\u00f6ljande deklarationer \u00e4r alla giltiga exempel p\u00e5 pil-funktioner:<\/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<h3>S\u00e4tt tv\u00e5 eller fler parametrar inom parentes<\/h3>\n<p>Du kan utel\u00e4mna de runda parenteserna om du bara skickar en parameter till funktionen. Om du skickar tv\u00e5 eller fler parametrar m\u00e5ste du s\u00e4tta dem inom parentes. H\u00e4r \u00e4r ett exempel p\u00e5 detta:<\/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>Enradiga pilfunktioner returnerar ett v\u00e4rde som standard. Om du anv\u00e4nder syntaxen med flera rader m\u00e5ste du returnera ett v\u00e4rde manuellt:<\/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 kommer vanligtvis att anv\u00e4nda pil-funktionen i React-applikationer om det inte finns n\u00e5gon s\u00e4rskild anledning att inte anv\u00e4nda dem.<\/strong><\/p>\n<\/aside>\n\n<p>En viktig skillnad mellan normala funktioner och pil-funktioner \u00e4r att pil-funktioner inte har n\u00e5gra egna bindningar till nyckelordet <code>this<\/code>. Om du f\u00f6rs\u00f6ker anv\u00e4nda <code>this<\/code> i en pil-funktion kommer det att hamna utanf\u00f6r funktionens omfattning.<\/p>\n<p>F\u00f6r en mer ing\u00e5ende beskrivning av Arrow-funktioner och exempel p\u00e5 anv\u00e4ndning, l\u00e4s \u00e4ven <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> \u00e4r en speciell typ av funktion f\u00f6r att skapa objekt som anv\u00e4nder den prototypiska arvsmekanismen.<\/p>\n<p>Enligt <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\u00e4r det g\u00e4ller arv har JavaScript bara en konstruktion: objekt. Varje objekt har en privat egenskap som inneh\u00e5ller en l\u00e4nk till ett annat objekt som kallas dess prototyp. Det prototypobjektet har en egen prototyp, och s\u00e5 vidare tills man n\u00e5r ett objekt med <code>null<\/code> som prototyp.<\/p><\/blockquote>\n<p>Precis som med funktioner finns det tv\u00e5 s\u00e4tt att definiera en klass:<\/p>\n<ul>\n<li>Ett klassuttryck<\/li>\n<li>En klassdeklaration<\/li>\n<\/ul>\n<p>Du kan exempelvis anv\u00e4nda nyckelordet <code>class<\/code> f\u00f6r att definiera en klass inuti ett uttryck, vilket visas i f\u00f6ljande exempel:<\/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<h3>Definiera klassmedlemmar<\/h3>\n<p>En klass har en body, det vill s\u00e4ga den kod som ing\u00e5r i de lockiga hakparenteserna. H\u00e4r definierar du konstrukt\u00f6rer och metoder, som dessutom kallas klassmedlemmar. Klassens kropp exekveras i strikt l\u00e4ge \u00e4ven utan att anv\u00e4nda <code>'strict mode'<\/code>-direktivet.<\/p>\n<p>Metoden <code>constructor<\/code> anv\u00e4nds f\u00f6r att skapa och initiera ett objekt som skapats med en klass och k\u00f6rs automatiskt n\u00e4r klassen instansieras. Om du inte definierar en konstrukt\u00f6rsmetod i din klass kommer JavaScript automatiskt att anv\u00e4nda en standardkonstrukt\u00f6r.<\/p>\n<p>En klass kan ut\u00f6kas med hj\u00e4lp av nyckelordet <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\u00f6r kan anv\u00e4nda nyckelordet <code>super<\/code> f\u00f6r att anropa den \u00f6verordnade konstrukt\u00f6ren. Om du skickar ett argument till <code>super()<\/code>-metoden kommer detta argument ocks\u00e5 att finnas tillg\u00e4ngligt i den \u00f6verordnade konstrukt\u00f6rsklassen.<\/p>\n<p>F\u00f6r en djupare genomg\u00e5ng av JavaScript-klasser och flera exempel p\u00e5 anv\u00e4ndning, se \u00e4ven <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Classes\" target=\"_blank\" rel=\"noopener noreferrer\">mdn web docs<\/a>.<\/p>\n<h3>Ut\u00f6ka inbyggda React-klasser<\/h3>\n<p>Klasser anv\u00e4nds ofta f\u00f6r att skapa React-komponenter. Vanligtvis skapar du inte dina egna klasser utan ut\u00f6kar snarare inbyggda React-klasser.<\/p>\n<p>Alla <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>-metod som returnerar ett 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 exemplet ovan \u00e4r <code>Animal<\/code> en klasskomponent. T\u00e4nk p\u00e5 att<\/p>\n<ul>\n<li>Namnet p\u00e5 komponenten m\u00e5ste b\u00f6rja med en stor bokstav<\/li>\n<li>Komponenten m\u00e5ste inneh\u00e5lla uttrycket <code>extends React.Component<\/code>. Detta ger sedan tillg\u00e5ng till metoderna i <code>React.Component<\/code>.<\/li>\n<li>Metoden <code>render()<\/code> returnerar HTML och \u00e4r obligatorisk.<\/li>\n<\/ul>\n<p>N\u00e4r du har skapat din klasskomponent kan du rendera HTML p\u00e5 sidan:<\/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>Bilden nedan visar resultatet p\u00e5 sidan (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 enkel React klass-komponent\" width=\"2162\" height=\"996\"><figcaption id=\"caption-attachment-151880\" class=\"wp-caption-text\">En enkel React klass-komponent<\/figcaption><\/figure>\n<p>Observera dock att det inte \u00e4r <a href=\"https:\/\/react.dev\/reference\/react\/Component#migrating-a-simple-component-from-a-class-to-a-function\" target=\"_blank\" rel=\"noopener noreferrer\">rekommenderat att anv\u00e4nda klasskomponenter i React<\/a> och att det \u00e4r b\u00e4ttre att <a href=\"https:\/\/kinsta.com\/se\/blog\/react-basta-praxis\/#12-make-use-of-functional-components\">definiera komponenter som funktioner<\/a>.<\/p>\n<h2>Nyckelordet this<\/h2>\n<p>I JavaScript \u00e4r nyckelordet <code>this<\/code> en generisk platsh\u00e5llare som vanligtvis anv\u00e4nds inuti objekt, klasser och funktioner. Det h\u00e4nvisar till olika element beroende p\u00e5 sammanhang eller omfattning.<\/p>\n<p><strong><code>this<\/code> kan anv\u00e4ndas i det globala omf\u00e5nget.<\/strong> Om du skriver <code>this<\/code> i webbl\u00e4sarens konsol f\u00e5r du:<\/p>\n<pre><code>Window {window: Window, self: Window, document: document, name: '', location: Location, ...}<\/code><\/pre>\n<p>Du kan komma \u00e5t alla metoder och egenskaper f\u00f6r <code>Window<\/code>-objektet. Om du k\u00f6r <code>this.location<\/code> i webbl\u00e4sarens konsol f\u00e5r du f\u00f6ljande utdata:<\/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\u00e4r du anv\u00e4nder <code>this<\/code> i ett objekt h\u00e4nvisar det till sj\u00e4lva objektet.<\/strong>\u00a0Som ett resultat kan du h\u00e4nvisa till v\u00e4rdena i ett objekt i objektets egna 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>L\u00e5t oss nu f\u00f6rs\u00f6ka anv\u00e4nda <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>Om du inte \u00e4r i strikt l\u00e4ge f\u00e5r du:<\/p>\n<pre><code>Window {window: Window, self: Window, document: document, name: '', location: Location, ...}<\/code><\/pre>\n<p>Men om du anv\u00e4nder <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Strict_mode\" target=\"_blank\" rel=\"noopener noreferrer\">strikt l\u00e4ge<\/a> f\u00e5r du ett annat 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<h3>Funktionen undefined<\/h3>\n<p>I det h\u00e4r fallet returnerar funktionen <code>undefined<\/code>. Det beror p\u00e5 att <code>this<\/code> i en funktion h\u00e4nvisar till dess explicita v\u00e4rde.<\/p>\n<p>S\u00e5 hur anger man <code>this<\/code> explicit i en funktion?<\/p>\n<p>Du kan exempelvis tilldela egenskaper och metoder till funktionen manuellt:<\/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 dessutom anv\u00e4nda metoderna <code>call<\/code>, <code>apply<\/code> och <code>bind<\/code> samt pil-funktioner.<\/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 accepterar ett objekt som <code>this<\/code> refererar till<\/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>Metoden <code>call()<\/code> kan anv\u00e4ndas p\u00e5 vilken funktion som helst och g\u00f6r precis vad den s\u00e4ger: den anropar funktionen.<\/p>\n<p>Dessutom accepterar <code>call()<\/code> alla andra parametrar som definieras 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> accepterar ett objekt som <code>this<\/code> kommer att referera till och en array med funktionens parametrar<\/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 Metoden <code>bind()<\/code> associerar ett objekt med en funktion s\u00e5 att <code>this<\/code> h\u00e4nvisar till objektet n\u00e4r du anropar funktionen.<\/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<h3>Pil-funktioner<\/h3>\n<p>Ett alternativ till de alternativ som diskuteras ovan \u00e4r att anv\u00e4nda <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Functions\/Arrow_functions\" target=\"_blank\" rel=\"noopener noreferrer\">pil-funktioner<\/a>.<\/p>\n<blockquote><p>Pil-funktionsuttryck b\u00f6r endast anv\u00e4ndas f\u00f6r icke-metodfunktioner eftersom de inte har n\u00e5gon egen <code>this<\/code>.<\/p><\/blockquote>\n<p>Detta g\u00f6r pil-funktioner s\u00e4rskilt anv\u00e4ndbara med h\u00e4ndelsehanterare.<\/p>\n<p>Det beror p\u00e5 att &#8221;n\u00e4r koden anropas fr\u00e5n ett inbundet h\u00e4ndelsehanterarattribut, s\u00e4tts dess <code>this<\/code> till det DOM-element d\u00e4r lyssnaren \u00e4r placerad&#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 saker och ting f\u00f6r\u00e4ndras med pil-funktioner eftersom&#8230;<\/p>\n<blockquote><p>&#8230; pil-funktioner skapar <code>this<\/code> baserat p\u00e5 den omfattning som pilfunktionen definieras inom, och <code>this<\/code>-v\u00e4rdet \u00e4ndras inte baserat p\u00e5 hur funktionen anropas.<\/p><\/blockquote>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f Med hj\u00e4lp av pilfunktioner kan du binda kontexten till en h\u00e4ndelsehanterare direkt.<\/strong><\/p>\n<\/aside>\n\n<h3>Binda &#8221;this&#8221; till h\u00e4ndelsehanterare i React<\/h3>\n<p>N\u00e4r det g\u00e4ller React finns det n\u00e5gra s\u00e4tt att se till att h\u00e4ndelsehanteraren inte f\u00f6rlorar sin kontext:<\/p>\n<p><strong>1. Anv\u00e4nda <code>bind()<\/code> inuti 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. Binda kontexten till h\u00e4ndelsehanteraren i konstrukt\u00f6ren:<\/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. Definiera h\u00e4ndelsehanteraren med hj\u00e4lp av pil-funktioner:<\/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. Anv\u00e4nda pil-funktioner i renderingsmetoden:<\/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>Oavsett vilken metod som du v\u00e4ljer visas f\u00f6ljande resultat i webbl\u00e4sarkonsolen n\u00e4r du klickar 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>Tern\u00e4r operat\u00f6r<\/h2>\n<p>Med den <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Operators\/Conditional_Operator\" target=\"_blank\" rel=\"noopener noreferrer\">villkorliga operat\u00f6ren<\/a>\u00a0(eller tern\u00e4ra operat\u00f6ren) kan du skriva enkla villkorliga uttryck i JavaScript. Den tar tre operander:<\/p>\n<ul>\n<li>ett villkor f\u00f6ljt av ett fr\u00e5getecken (<code>?<\/code>),<\/li>\n<li>ett uttryck som ska exekveras om villkoret \u00e4r <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Glossary\/Truthy\" target=\"_blank\" rel=\"noopener noreferrer\">sant<\/a> f\u00f6ljt av ett semikolon (<code>:<\/code>),<\/li>\n<li>ett andra uttryck som ska exekveras om villkoret \u00e4r <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Glossary\/Falsy\" target=\"_blank\" rel=\"noopener noreferrer\">falsy<\/a>.<\/li>\n<\/ul>\n<pre><code class=\"language-javascript\">const drink = personAge &gt;= 18 ? \"Wine\" : \"Juice\";<\/code><\/pre>\n<p>Det \u00e4r dessutom m\u00f6jligt att kedja flera uttryck:<\/p>\n<pre><code class=\"language-javascript\">const drink = personAge &gt;= 18 ? \"Wine\" : personAge &gt;= 6 ? \"Juice\" : \"Milk\";<\/code><\/pre>\n<p>Var dock f\u00f6rsiktig, eftersom kedjning av flera uttryck kan leda till en r\u00f6rig kod som \u00e4r sv\u00e5r att underh\u00e5lla.<\/p>\n<p>Den tern\u00e4ra operat\u00f6ren \u00e4r s\u00e4rskilt anv\u00e4ndbar i React. Detta g\u00e4ller s\u00e4rskilt i din JSX-kod, som endast accepterar uttryck inom hakparenteser.<\/p>\n<p>Du kan exempelvis anv\u00e4nda den tern\u00e4ra operat\u00f6ren f\u00f6r att st\u00e4lla in v\u00e4rdet p\u00e5 ett attribut baserat p\u00e5 ett specifikt villkor:<\/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 ovan kontrollerar vi villkoret <code>person.theme === 'dark'<\/code> f\u00f6r att st\u00e4lla in v\u00e4rdet p\u00e5 <code>style<\/code>-attributet i containern\u00a0<code>div<\/code>.<\/p>\n<h2>Utv\u00e4rdering av kortslutning<\/h2>\n<p>Den logiska operatorn AND (<code>&&<\/code>) utv\u00e4rderar operanderna fr\u00e5n v\u00e4nster till h\u00f6ger och returnerar <code>true<\/code> om och endast om alla operander \u00e4r <code>true<\/code>.<\/p>\n<p>Den logiska AND \u00e4r en <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Operators\/Logical_AND#short-circuit_evaluation\" target=\"_blank\" rel=\"noopener noreferrer\">kortslutningsoperat\u00f6r<\/a>. Varje operand omvandlas till en boolean. Om resultatet av omvandlingen \u00e4r <code>false<\/code>, stannar AND-operat\u00f6ren och returnerar det ursprungliga v\u00e4rdet f\u00f6r den falska operanden. Om alla v\u00e4rden \u00e4r <code>true<\/code>, returneras originalv\u00e4rdet f\u00f6r den sista operanden.<\/p>\n<p><aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f I JavaScript returnerar <code>true &amp;&amp; expression<\/code> alltid <code>expression<\/code>, och <code>false &amp;&amp; expression<\/code> returnerar alltid <code>false<\/code>.<\/p>\n<\/aside>\n<br \/>\n<\/strong><br \/>\nKortslutnings-utv\u00e4rdering \u00e4r en JavaScript-funktion som ofta anv\u00e4nds i React eftersom den g\u00f6r det m\u00f6jligt att mata ut kodblock baserat p\u00e5 specifika villkor. <a href=\"https:\/\/kinsta.com\/blog\/dynamic-blocks\/#add-the-excerpt\">H\u00e4r<\/a> \u00e4r ett exempel:<\/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 ovan\u00a0returnerar React det slutliga JSX-blocket om <code>displayExcerpt<\/code> <strong>AND<\/strong> <code>post.excerpt.rendered<\/code> utv\u00e4rderas till <code>true<\/code>,.<\/p>\n<p><a href=\"https:\/\/legacy.reactjs.org\/docs\/conditional-rendering.html#inline-if-with-logical--operator\" target=\"_blank\" rel=\"noopener noreferrer\">F\u00f6r att sammanfatta<\/a>, &#8221;om villkoret \u00e4r <code>true<\/code>, kommer elementet direkt efter <code>&&<\/code> att visas i utmatningen. Om det \u00e4r <code>false<\/code> kommer React att ignorera och hoppa \u00f6ver det&#8221;.<\/p>\n<h2>Syntax f\u00f6r spridning<\/h2>\n<p>I JavaScript kan du med <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Operators\/Spread_syntax\" target=\"_blank\" rel=\"noopener noreferrer\">spread syntax<\/a> expandera ett itererbart element, t.ex. en array eller ett objekt, till funktionsargument, array-literaler eller objekt-literaler.<\/p>\n<p>I f\u00f6ljande exempel packar vi upp en array i ett funktionsanrop:<\/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 anv\u00e4nda spread-syntaxen f\u00f6r att duplicera en array (\u00e4ven flerdimensionella arrayer) eller f\u00f6r att sammanfoga arrayer. I f\u00f6ljande exempel sammanfogar vi tv\u00e5 arrayer p\u00e5 tv\u00e5 olika s\u00e4tt:<\/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 dessutom anv\u00e4nda spread-syntaxen f\u00f6r att klona eller sl\u00e5 samman tv\u00e5 objekt:<\/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>Destrukturerande tilldelning<\/h2>\n<p>En annan syntaktisk struktur som ofta anv\u00e4nds i React \u00e4r syntaxen f\u00f6r <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Operators\/Destructuring_assignment\" target=\"_blank\" rel=\"noopener noreferrer\">destrukturerande tilldelning<\/a>.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f Med syntaxen f\u00f6r destrukturerande tilldelning kan du packa upp v\u00e4rden fr\u00e5n en array, eller egenskaper fr\u00e5n ett objekt, i separata variabler.<\/strong><\/p>\n<\/aside>\n\n<p>I f\u00f6ljande exempel packar vi upp v\u00e4rden fr\u00e5n en 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>Och h\u00e4r \u00e4r ett enkelt exempel p\u00e5 destruktureringstilldelning med ett 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 dessutom g\u00f6ra \u00e4nnu mer. I f\u00f6ljande exempel packar vi upp vissa egenskaper hos ett objekt och tilldelar de \u00e5terst\u00e5ende egenskaperna till ett annat objekt med hj\u00e4lp av den spridda syntaxen:<\/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 dessutom tilldela v\u00e4rden till en 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>Observera att parenteserna runt tilldelningssatsen kr\u00e4vs n\u00e4r du anv\u00e4nder objektlitter\u00e4r destruktureringstilldelning utan en deklaration.<\/p>\n<p>F\u00f6r en mer djupg\u00e5ende analys av destrukturerande tilldelning, med flera exempel p\u00e5 anv\u00e4ndning, h\u00e4nvisar vi till <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() och reduce()<\/h2>\n<p>JavaScript tillhandah\u00e5ller flera anv\u00e4ndbara metoder som ofta anv\u00e4nds 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> skapar en <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Glossary\/Shallow_copy\" target=\"_blank\" rel=\"noopener noreferrer\">ytlig kopia<\/a> av en del av en given array som filtreras ned till de element som uppfyller villkoren i den angivna funktionen.<\/strong><\/p>\n<\/aside>\n\n<p>I f\u00f6ljande exempel till\u00e4mpar vi filtret p\u00e5 <code>numbers<\/code>-arrayen f\u00f6r att f\u00e5 en array vars element \u00e4r tal st\u00f6rre \u00e4n 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 f\u00f6ljande exempel f\u00e5r vi en array med inl\u00e4gg d\u00e4r ordet &#8221;JavaScript&#8221; ing\u00e5r i titeln:<\/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=\"En array av inl\u00e4gg d\u00e4r titeln inneh\u00e5ller \"JavaScript\u201d\" width=\"1198\" height=\"346\"><figcaption id=\"caption-attachment-152106\" class=\"wp-caption-text\">En array av inl\u00e4gg d\u00e4r titeln inneh\u00e5ller &#8221;JavaScript\u201d<\/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> k\u00f6r en angiven funktion p\u00e5 varje element i en array och returnerar en ny array som fylls med varje element som \u00e4r resultatet av 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 hittar du ofta <code>map()<\/code>-metoden som anv\u00e4nds f\u00f6r att bygga listor. I f\u00f6ljande exempel mappar vi WordPress <code>posts<\/code>-objektet f\u00f6r att <a href=\"https:\/\/kinsta.com\/blog\/dynamic-blocks\/\">bygga en lista \u00f6ver inl\u00e4gg<\/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>reducera()<\/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> k\u00f6r en callback-funktion (<em>reducerare<\/em>) p\u00e5 varje element i en array och skickar det returnerade v\u00e4rdet till n\u00e4sta iteration. Kort sagt, reduceraren &#8221;reducerar&#8221; alla element i en array till ett enda v\u00e4rde.<\/strong><\/p>\n<\/aside>\n\n<p><code>reduce()<\/code> accepterar tv\u00e5 parametrar:<\/p>\n<ul>\n<li>En callback-funktion som ska utf\u00f6ras f\u00f6r varje element i arrayen. Den returnerar ett v\u00e4rde som blir v\u00e4rdet p\u00e5 ackumulatorparametern vid n\u00e4sta anrop. Vid det sista anropet returnerar funktionen det v\u00e4rde som kommer att vara returv\u00e4rdet f\u00f6r <code>reduce()<\/code>.<\/li>\n<li>Ett initialv\u00e4rde som \u00e4r det f\u00f6rsta v\u00e4rdet i den ackumulator som skickas till callback-funktionen.<\/li>\n<\/ul>\n<p>Callback-funktionen tar n\u00e5gra parametrar:<\/p>\n<ul>\n<li>En <strong>ackumulator<\/strong>: Det v\u00e4rde som returnerades fr\u00e5n f\u00f6reg\u00e5ende anrop till callback-funktionen. Vid det f\u00f6rsta anropet s\u00e4tts detta till ett initialt v\u00e4rde om det anges. Annars tar den v\u00e4rdet f\u00f6r det f\u00f6rsta elementet i arrayen.<\/li>\n<li>V\u00e4rdet f\u00f6r det <strong>aktuella elementet<\/strong>: V\u00e4rdet s\u00e4tts till det f\u00f6rsta elementet i arrayen (<code>array[0]<\/code>) om ett initialv\u00e4rde har angetts. Annars tar den v\u00e4rdet av det andra elementet (<code>array[1]<\/code>).<\/li>\n<li>Det <strong>aktuella indexet<\/strong> \u00e4r indexpositionen f\u00f6r det aktuella elementet.<\/li>\n<\/ul>\n<p>Ett exempel kommer att g\u00f6ra allt tydligare.<\/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<h3>Vad som h\u00e4nder vid varje iteration<\/h3>\n<p>L\u00e5t oss ta reda p\u00e5 i detalj vad som h\u00e4nder vid varje iteration. G\u00e5 tillbaka till f\u00f6reg\u00e5ende exempel och \u00e4ndra <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>F\u00f6ljande bild visar utdata i webbl\u00e4sarkonsolen:<\/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=\"Anv\u00e4nder reduce() med initialv\u00e4rdet satt till 5\" width=\"1172\" height=\"388\"><figcaption id=\"caption-attachment-152231\" class=\"wp-caption-text\">Anv\u00e4nder reduce() med initialv\u00e4rdet satt till 5<\/figcaption><\/figure>\n<p>L\u00e5t oss nu ta reda p\u00e5 vad som h\u00e4nder utan parametern <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=\"Anv\u00e4nda reduce() utan initialv\u00e4rde\" width=\"1176\" height=\"360\"><figcaption id=\"caption-attachment-152232\" class=\"wp-caption-text\">Anv\u00e4nda reduce() utan initialv\u00e4rde<\/figcaption><\/figure>\n<p>Fler exempel och anv\u00e4ndningsomr\u00e5den diskuteras p\u00e5 webbplatsen <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>.<\/p>\n<h2>Export och import<\/h2>\n<p>Fr\u00e5n och med ECMAScript 2015 (ES6) \u00e4r det m\u00f6jligt att exportera v\u00e4rden fr\u00e5n en JavaScript-modul och importera dem till ett annat skript. Du kommer att anv\u00e4nda import och export i stor utstr\u00e4ckning i dina React-applikationer. Det \u00e4r d\u00e4rf\u00f6r viktigt att ha en god f\u00f6rst\u00e5else f\u00f6r hur de fungerar.<\/p>\n<p>F\u00f6ljande kod skapar en funktionell komponent. Den f\u00f6rsta raden importerar 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 anv\u00e4nde nyckelordet <code>import<\/code> f\u00f6ljt av det namn som vi vill tilldela det vi importerar. D\u00e4refter kommer namnet p\u00e5 det paket som vi vill installera eftersom det h\u00e4nvisas till i filen <strong>package.json<\/strong>.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f <code>import<\/code>-deklarationer anv\u00e4nds f\u00f6r att <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Statements\/import\" target=\"_blank\" rel=\"noopener noreferrer\">importera skrivskyddade levande bindningar<\/a> som exporteras av andra moduler<\/strong>.<\/p>\n<\/aside>\n\n<p>Observera att vi i <code>MyComponent()<\/code>-funktionen ovan anv\u00e4nde n\u00e5gra av de JavaScript-funktioner som diskuterades i de tidigare avsnitten. Vi inkluderade egenskapsv\u00e4rden i hakparenteser och tilldelade v\u00e4rdet f\u00f6r <code>style<\/code>-egenskapen med hj\u00e4lp av syntaxen f\u00f6r villkorliga operat\u00f6rer.<\/p>\n<p>Skriptet avslutas med export av v\u00e5r anpassade komponent.<\/p>\n<p>Nu n\u00e4r vi vet lite mer om import och export ska vi ta en n\u00e4rmare titt p\u00e5 hur de fungerar.<\/p>\n<h3>Exportera<\/h3>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f Deklarationen <code>export<\/code> anv\u00e4nds f\u00f6r att exportera v\u00e4rden fr\u00e5n en JavaScript-modul.<\/strong><\/p>\n<\/aside>\n\n<p>Varje React-modul kan ha <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Statements\/export#description\" target=\"_blank\" rel=\"noopener noreferrer\">tv\u00e5 olika typer av export<\/a>: <strong>namngiven export<\/strong> och <strong>standardexport<\/strong>.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f Du kan ha flera namngivna exporter per modul, men bara en standardexport.<\/strong><\/p>\n<\/aside>\n\n<p>Det g\u00e5r exempelvis att exportera flera funktioner samtidigt med ett enda <code>export<\/code>-statement:<\/p>\n<pre><code class=\"language-javascript\">export { MyComponent, MyVariable };<\/code><\/pre>\n<p>Du kan dessutom exportera enskilda 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 bara ha en enda standardexport:<\/p>\n<pre><code class=\"language-javascript\">export default MyComponent;<\/code><\/pre>\n<p>Det g\u00e5r \u00e4ven att anv\u00e4nda standardexport f\u00f6r enskilda funktioner:<\/p>\n<pre><code class=\"language-javascript\">export default function() { ... }\nexport default class { ... }<\/code><\/pre>\n<h3>Importera<\/h3>\n<p>N\u00e4r komponenten har exporterats kan den importeras till en annan fil, exempelvis en <strong>index.js<\/strong>-fil, tillsammans med andra 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 ovan anv\u00e4nde vi importdeklarationen p\u00e5 flera olika s\u00e4tt.<\/p>\n<p>F\u00f6r de tv\u00e5 f\u00f6rsta raderna tilldelade vi de importerade resurserna ett namn. I den tredje raden tilldelade vi inte ett namn utan importerade helt enkelt filen <strong>.\/index.css<\/strong>. Den sista <code>import<\/code>-satsen importerar filen <strong>.\/MyComponent<\/strong> och tilldelar ett namn.<\/p>\n<p>L\u00e5t oss ta reda p\u00e5 skillnaderna mellan dessa importer.<\/p>\n<p>Det finns totalt fyra typer av import:<\/p>\n<p><strong>Namngiven import<\/strong><\/p>\n<pre><code class=\"language-javascript\">import { MyFunction, MyVariable } from \".\/my-module\";<\/code><\/pre>\n<p><strong>Standardimport<\/strong><\/p>\n<pre><code class=\"language-javascript\">import MyComponent from \".\/MyComponent\";<\/code><\/pre>\n<p><strong>Import av namnrymd<\/strong><\/p>\n<pre><code class=\"language-javascript\">import * as name from \"my-module\";<\/code><\/pre>\n<p><strong>Import av bieffekter<\/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>-sats utan hakparenteser anv\u00e4nds f\u00f6r att importera standard <code>export<\/code>. En <code>import<\/code>-sats med hakparenteser anv\u00e4nds f\u00f6r att importera en namngiven <code>export<\/code>.<\/strong><\/p>\n<\/aside>\n\n<p>N\u00e4r du har lagt till n\u00e5gra stilar i din <strong>index.css<\/strong> b\u00f6r ditt kort se ut som i bilden nedan, d\u00e4r du dessutom kan se motsvarande HTML-kod:<\/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=\"En enkel React-komponent\" width=\"1806\" height=\"678\"><figcaption id=\"caption-attachment-152317\" class=\"wp-caption-text\">En enkel React-komponent<\/figcaption><\/figure>\n<p>Observera att <code>import<\/code>-deklarationer endast kan anv\u00e4ndas i moduler p\u00e5 toppniv\u00e5 (inte inuti funktioner, klasser osv.).<\/p>\n<p>F\u00f6r en mer omfattande \u00f6versikt \u00f6ver <code>import<\/code>-statements och <code>export<\/code>-statements kan du dessutom kontrollera f\u00f6ljande resurser:<\/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 webbdokumentation)<\/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 webbdokument)<\/li>\n<li><a href=\"https:\/\/react.dev\/learn\/importing-and-exporting-components\" target=\"_blank\" rel=\"noopener noreferrer\">Importera och exportera 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\">N\u00e4r ska jag anv\u00e4nda lockiga hakparenteser f\u00f6r ES6 import?<\/a> (Stack Overflow)<\/li>\n<\/ul>\n\n<h2>Sammanfattning<\/h2>\n<p>React \u00e4r ett av de mest <a href=\"https:\/\/kinsta.com\/se\/blog\/javascript-biblioteken\/#reactjs\">popul\u00e4ra JavaScript-biblioteken<\/a> idag och \u00e4r en av de mest efterfr\u00e5gade <a href=\"https:\/\/kinsta.com\/se\/blog\/genomsnittliga-lonen-webbutvecklare\/\">f\u00e4rdigheterna<\/a> inom <a href=\"https:\/\/kinsta.com\/blog\/frontend-developer\/\">webbutveckling<\/a>.<\/p>\n<p>Med React \u00e4r det exempelvis m\u00f6jligt att skapa dynamiska webbapplikationer och avancerade gr\u00e4nssnitt. Att skapa stora, dynamiska och interaktiva applikationer kan vara enkelt tack vare dess \u00e5teranv\u00e4ndbara komponenter.<\/p>\n<p>Men React \u00e4r ett JavaScript-bibliotek. En god f\u00f6rst\u00e5else f\u00f6r de viktigaste funktionerna i JavaScript \u00e4r d\u00e4rf\u00f6r avg\u00f6rande f\u00f6r att starta din resa med React. Med detta i \u00e5tanke har vi samlat n\u00e5gra av de JavaScript-funktioner som oftast anv\u00e4nds i React p\u00e5 ett och samma st\u00e4lle. Att beh\u00e4rska dessa funktioner kommer att ge dig ett f\u00f6rspr\u00e5ng p\u00e5 din <a href=\"https:\/\/kinsta.com\/se\/blog\/bast-react-handledningar\/\">React-inl\u00e4rningsresa<\/a>.<\/p>\n<p>Och n\u00e4r det g\u00e4ller <a href=\"https:\/\/kinsta.com\/se\/blog\/typer-av-utvecklare\/\">webbutveckling<\/a> \u00e4r steget fr\u00e5n JS\/React till WordPress v\u00e4ldigt enkelt.<\/p>\n<p>Nu \u00e4r det din tur, vilka JavaScript-funktioner tycker du \u00e4r mest anv\u00e4ndbara i React-utveckling? Har vi missat n\u00e5got viktigt som du skulle ha velat se p\u00e5 v\u00e5r lista? Dela dina tankar med oss i kommentarerna nedan.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>React \u00e4r idag ett av de mest popul\u00e4ra JavaScript-biblioteken. Det kan exempelvis anv\u00e4ndas f\u00f6r att skapa dynamiska och responsiva applikationer, ger b\u00e4ttre prestanda och kan dessutom &#8230;<\/p>\n","protected":false},"author":36,"featured_media":53372,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[360,397,637],"topic":[784,808,823,824],"class_list":["post-53371","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-javascript","tag-javascript-libraries","tag-react","topic-javascript-sjalvstudier","topic-react","topic-sprak-for-webbutveckling","topic-verktyg-for-webbutveckling"],"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>Viktiga JavaScript-funktioner f\u00f6r att bem\u00e4stra React - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Sl\u00e4pp loss den fulla potentialen av dynamisk app-utveckling med React! Uppt\u00e4ck de viktigaste JavaScript-funktionerna f\u00f6r att komma ig\u00e5ng 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\/se\/blog\/javascript-react\/\" \/>\n<meta property=\"og:locale\" content=\"sv_SE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Viktiga JavaScript-funktioner f\u00f6r att bem\u00e4stra React\" \/>\n<meta property=\"og:description\" content=\"Sl\u00e4pp loss den fulla potentialen av dynamisk app-utveckling med React! Uppt\u00e4ck de viktigaste JavaScript-funktionerna f\u00f6r att komma ig\u00e5ng nu.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/se\/blog\/javascript-react\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstasweden\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-06-01T09:04:09+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-09-21T10:02:09+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/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=\"Sl\u00e4pp loss den fulla potentialen av dynamisk app-utveckling med React! Uppt\u00e4ck de viktigaste JavaScript-funktionerna f\u00f6r att komma ig\u00e5ng nu.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2023\/06\/javascript-and-react-01.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@carlodaniele\" \/>\n<meta name=\"twitter:site\" content=\"@kinsta_se\" \/>\n<meta name=\"twitter:label1\" content=\"Skriven av\" \/>\n\t<meta name=\"twitter:data1\" content=\"Carlo Daniele\" \/>\n\t<meta name=\"twitter:label2\" content=\"Ber\u00e4knad l\u00e4stid\" \/>\n\t<meta name=\"twitter:data2\" content=\"34 minuter\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/se\/blog\/javascript-react\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/se\/blog\/javascript-react\/\"},\"author\":{\"name\":\"Carlo Daniele\",\"@id\":\"https:\/\/kinsta.com\/se\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63\"},\"headline\":\"Viktiga JavaScript-funktioner f\u00f6r att bem\u00e4stra React\",\"datePublished\":\"2023-06-01T09:04:09+00:00\",\"dateModified\":\"2023-09-21T10:02:09+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/se\/blog\/javascript-react\/\"},\"wordCount\":5620,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/se\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/se\/blog\/javascript-react\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2023\/06\/javascript-and-react-01.jpg\",\"keywords\":[\"JavaScript\",\"JavaScript Libraries\",\"React\"],\"inLanguage\":\"sv-SE\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/se\/blog\/javascript-react\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/se\/blog\/javascript-react\/\",\"url\":\"https:\/\/kinsta.com\/se\/blog\/javascript-react\/\",\"name\":\"Viktiga JavaScript-funktioner f\u00f6r att bem\u00e4stra React - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/se\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/se\/blog\/javascript-react\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/se\/blog\/javascript-react\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2023\/06\/javascript-and-react-01.jpg\",\"datePublished\":\"2023-06-01T09:04:09+00:00\",\"dateModified\":\"2023-09-21T10:02:09+00:00\",\"description\":\"Sl\u00e4pp loss den fulla potentialen av dynamisk app-utveckling med React! Uppt\u00e4ck de viktigaste JavaScript-funktionerna f\u00f6r att komma ig\u00e5ng nu.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/se\/blog\/javascript-react\/#breadcrumb\"},\"inLanguage\":\"sv-SE\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/se\/blog\/javascript-react\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"sv-SE\",\"@id\":\"https:\/\/kinsta.com\/se\/blog\/javascript-react\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2023\/06\/javascript-and-react-01.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2023\/06\/javascript-and-react-01.jpg\",\"width\":3042,\"height\":1521},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/se\/blog\/javascript-react\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/se\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript-sj\u00e4lvstudier\",\"item\":\"https:\/\/kinsta.com\/se\/topics\/javascript-sjalvstudier\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Viktiga JavaScript-funktioner f\u00f6r att bem\u00e4stra React\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/se\/#website\",\"url\":\"https:\/\/kinsta.com\/se\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Snabba, s\u00e4kra, premium hosting-l\u00f6sningar\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/se\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/se\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"sv-SE\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/se\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/se\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"sv-SE\",\"@id\":\"https:\/\/kinsta.com\/se\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/se\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstasweden\/\",\"https:\/\/x.com\/kinsta_se\",\"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\/se\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63\",\"name\":\"Carlo Daniele\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"sv-SE\",\"@id\":\"https:\/\/kinsta.com\/se\/#\/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\/se\/blog\/author\/carlodaniele\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Viktiga JavaScript-funktioner f\u00f6r att bem\u00e4stra React - Kinsta\u00ae","description":"Sl\u00e4pp loss den fulla potentialen av dynamisk app-utveckling med React! Uppt\u00e4ck de viktigaste JavaScript-funktionerna f\u00f6r att komma ig\u00e5ng 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\/se\/blog\/javascript-react\/","og_locale":"sv_SE","og_type":"article","og_title":"Viktiga JavaScript-funktioner f\u00f6r att bem\u00e4stra React","og_description":"Sl\u00e4pp loss den fulla potentialen av dynamisk app-utveckling med React! Uppt\u00e4ck de viktigaste JavaScript-funktionerna f\u00f6r att komma ig\u00e5ng nu.","og_url":"https:\/\/kinsta.com\/se\/blog\/javascript-react\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstasweden\/","article_published_time":"2023-06-01T09:04:09+00:00","article_modified_time":"2023-09-21T10:02:09+00:00","og_image":[{"width":3042,"height":1521,"url":"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2023\/06\/javascript-and-react-01.jpg","type":"image\/jpeg"}],"author":"Carlo Daniele","twitter_card":"summary_large_image","twitter_description":"Sl\u00e4pp loss den fulla potentialen av dynamisk app-utveckling med React! Uppt\u00e4ck de viktigaste JavaScript-funktionerna f\u00f6r att komma ig\u00e5ng nu.","twitter_image":"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2023\/06\/javascript-and-react-01.jpg","twitter_creator":"@carlodaniele","twitter_site":"@kinsta_se","twitter_misc":{"Skriven av":"Carlo Daniele","Ber\u00e4knad l\u00e4stid":"34 minuter"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/se\/blog\/javascript-react\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/se\/blog\/javascript-react\/"},"author":{"name":"Carlo Daniele","@id":"https:\/\/kinsta.com\/se\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63"},"headline":"Viktiga JavaScript-funktioner f\u00f6r att bem\u00e4stra React","datePublished":"2023-06-01T09:04:09+00:00","dateModified":"2023-09-21T10:02:09+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/se\/blog\/javascript-react\/"},"wordCount":5620,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/se\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/se\/blog\/javascript-react\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2023\/06\/javascript-and-react-01.jpg","keywords":["JavaScript","JavaScript Libraries","React"],"inLanguage":"sv-SE","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/se\/blog\/javascript-react\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/se\/blog\/javascript-react\/","url":"https:\/\/kinsta.com\/se\/blog\/javascript-react\/","name":"Viktiga JavaScript-funktioner f\u00f6r att bem\u00e4stra React - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/se\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/se\/blog\/javascript-react\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/se\/blog\/javascript-react\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2023\/06\/javascript-and-react-01.jpg","datePublished":"2023-06-01T09:04:09+00:00","dateModified":"2023-09-21T10:02:09+00:00","description":"Sl\u00e4pp loss den fulla potentialen av dynamisk app-utveckling med React! Uppt\u00e4ck de viktigaste JavaScript-funktionerna f\u00f6r att komma ig\u00e5ng nu.","breadcrumb":{"@id":"https:\/\/kinsta.com\/se\/blog\/javascript-react\/#breadcrumb"},"inLanguage":"sv-SE","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/se\/blog\/javascript-react\/"]}]},{"@type":"ImageObject","inLanguage":"sv-SE","@id":"https:\/\/kinsta.com\/se\/blog\/javascript-react\/#primaryimage","url":"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2023\/06\/javascript-and-react-01.jpg","contentUrl":"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2023\/06\/javascript-and-react-01.jpg","width":3042,"height":1521},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/se\/blog\/javascript-react\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/se\/"},{"@type":"ListItem","position":2,"name":"JavaScript-sj\u00e4lvstudier","item":"https:\/\/kinsta.com\/se\/topics\/javascript-sjalvstudier\/"},{"@type":"ListItem","position":3,"name":"Viktiga JavaScript-funktioner f\u00f6r att bem\u00e4stra React"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/se\/#website","url":"https:\/\/kinsta.com\/se\/","name":"Kinsta\u00ae","description":"Snabba, s\u00e4kra, premium hosting-l\u00f6sningar","publisher":{"@id":"https:\/\/kinsta.com\/se\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/se\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"sv-SE"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/se\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/se\/","logo":{"@type":"ImageObject","inLanguage":"sv-SE","@id":"https:\/\/kinsta.com\/se\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/se\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstasweden\/","https:\/\/x.com\/kinsta_se","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\/se\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63","name":"Carlo Daniele","image":{"@type":"ImageObject","inLanguage":"sv-SE","@id":"https:\/\/kinsta.com\/se\/#\/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\/se\/blog\/author\/carlodaniele\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/se\/wp-json\/wp\/v2\/posts\/53371","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/se\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/se\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/se\/wp-json\/wp\/v2\/users\/36"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/se\/wp-json\/wp\/v2\/comments?post=53371"}],"version-history":[{"count":15,"href":"https:\/\/kinsta.com\/se\/wp-json\/wp\/v2\/posts\/53371\/revisions"}],"predecessor-version":[{"id":53470,"href":"https:\/\/kinsta.com\/se\/wp-json\/wp\/v2\/posts\/53371\/revisions\/53470"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/se\/wp-json\/kinsta\/v1\/posts\/53371\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/se\/wp-json\/kinsta\/v1\/posts\/53371\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/se\/wp-json\/kinsta\/v1\/posts\/53371\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/se\/wp-json\/kinsta\/v1\/posts\/53371\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/se\/wp-json\/kinsta\/v1\/posts\/53371\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/se\/wp-json\/kinsta\/v1\/posts\/53371\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/se\/wp-json\/kinsta\/v1\/posts\/53371\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/se\/wp-json\/kinsta\/v1\/posts\/53371\/translations\/es"},{"embeddable":true,"hreflang":"sv","title":"Swedish","href":"https:\/\/kinsta.com\/se\/wp-json\/kinsta\/v1\/posts\/53371\/translations\/se"},{"embeddable":true,"hreflang":"da","title":"Danish","href":"https:\/\/kinsta.com\/se\/wp-json\/kinsta\/v1\/posts\/53371\/translations\/dk"},{"href":"https:\/\/kinsta.com\/se\/wp-json\/kinsta\/v1\/posts\/53371\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/se\/wp-json\/wp\/v2\/media\/53372"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/se\/wp-json\/wp\/v2\/media?parent=53371"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/se\/wp-json\/wp\/v2\/tags?post=53371"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/se\/wp-json\/wp\/v2\/topic?post=53371"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}