{"id":66569,"date":"2023-06-01T11:01:59","date_gmt":"2023-06-01T09:01:59","guid":{"rendered":"https:\/\/kinsta.com\/es\/?p=66569&#038;preview=true&#038;preview_id=66569"},"modified":"2023-08-25T11:47:05","modified_gmt":"2023-08-25T09:47:05","slug":"javascript-react","status":"publish","type":"post","link":"https:\/\/kinsta.com\/es\/blog\/javascript-react\/","title":{"rendered":"Funciones de JavaScript que Debes Conocer para Dominar React"},"content":{"rendered":"<p>Hoy en d\u00eda, <a href=\"https:\/\/kinsta.com\/es\/secciones\/react\/\">React<\/a> es una de las <a href=\"https:\/\/kinsta.com\/es\/blog\/bibliotecas-javascript\/\">bibliotecas de JavaScript<\/a> m\u00e1s populares. Se puede utilizar para crear aplicaciones din\u00e1micas y con capacidad de respuesta, permite un mejor rendimiento y se puede ampliar f\u00e1cilmente. La l\u00f3gica subyacente se basa en componentes que pueden reutilizarse en diferentes contextos, reduciendo la necesidad de escribir el mismo c\u00f3digo varias veces. En resumen, con React puedes crear <a href=\"https:\/\/kinsta.com\/es\/secciones\/react\/\">aplicaciones eficientes y potentes<\/a>.<\/p>\n<p>As\u00ed que nunca ha habido mejor momento para aprender a crear aplicaciones React.<\/p>\n<p>Sin embargo, sin una s\u00f3lida comprensi\u00f3n de algunas caracter\u00edsticas clave de<a href=\"https:\/\/kinsta.com\/javascript\/\"> JavaScript<\/a>, crear aplicaciones React puede resultar dif\u00edcil o incluso imposible.<\/p>\n<p>Por esta raz\u00f3n, hemos recopilado una lista de caracter\u00edsticas y conceptos de JavaScript que necesitas conocer antes de empezar con React. Cuanto mejor entiendas estos conceptos, m\u00e1s f\u00e1cil te resultar\u00e1 crear aplicaciones React profesionales.<\/p>\n<p>Una vez dicho esto, en este art\u00edculo hablaremos de lo siguiente:<\/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 y ECMAScript<\/h2>\n<p><a href=\"https:\/\/kinsta.com\/es\/blog\/que-es-javascript\/\">JavaScript<\/a> es un popular lenguaje de programaci\u00f3n que se utiliza junto con <a href=\"https:\/\/kinsta.com\/es\/blog\/que-es-el-html\/\">HTML<\/a> y CSS para crear p\u00e1ginas web din\u00e1micas. Mientras que HTML se utiliza para crear la estructura de una p\u00e1gina web y CSS para crear el estilo y la disposici\u00f3n de sus elementos, JavaScript es el lenguaje utilizado para a\u00f1adir comportamiento a la p\u00e1gina, es decir, para crear funcionalidad e interactividad.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f JavaScript fue desarrollado por Brendan Eich de Netscape Communications en 1995 con el objetivo de a\u00f1adir interactividad a las p\u00e1ginas web en el navegador Netscape Navigator.<\/strong><\/p>\n<\/aside>\n\n<p>Desde entonces, el lenguaje ha sido adoptado por los principales navegadores y se redact\u00f3 un documento para describir la forma en que deb\u00eda funcionar JavaScript: <a href=\"https:\/\/en.wikipedia.org\/wiki\/ECMAScript\" target=\"_blank\" rel=\"noopener noreferrer\">el est\u00e1ndar ECMAScript<\/a>.<\/p>\n<p>Desde 2015, se publica anualmente una actualizaci\u00f3n del est\u00e1ndar ECMAScript, por lo que cada a\u00f1o se a\u00f1aden nuevas funciones a JavaScript.<\/p>\n<p><a href=\"https:\/\/262.ecma-international.org\/6.0\/\" target=\"_blank\" rel=\"noopener noreferrer\">ECMAScript 2015<\/a> fue la sexta versi\u00f3n del est\u00e1ndar, por lo que tambi\u00e9n se conoce como <strong>ES6<\/strong>. Las siguientes versiones est\u00e1n marcadas en progresi\u00f3n, por lo que nos referimos a ECMAScript 2016 como ES7, a ECMAScript 2017 como ES8, y as\u00ed sucesivamente.<\/p>\n<p>Debido a la frecuencia con la que se a\u00f1aden nuevas funciones al est\u00e1ndar, es posible que algunas no sean compatibles con todos los navegadores. Entonces, \u00bfc\u00f3mo puedes asegurarte de que las \u00faltimas funciones de JavaScript que a\u00f1adas a tu aplicaci\u00f3n JS funcionen como se espera en todos los navegadores web?<\/p>\n<p>Tienes tres opciones:<\/p>\n<ol>\n<li>Esperar a que los principales navegadores soporten las nuevas funciones. Pero si es absolutamente necesaria esa incre\u00edble nueva funci\u00f3n JS para tu aplicaci\u00f3n, esta no es una opci\u00f3n.<\/li>\n<li>Utilizar un Polyfill, que es \u00abun fragmento de c\u00f3digo (normalmente JavaScript en la Web) utilizado para proporcionar una funcionalidad moderna en navegadores antiguos que no la soportan de forma nativa\u00bb (ver tambi\u00e9n <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Glossary\/Polyfill\" target=\"_blank\" rel=\"noopener noreferrer\">mdn web docs<\/a>).<\/li>\n<li>Utilizar un transpilador de JavaScript como <a href=\"https:\/\/babeljs.io\/docs\/\" target=\"_blank\" rel=\"noopener noreferrer\">Babel<\/a> o <a href=\"https:\/\/github.com\/google\/traceur-compiler\" target=\"_blank\" rel=\"noopener noreferrer\">Traceur<\/a>, que convierten el c\u00f3digo ECMAScript 2015+ en una versi\u00f3n de JavaScript compatible con todos los navegadores.<\/li>\n<\/ol>\n\n<h2>Sentencias vs Expresiones<\/h2>\n<p>Comprender la diferencia entre sentencias y expresiones es esencial a la hora de crear aplicaciones React. Volvamos por un momento a los conceptos b\u00e1sicos de la programaci\u00f3n.<\/p>\n<p>Un programa inform\u00e1tico es una lista de instrucciones que debe ejecutar un ordenador. Estas instrucciones se denominan <strong>sentencias<\/strong>.<\/p>\n<p>A diferencia de las sentencias, las <strong>expresiones<\/strong> son fragmentos de c\u00f3digo que producen un valor. En una sentencias, una expresi\u00f3n es una parte que devuelve un valor y normalmente la vemos a la derecha de un signo igual.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f Una sentencia es un bloque de c\u00f3digo que hace algo.<\/strong><\/p>\n<\/aside>\n\n<p>Mientras que:<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f Una expresi\u00f3n es un fragmento de c\u00f3digo que produce un valor.<\/strong><\/p>\n<\/aside>\n\n<p>Las expresiones de JavaScript pueden ser bloques o l\u00edneas de c\u00f3digo que suelen terminar con punto y coma o entre llaves.<\/p>\n<p>Aqu\u00ed tienes un ejemplo sencillo de sentencia en JavaScript:<\/p>\n<pre><code class=\"language-js\">document.getElementById(\"hello\").innerHTML = \"Hello World!\";<\/code><\/pre>\n<p>La sentencia anterior escribe <code>\"Hello World!\"<\/code> en un elemento DOM con <code>id=\"hello\"<\/code>.<\/p>\n<p>Como ya hemos dicho, las expresiones producen un valor o son ellas mismas un valor. Considera el siguiente ejemplo:<\/p>\n<pre><code class=\"language-js\">msg = document.getElementById(\"hello\").value;<\/code><\/pre>\n<p><code>document.getElementById(\"hello\").value<\/code> es una expresi\u00f3n ya que devuelve un valor.<\/p>\n<p>Un ejemplo adicional deber\u00eda ayudar a aclarar la diferencia entre expresiones y sentencias:<\/p>\n<pre><code class=\"language-js\">const msg = \"Hello World!\";\nfunction sayHello( msg ) {\n\tconsole.log( msg );\n}<\/code><\/pre>\n<p>En el ejemplo anterior<\/p>\n<ul>\n<li>la primera l\u00ednea es una sentencia, donde <code>\"Hello World!\"<\/code> es una expresi\u00f3n,<\/li>\n<li>la declaraci\u00f3n de la funci\u00f3n es una sentencia, donde el par\u00e1metro <code>msg<\/code> que se pasa a la funci\u00f3n es una expresi\u00f3n,<\/li>\n<li>la l\u00ednea que imprime el mensaje en la consola es una sentencia, donde de nuevo el par\u00e1metro <code>msg<\/code> es una expresi\u00f3n.<\/li>\n<\/ul>\n<h3>Por Qu\u00e9 Son Importantes las Expresiones en React<\/h3>\n<p>Cuando <a href=\"https:\/\/kinsta.com\/es\/blog\/practicas-de-react\/\">construyes una aplicaci\u00f3n React<\/a>, puedes <a href=\"https:\/\/react.dev\/learn\/javascript-in-jsx-with-curly-braces\" target=\"_blank\" rel=\"noopener noreferrer\">inyectar expresiones JavaScript en tu c\u00f3digo JSX<\/a>. Por ejemplo, puedes pasar una variable, escribir un manejador de eventos o una condici\u00f3n. Para ello, debes incluir tu c\u00f3digo JS entre llaves.<\/p>\n<p>Por ejemplo, puedes pasar una variable<\/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>En resumen, las llaves indican a tu transpilador que procese el c\u00f3digo entre llaves como c\u00f3digo JS. Todo lo que viene antes de la etiqueta de apertura <code>&lt;p&gt;<\/code> y despu\u00e9s de la etiqueta de cierre <code>&lt;\/p&gt;<\/code> es c\u00f3digo JavaScript normal. Todo lo que hay dentro de las etiquetas de apertura <code>&lt;p&gt;<\/code> y de cierre <code>&lt;\/p&gt;<\/code> se procesa como c\u00f3digo JSX.<\/p>\n<p>Aqu\u00ed tienes otro ejemplo:<\/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>Tambi\u00e9n puedes pasar un objeto:<\/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>Y a continuaci\u00f3n tienes un ejemplo m\u00e1s completo:<\/p>\n<pre><code class=\"language-jsx\">render(){\n\tconst person = {\n\t\tname: 'Carlo',\n\t\tavatar: 'https:\/\/en.gravatar.com\/userimage\/954861\/fc68a728946aac04f8531c3a8742ac22?size=original',\n\t\tdescription: 'Content Writer',\n\t\ttheme: {\n\t\t\tboxShadow: '0 4px 8px 0 rgba(0,0,0,0.2)', width: '200px'\n\t\t}\n\t}\n\n\treturn (\n\t\t&lt;div style={person.theme}&gt;\n\t\t\t&lt;img\n\t\t\t\tsrc={person.avatar}\n\t\t\t\talt={person.name}\n\t\t\t\tstyle={ { width: '100%' } }\n\t\t\t\/&gt;\n\t\t\t&lt;div style={ { padding: '2px 16px' } }&gt;\n\t\t\t\t&lt;h3&gt;{person.name}&lt;\/h3&gt;\n\t\t\t\t&lt;p&gt;{person.description}.&lt;\/p&gt;\n\t\t\t&lt;\/div&gt;\n\t\t&lt;\/div&gt;\n\t);\n}<\/code><\/pre>\n<p>Observa las dobles llaves en los atributos <code>style<\/code> de los elementos <code>img<\/code> y <code>div<\/code>. Utilizamos dobles llaves para pasar dos objetos que contienen estilos de tarjeta y de imagen.<\/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=\"Una tarjeta de ejemplo creada con React\" width=\"1360\" height=\"694\"><figcaption id=\"caption-attachment-152320\" class=\"wp-caption-text\">Una tarjeta de ejemplo creada con React<\/figcaption><\/figure>\n<p>Te habr\u00e1s dado cuenta de que en todos los ejemplos anteriores hemos incluido expresiones JavaScript en <a href=\"https:\/\/kinsta.com\/es\/blog\/que-es-jsx\/\">JSX<\/a>.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f JSX s\u00f3lo acepta expresiones JavaScript entre llaves. No puedes escribir sentencias dentro de tu c\u00f3digo JSX.<\/strong><\/p>\n<p><strong>Esto incluye<\/strong><\/p>\n<ul>\n<li><strong>Variables<\/strong><\/li>\n<li><strong>Cadenas con comillas<\/strong><\/li>\n<li><strong>Llamadas a funciones<\/strong><\/li>\n<li><strong>Objetos<\/strong><\/li>\n<li><strong>Expresiones condicionales<\/strong><\/li>\n<\/ul>\n<p><\/p>\n<\/aside>\n\n<h2>Inmutabilidad en React<\/h2>\n<p>Mutabilidad e Inmutabilidad son <a href=\"https:\/\/en.wikipedia.org\/wiki\/Immutable_object\" target=\"_blank\" rel=\"noopener noreferrer\">dos conceptos clave<\/a> en la programaci\u00f3n funcional y orientada a objetos.<\/p>\n<p>Inmutabilidad significa que un valor no puede cambiarse despu\u00e9s de haberse creado. Mutabilidad significa, por supuesto, lo contrario.<\/p>\n<p>En Javascript, los <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Glossary\/Primitive\">valores primitivos<\/a> son <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Glossary\/Immutable\" target=\"_blank\" rel=\"noopener noreferrer\">inmutables<\/a>, es decir, una vez creado un valor primitivo, no se puede modificar. Por el contrario, los arrays y los objetos son mutables porque sus propiedades y elementos pueden modificarse sin reasignar un nuevo valor.<\/p>\n<p>Hay varias razones para utilizar objetos inmutables en JavaScript:<\/p>\n<ul>\n<li>Mejora del rendimiento<\/li>\n<li>Menor consumo de memoria<\/li>\n<li>Seguridad de hilos<\/li>\n<li>Programaci\u00f3n y depuraci\u00f3n m\u00e1s sencillas<\/li>\n<\/ul>\n<p>Siguiendo el patr\u00f3n de la inmutabilidad, una vez asignada una variable u objeto, no se puede volver a asignar ni modificar. Cuando necesites modificar datos, debes crear una copia de los mismos y modificar su contenido, dejando inalterado el contenido original.<\/p>\n<p><strong>La inmutabilidad<\/strong> tambi\u00e9n es un concepto clave en React.<\/p>\n<p>La <a href=\"https:\/\/react.dev\/reference\/react\/Component#state\">documentaci\u00f3n de React<\/a> afirma<\/p>\n<blockquote><p>El estado de un componente de clase est\u00e1 disponible como <code>this.state<\/code>. El campo de estado debe ser un objeto. No mutes el estado directamente. Si deseas cambiar el estado, llama a <code>setState<\/code> con el nuevo estado.<\/p><\/blockquote>\n<p>Cada vez que cambia el estado de un componente, React calcula si debe volver a renderizar el componente y actualizar el DOM virtual. Si React no tuviera constancia del estado anterior, no podr\u00eda determinar si debe volver a renderizar el componente o no. La documentaci\u00f3n de React proporciona un <a href=\"https:\/\/react.dev\/learn\/updating-objects-in-state#treat-state-as-read-only\" target=\"_blank\" rel=\"noopener noreferrer\">ejemplo excelente de esto<\/a>.<\/p>\n<p>\u00bfQu\u00e9 funciones de JavaScript podemos utilizar para garantizar la inmutabilidad del objeto de estado en React? \u00a1Averig\u00fc\u00e9moslo!<\/p>\n<h3>Declarar variables<\/h3>\n<p>Tienes tres formas de declarar una variable en JavaScript: <code>var<\/code>, <code>let<\/code>, y <code>const<\/code>.<\/p>\n<p>La <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Statements\/var#var_hoisting\">sentencia <code>var<\/code><\/a> existe desde el principio de JavaScript. Se utiliza para declarar una variable de \u00e1mbito global o de \u00e1mbito de funci\u00f3n, inicializ\u00e1ndola opcionalmente con un valor.<\/p>\n<p>Cuando declaras una variable utilizando <code>var<\/code>, puedes volver a declarar y actualizar esa variable tanto en el \u00e1mbito global como en el local. El siguiente c\u00f3digo est\u00e1 permitido:<\/p>\n<pre><code class=\"language-js\">\/\/ Declare a <span id=\"urn:enhancement-200b31f8-47a6-409f-94bf-e06c446a2727\" class=\"textannotation\">variable<\/span>\nvar msg = \"Hello!\";\n\n\/\/ Redeclare the same <span id=\"urn:enhancement-479fad04-89a9-41e1-a6c3-8eab27a7d5d3\" class=\"textannotation\">variable<\/span>\nvar msg = \"Goodbye!\"\n\n\/\/ Update the <span id=\"urn:enhancement-9ae0e28c-f365-4624-a3ee-f9fac279ca10\" class=\"textannotation\">variable<\/span>\nmsg = \"Hello again!\"<\/code><\/pre>\n<p>Las declaraciones <code>var<\/code> se procesan antes de que se ejecute ning\u00fan c\u00f3digo. Como resultado, declarar una variable en cualquier parte del c\u00f3digo equivale a declararla al principio. Este comportamiento se denomina <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Glossary\/Hoisting\" target=\"_blank\" rel=\"noopener noreferrer\">hoisting<\/a> (elevaci\u00f3n).<\/p>\n<p>Cabe se\u00f1alar que s\u00f3lo se eleva la declaraci\u00f3n de la variable, no la inicializaci\u00f3n, que s\u00f3lo se produce cuando <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Glossary\/Control_flow\" target=\"_blank\" rel=\"noopener noreferrer\">el flujo de control<\/a> llega a la sentencia de asignaci\u00f3n. Hasta ese momento, la variable es <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>El \u00e1mbito de una <code>var<\/code> declarada en una funci\u00f3n JS es <a href=\"https:\/\/hacks.mozilla.org\/2015\/07\/es6-in-depth-let-and-const\/\" target=\"_blank\" rel=\"noopener noreferrer\">todo el cuerpo de esa funci\u00f3n<\/a>.<\/p>\n<p>Esto significa que la variable no se define a nivel de bloque, sino a nivel de toda la funci\u00f3n. Esto conlleva una serie de problemas que pueden hacer que tu c\u00f3digo JavaScript tenga errores y sea dif\u00edcil de mantener.<\/p>\n<p>Para solucionar estos problemas, ES6 introdujo la <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Statements\/let\" target=\"_blank\" rel=\"noopener noreferrer\">palabra clave<code>let<\/code><\/a>.<\/p>\n<blockquote><p>La declaraci\u00f3n <code>let<\/code> declara una variable local <strong>de \u00e1mbito de bloque<\/strong>, inicializ\u00e1ndola opcionalmente con un valor.<\/p><\/blockquote>\n<p>\u00bfCu\u00e1les son las ventajas de <code>let<\/code> sobre <code>var<\/code>? Aqu\u00ed tienes algunas:<\/p>\n<ul>\n<li><strong><code>let<\/code> <\/strong> <strong>declara una variable al \u00e1mbito de una sentencia de bloque<\/strong>, mientras que <code>var<\/code> declara una variable global o localmente a toda una funci\u00f3n, independientemente del \u00e1mbito del bloque.<\/li>\n<li><strong>Las variables globales de <code>let<\/code> no son propiedades del objeto <code>window<\/code> <\/strong>. No puedes acceder a ellas con <code>window.variableName<\/code>.<\/li>\n<li><strong><code>let<\/code> s\u00f3lo es accesible una vez que se ha llegado a su declaraci\u00f3n.<\/strong>\u00a0La variable no se inicializa hasta que el flujo de control llega a la l\u00ednea de c\u00f3digo donde se declara (las declaraciones let <strong>no son hoisted<\/strong>).<\/li>\n<li><strong>Volver a declarar una variable con <code>let<\/code> lanza un <code>SyntaxError<\/code>.<\/strong><\/li>\n<\/ul>\n<p>Dado que las variables declaradas con <code>var<\/code> no se pueden incluir en un bloque, si defines una variable con <code>var<\/code> en un bucle o dentro de una sentencia <code>if<\/code>, se puede acceder a ella desde fuera del bloque, lo que puede provocar errores en el c\u00f3digo.<\/p>\n<p>El c\u00f3digo del primer ejemplo se ejecuta sin errores. Ahora sustituye <code>var<\/code> por <code>let<\/code> en el bloque de c\u00f3digo visto anteriormente:<\/p>\n<pre><code class=\"language-js\">console.log(msg);\nlet msg = \"Hello!\";\nconsole.log(msg);<\/code><\/pre>\n<p>En el segundo ejemplo, utilizar <code>let<\/code> en lugar de <code>var<\/code> produce un <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=\"Uncaught ReferenceError en Chrome\" width=\"1176\" height=\"222\"><figcaption id=\"caption-attachment-151741\" class=\"wp-caption-text\">Uncaught ReferenceError en Chrome<\/figcaption><\/figure>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f Por tanto, como regla general, siempre debes utilizar <code>let<\/code> en lugar de <code>var<\/code>.<\/strong><\/p>\n<\/aside>\n\n<p>ES6 tambi\u00e9n introduce una tercera palabra clave <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Statements\/const\"><code>const<\/code><\/a>.<\/p>\n<p><code>const<\/code> es bastante similar a <code>let<\/code>, pero con una diferencia clave:<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f A las variables declaradas con <code>const<\/code> no se les puede asignar un valor excepto en el punto en el que se declaran.<\/strong><\/p>\n<\/aside>\n\n<p>Considera el siguiente ejemplo:<\/p>\n<pre><code class=\"language-js\">const MAX_VALUE = 1000;\nMAX_VALUE = 2000;<\/code><\/pre>\n<p>El c\u00f3digo anterior generar\u00eda el siguiente <a href=\"https:\/\/kinsta.com\/es\/blog\/errores-en-javascript\/#typeerror\">TypeError<\/a>:<\/p>\n<figure id=\"attachment_151743\" aria-describedby=\"caption-attachment-151743\" style=\"width: 1012px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151743 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/uncaught-type-error-assignment-to-constant-variable.jpg\" alt=\"Uncaught TypeError: Asignaci\u00f3n a variable constante en Google Chrome\" width=\"1012\" height=\"268\"><figcaption id=\"caption-attachment-151743\" class=\"wp-caption-text\"><em>Error de tipo no detectado: Asignaci\u00f3n a variable constante<\/em> en Google Chrome<\/figcaption><\/figure>\n<p>Adem\u00e1s<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f No puedes declarar un <code>const<\/code> sin darle un valor.<\/strong><\/p>\n<\/aside>\n\n<p>Declarar un <code>const<\/code> sin darle un valor arrojar\u00eda el siguiente <code>SyntaxError<\/code> (consulta tambi\u00e9n <a href=\"https:\/\/hacks.mozilla.org\/2015\/07\/es6-in-depth-let-and-const\/\">ES6 En Profundidad: let y const<\/a>):<\/p>\n<figure id=\"attachment_151746\" aria-describedby=\"caption-attachment-151746\" style=\"width: 1200px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151746 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/uncaught-syntax-error-missing-initializer-in-const-declaration.jpg\" alt=\"Uncaught SyntaxError: Falta inicializador en la declaraci\u00f3n en Chrome\" width=\"1200\" height=\"214\"><figcaption id=\"caption-attachment-151746\" class=\"wp-caption-text\"><em>Uncaught SyntaxError: Falta inicializador en la declaraci\u00f3n<\/em> const en Chrome<\/figcaption><\/figure>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f Una constante no puede volver a declararse y su valor no puede cambiarse mediante reasignaci\u00f3n.<\/strong><\/p>\n<\/aside>\n\n<p>Pero si una constante es un array o un objeto, puedes editar propiedades o elementos dentro de ese array u objeto.<\/p>\n<p>Por ejemplo, puedes cambiar, a\u00f1adir y eliminar elementos de un array:<\/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>Pero no puedes reasignar el array:<\/p>\n<pre><code class=\"language-js\">const cities = [\"London\", \"New York\", \"Sydney\"];\n\ncities = [\"Athens\", \"Barcelona\", \"Naples\"];<\/code><\/pre>\n<p>El c\u00f3digo anterior dar\u00eda lugar a un <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/TypeError\" target=\"_blank\" rel=\"noopener noreferrer\">TypeError<\/a>.<\/p>\n<figure id=\"attachment_151747\" aria-describedby=\"caption-attachment-151747\" style=\"width: 1166px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151747 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/uncaught-type-error-uncaught-type-error-assignment-to-constant-variable-2.jpg\" alt=\"Uncaught TypeError: Asignaci\u00f3n a variable constante.\" width=\"1166\" height=\"227\"><figcaption id=\"caption-attachment-151747\" class=\"wp-caption-text\"><em>Uncaught TypeError: Asignaci\u00f3n a variable constante<\/em> en Chrome<\/figcaption><\/figure>\n<p>Puedes a\u00f1adir, reasignar y eliminar propiedades y m\u00e9todos de objetos:<\/p>\n<pre><code class=\"language-js\">\/\/ Declare a constant obj\nconst post = {\n\tid: 1,\n\tname: 'JavaScript is awesome',\n\texcerpt: 'JavaScript is an awesome scripting language',\n\tcontent: 'JavaScript is a scripting language that enables you to create dynamically updating content.'\n};\n\n\/\/ add a new property\npost.slug = \"javascript-is-awesome\";\n\n\/\/ Reassign property\npost.id = 5;\n\n\/\/ Delete a property\ndelete post.excerpt;\n\nconsole.log(post);\n\n\/\/ {id: 5, name: 'JavaScript is awesome', content: 'JavaScript is a scripting language that enables you to create dynamically updating content.', slug: 'javascript-is-awesome'}<\/code><\/pre>\n<p>Pero no puedes reasignar el propio objeto. El siguiente c\u00f3digo pasar\u00eda por un <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 En React, declarar variables con <code>const<\/code> es lo predeterminado. <code>let<\/code> debe utilizarse cuando <code>const<\/code> no sea apropiado. Se desaconseja encarecidamente utilizar <code>var<\/code>.<\/strong><\/p>\n<\/aside>\n\n<h3 id=\"objectfreeze\" class=\"has-anchor-hash\">Object.freeze()<\/h3>\n<p>Ahora estamos de acuerdo en que utilizar <code>const<\/code> no siempre garantiza una inmutabilidad fuerte (especialmente cuando se trabaja con objetos y arrays). Entonces, \u00bfc\u00f3mo puedes implementar el patr\u00f3n de inmutabilidad en tus aplicaciones React?<\/p>\n<p>En primer lugar, cuando quieras impedir que se modifiquen los elementos de un array o las propiedades de un objeto, puedes utilizar el <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Object\/freeze\" target=\"_blank\" rel=\"noopener noreferrer\">m\u00e9todo est\u00e1tico <code>Object.freeze()<\/code><\/a>.<\/p>\n<blockquote><p>Congelar un objeto impide las ampliaciones y hace que las propiedades existentes no se puedan escribir ni configurar. Un objeto congelado ya no se puede modificar: no se pueden a\u00f1adir nuevas propiedades, no se pueden eliminar las existentes, no se puede cambiar su enumerabilidad, configurabilidad, escritura o valor, y no se puede reasignar el prototipo del objeto. <code>freeze()<\/code> devuelve el mismo objeto que se le pas\u00f3.<\/p><\/blockquote>\n<p>Cualquier intento de a\u00f1adir, cambiar o eliminar una propiedad fallar\u00e1, ya sea silenciosamente o lanzando un <code>TypeError<\/code>, m\u00e1s com\u00fanmente en <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Strict_mode\" target=\"_blank\" rel=\"noopener noreferrer\">modo estricto<\/a>.<\/p>\n<p>Puedes utilizar <code>Object.freeze()<\/code> de esta forma:<\/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>Si ahora intentas a\u00f1adir una propiedad, recibir\u00e1s un <code>Uncaught TypeError<\/code>:<\/p>\n<pre><code class=\"language-js\">\/\/ Add a new property\npost.slug = \"javascript-is-awesome\"; \/\/ Uncaught TypeError<\/code><\/pre>\n<figure id=\"attachment_151753\" aria-describedby=\"caption-attachment-151753\" style=\"width: 1256px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151753 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/uncaught-type-error-object-is-not-extensible.jpg\" alt=\"Uncaught TypeError: no se puede definir la propiedad \"slug\": El objeto no es extensible\" width=\"1256\" height=\"300\"><figcaption id=\"caption-attachment-151753\" class=\"wp-caption-text\"><em>Uncaught TypeError: no se puede definir la propiedad \u00abslug\u00bb:<\/em> El <em>objeto no es extensible<\/em> en Firefox<\/figcaption><\/figure>\n<p>Cuando intentas reasignar una propiedad, obtienes otro tipo de <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=\"Reasignar una propiedad de s\u00f3lo lectura lanza un Uncaught TypeError\" width=\"1198\" height=\"288\"><figcaption id=\"caption-attachment-151865\" class=\"wp-caption-text\">Reasignar una propiedad de s\u00f3lo lectura lanza un Uncaught TypeError<\/figcaption><\/figure>\n<figure id=\"attachment_151868\" aria-describedby=\"caption-attachment-151868\" style=\"width: 1190px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151868 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/uncaught-type-error-cannot-assign-to-read-only-property.jpg\" alt=\"Uncaught TypeError: No se puede asignar a la propiedad de s\u00f3lo lectura en Chrome\" width=\"1190\" height=\"254\"><figcaption id=\"caption-attachment-151868\" class=\"wp-caption-text\"><em>Uncaught TypeError: No se puede asignar a la propiedad de s\u00f3lo lectura &#8216;id&#8217; del objeto &#8216;#&lt;Object&gt;&#8217;<\/em> en Google Chrome<\/figcaption><\/figure>\n<p>Tambi\u00e9n puedes intentar eliminar una propiedad. El resultado ser\u00e1 otro <code>TypeError<\/code>:<\/p>\n<pre><code class=\"language-js\">\/\/ Delete a property\ndelete post.excerpt; \/\/ Uncaught TypeError<\/code><\/pre>\n<figure id=\"attachment_151869\" aria-describedby=\"caption-attachment-151869\" style=\"width: 1370px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151869 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/uncaught-type-error-property-excerpt-is-non-configurable-and-cant-be-deleted-firefox.jpg\" alt=\"Uncaught TypeError: la propiedad \"excerpt\" no es configurable y no se puede eliminar en Firefox\" width=\"1370\" height=\"298\"><figcaption id=\"caption-attachment-151869\" class=\"wp-caption-text\"><em>Uncaught TypeError: la propiedad \u00abexcerpt\u00bb no es configurable y no se puede eliminar<\/em> en Firefox<\/figcaption><\/figure>\n<h2>Template Literals<\/h2>\n<p>Cuando necesitas combinar cadenas con la salida de expresiones en JavaScript, sueles utilizar el operador de suma <code>+<\/code>. Sin embargo, tambi\u00e9n puedes utilizar una funci\u00f3n de JavaScript que te permite incluir expresiones dentro de cadenas sin utilizar el operador de adici\u00f3n: <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> son un tipo especial de cadenas delimitadas por caracteres de acento grave (<code>`<\/code>) o backtick.<\/p>\n<p>En los literales de plantilla puedes incluir marcadores de posici\u00f3n, que son expresiones incrustadas delimitadas por un car\u00e1cter del d\u00f3lar y entre llaves.<\/p>\n<p>Aqu\u00ed tienes un ejemplo:<\/p>\n<pre><code class=\"language-js\">const align = 'left';\nconsole.log(`This string is ${ align }-aligned`);<\/code><\/pre>\n<p>Las cadenas y los marcadores de posici\u00f3n se pasan a una funci\u00f3n predeterminada que realiza una interpolaci\u00f3n de cadenas para sustituir los marcadores de posici\u00f3n y concatenar las partes en una sola cadena. Tambi\u00e9n puedes sustituir la funci\u00f3n por defecto por una funci\u00f3n personalizada.<\/p>\n<p>Puedes utilizar Template Literals para:<\/p>\n<p><strong>Cadenas de varias l\u00edneas<\/strong>: los caracteres de nueva l\u00ednea forman parte del literal de plantilla.<\/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>Interpolaci\u00f3n de cadenas:<\/strong> Sin Template Literals, s\u00f3lo puedes utilizar el operador de suma para combinar la salida de expresiones con cadenas. Mira el siguiente ejemplo:<\/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>Es un poco confuso, \u00bfverdad? Pero puedes escribir ese c\u00f3digo de forma m\u00e1s legible y f\u00e1cil de mantener utilizando 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>Pero ten en cuenta que hay una <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Template_literals#string_interpolation\" target=\"_blank\" rel=\"noopener noreferrer\">diferencia entre ambas sintaxis<\/a>:<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f Template literals convierten directamente sus expresiones a cadenas de texto, mientras que la suma convierte primero sus operandos a primitivos.<\/strong><\/p>\n<\/aside>\n\n<p>Los Template Literals se prestan a varios usos. En el siguiente ejemplo, utilizamos un <a href=\"#ternary-operator\" target=\"_blank\" rel=\"noopener noreferrer\">operador ternario<\/a> para asignar un valor a un atributo <code>class<\/code>.<\/p>\n<pre><code class=\"language-js\">const page = 'archive';\nconsole.log(`class=${ page === 'archive' <code>?<\/code> 'archive' : 'single' }`);<\/code><\/pre>\n<p>A continuaci\u00f3n, realizamos un c\u00e1lculo sencillo:<\/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>Tambi\u00e9n es posible anidar Template Literals incluy\u00e9ndolos dentro de un marcador de posici\u00f3n <code>${expression}<\/code> (pero <a href=\"https:\/\/dev.to\/remrkabledev\/nesting-template-literals-a-recommended-approach-2jgj\" target=\"_blank\" rel=\"noopener noreferrer\">utiliza las plantillas anidadas con precauci\u00f3n<\/a> porque las estructuras de cadena complejas pueden ser dif\u00edciles de leer y mantener).<\/p>\n<p><strong>Tagged templates<\/strong>: Como hemos mencionado antes, tambi\u00e9n es posible definir una funci\u00f3n personalizada para realizar la concatenaci\u00f3n de cadenas. Este tipo de Template Literal se denomina <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Template_literals#tagged_templates\" target=\"_blank\" rel=\"noopener noreferrer\">Tagged Template<\/a>.<\/p>\n<blockquote><p>Las etiquetas te permiten analizar template literals con una funci\u00f3n. El primer argumento de una funci\u00f3n de etiqueta contiene un array de valores de cadena. Los argumentos restantes est\u00e1n relacionados con las expresiones.<\/p><\/blockquote>\n<p>Las etiquetas te permiten analizar template literals con una funci\u00f3n personalizada. El primer argumento de esta funci\u00f3n es un array de las cadenas incluidas en el Template Literal, los dem\u00e1s argumentos son las expresiones.<\/p>\n<p>Puedes crear una funci\u00f3n personalizada para realizar cualquier tipo de operaci\u00f3n sobre los argumentos de la plantilla y devolver la cadena manipulada. Aqu\u00ed tienes un ejemplo muy b\u00e1sico de <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Template_literals#tagged_templates\" target=\"_blank\" rel=\"noopener noreferrer\">tagged template<\/a>:<\/p>\n<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>El c\u00f3digo anterior imprime los elementos del array <code>strings<\/code> y <code>tags<\/code> y luego pone en may\u00fasculas los caracteres de la cadena antes de imprimir la salida en la consola del navegador.<\/p>\n<h2 id=\"arrow-functions\" class=\"has-anchor-hash\">Arrow Functions<\/h2>\n<p>Las Arrow functions son una alternativa a las funciones an\u00f3nimas (funciones sin nombre) en JavaScript, pero con algunas diferencias y limitaciones.<\/p>\n<p>Las siguientes declaraciones son ejemplos v\u00e1lidos de Arrow Functions:<\/p>\n<pre><code class=\"language-javascript\">\/\/ Arrow function without parameters\nconst myFunction = () =&gt; expression;\n\n\/\/ Arrow function with one parameter\nconst myFunction = param =&gt; expression;\n\n\/\/ Arrow function with one parameter\nconst myFunction = (param) =&gt; expression;\n\n\/\/ Arrow function with more parameters\nconst myFunction = (param1, param2) =&gt; expression;\n\n\/\/ Arrow function without parameters\nconst myFunction = () =&gt; {\n\tstatements\n}\n\n\/\/ Arrow function with one parameter\nconst myFunction = param =&gt; {\n\tstatements\n}\n\n\/\/ Arrow function with more parameters\nconst myFunction = (param1, param2) =&gt; {\n\tstatements\n}<\/code><\/pre>\n<p>Puedes omitir las llaves si s\u00f3lo pasas un par\u00e1metro a la funci\u00f3n. Si pasas dos o m\u00e1s par\u00e1metros, debes encerrarlos entre llaves. Aqu\u00ed tienes un ejemplo:<\/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>Las Arrow Functions de una l\u00ednea devuelven un valor por defecto. Si utilizas la sintaxis de varias l\u00edneas, tendr\u00e1s que devolver manualmente un valor:<\/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 Normalmente utilizar\u00e1s Arrow Function en aplicaciones React, a menos que haya una raz\u00f3n espec\u00edfica para no utilizarlas.<\/strong><\/p>\n<\/aside>\n\n<p>Una diferencia clave a tener en cuenta entre las funciones normales y las Arrow Functions es que las Arrow Functions no tienen sus propios enlaces a la palabra clave <code>this<\/code>. Si intentas utilizar <code>this<\/code> en una Arrow Functions, se saldr\u00e1 del \u00e1mbito de la funci\u00f3n.<\/p>\n<p>Para una descripci\u00f3n m\u00e1s detallada de las Arrow Functions y ejemplos de uso, lee tambi\u00e9n <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>Clases<\/h2>\n<p>Las <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Learn\/JavaScript\/Objects\/Classes_in_JavaScript\">clases en JavaScript<\/a> son un tipo especial de funci\u00f3n para crear objetos que utilizan el mecanismo de herencia protot\u00edpica.<\/p>\n<p>Seg\u00fan la <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Inheritance_and_the_prototype_chain\">documentaci\u00f3n web de mdn<\/a><\/p>\n<blockquote><p>En lo que a herencia se refiere, JavaScript s\u00f3lo tiene una estructura: objetos. Cada objeto tiene una propiedad privada (referida como su [[Prototype]]) que mantiene un enlace a otro objeto llamado su prototipo. Ese objeto prototipo tiene su propio prototipo, y as\u00ed sucesivamente hasta que se alcanza un objeto cuyo prototipo es <code>null<\/code><\/p><\/blockquote>\n<p>Al igual que con las funciones, tienes dos formas de definir una clase:<\/p>\n<ul>\n<li>Una expresi\u00f3n de clase<\/li>\n<li>Una declaraci\u00f3n de clase<\/li>\n<\/ul>\n<p>Puedes utilizar la palabra clave <code>class<\/code> para definir una clase dentro de una expresi\u00f3n, como se muestra en el siguiente ejemplo:<\/p>\n<pre><code class=\"language-javascript\">const Circle = class {\n\tconstructor(radius) {\n\t\tthis.radius = Number(radius);\n\t}\n\tarea() {\n\t\treturn Math.PI * Math.pow(this.radius, 2);\n\t}\n\tcircumference() {\n\t\treturn Math.PI * this.radius * 2;\n\t}\n}\nconsole.log('Circumference: ' + new Circle(10).circumference()); \/\/ 62.83185307179586\nconsole.log('Area: ' + new Circle(10).area()); \/\/ 314.1592653589793<\/code><\/pre>\n<p>Una clase tiene un cuerpo, que es el c\u00f3digo incluido entre llaves. Aqu\u00ed definir\u00e1s el constructor y los m\u00e9todos, que tambi\u00e9n se denominan miembros de la clase. El cuerpo de la clase se ejecuta en modo estricto incluso sin utilizar la directiva <code>'strict mode'<\/code>.<\/p>\n<p>El m\u00e9todo <code>constructor<\/code> se utiliza para crear e inicializar un objeto creado con una clase y se ejecuta autom\u00e1ticamente al instanciar la clase. Si no defines un m\u00e9todo constructor en tu clase, JavaScript utilizar\u00e1 autom\u00e1ticamente un constructor por defecto.<\/p>\n<p>Una clase puede ampliarse utilizando la palabra clave <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>Un constructor puede utilizar la palabra clave <code>super<\/code> para llamar al constructor padre. Si pasas un argumento al m\u00e9todo <code>super()<\/code>, este argumento tambi\u00e9n estar\u00e1 disponible en la clase del constructor padre.<\/p>\n<p>Para profundizar en las clases de JavaScript y ver varios ejemplos de uso, consulta tambi\u00e9n los <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Classes\" target=\"_blank\" rel=\"noopener noreferrer\">documentos web de mdn<\/a>.<\/p>\n<p>Las clases se utilizan a menudo para crear componentes React. Normalmente, no crear\u00e1s tus propias clases, sino que ampliar\u00e1s las clases React incorporadas.<\/p>\n<p>Todas las <a href=\"https:\/\/react.dev\/reference\/react\/Component#defining-a-class-component\">clases de React<\/a> tienen un m\u00e9todo <code>render()<\/code> que devuelve un elemento React:<\/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>En el ejemplo anterior, <code>Animal<\/code> es un componente de clase. Ten en cuenta que<\/p>\n<ul>\n<li>El nombre del componente debe empezar por may\u00fascula<\/li>\n<li>El componente debe incluir la expresi\u00f3n <code>extends React.Component<\/code>. Esto da acceso a los m\u00e9todos de <code>React.Component<\/code>.<\/li>\n<li>El m\u00e9todo <code>render()<\/code> devuelve el HTML y es obligatorio.<\/li>\n<\/ul>\n<p>Una vez que hayas creado tu componente de clase, puedes renderizar el HTML en la p\u00e1gina:<\/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>La imagen de abajo muestra el resultado en la p\u00e1gina (Puedes verlo <a href=\"https:\/\/codepen.io\/carlodaniele\/pen\/LYgPvEP\">en acci\u00f3n en 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=\"Un simple componente de clase React\" width=\"2162\" height=\"996\"><figcaption id=\"caption-attachment-151880\" class=\"wp-caption-text\">Un simple componente de clase React<\/figcaption><\/figure>\n<p>Ten en cuenta, sin embargo, que <a href=\"https:\/\/react.dev\/reference\/react\/Component#migrating-a-simple-component-from-a-class-to-a-function\">no se recomienda utilizar componentes de clase en React<\/a> y que es <a href=\"https:\/\/kinsta.com\/es\/blog\/practicas-de-react\/#12-make-use-of-functional-components\">preferible definir los componentes como funciones<\/a>.<\/p>\n<h2>La Palabra Clave \u2018this\u2019<\/h2>\n<p>En JavaScript, la palabra clave <code>this<\/code> es un marcador de posici\u00f3n gen\u00e9rico que suele utilizarse dentro de objetos, clases y funciones, y hace referencia a distintos elementos en funci\u00f3n del contexto o \u00e1mbito.<\/p>\n<p><strong><code>this<\/code> puede utilizarse en el \u00e1mbito global.<\/strong> Si escribes <code>this<\/code> en la consola de tu navegador, obtendr\u00e1s:<\/p>\n<pre><code>Window {window: Window, self: Window, document: document, name: '', location: Location, ...}<\/code><\/pre>\n<p>Puedes acceder a cualquiera de los m\u00e9todos y propiedades del objeto <code>Window<\/code>. Por tanto, si ejecutas <code>this.location<\/code> en la consola de tu navegador, obtendr\u00e1s la siguiente salida:<\/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>Cuando utilizas <code>this<\/code> en un objeto, se refiere al propio objeto.<\/strong> De este modo, puedes hacer referencia a los valores de un objeto en los m\u00e9todos del propio objeto:<\/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>Ahora vamos a intentar utilizar <code>this<\/code> en una funci\u00f3n:<\/p>\n<pre><code class=\"language-javascript\">const useThis = function () {\n\treturn this;\n}\nconsole.log( useThis() );<\/code><\/pre>\n<p>Si no est\u00e1s en modo estricto, obtendr\u00e1s<\/p>\n<pre><code>Window {window: Window, self: Window, document: document, name: '', location: Location, ...}<\/code><\/pre>\n<p>Pero si invocas el <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Strict_mode\">modo estricto<\/a>, obtendr\u00e1s un resultado diferente:<\/p>\n<pre><code class=\"language-javascript\">const doSomething = function () {\n\t'use strict';\n\treturn this;\n}\nconsole.log( doSomething() );<\/code><\/pre>\n<p>En este caso, la funci\u00f3n devuelve <code>undefined<\/code>. Eso es porque <code>this<\/code> en una funci\u00f3n se refiere a su valor expl\u00edcito.<\/p>\n<p>Entonces, \u00bfc\u00f3mo establecer expl\u00edcitamente <code>this<\/code> en una funci\u00f3n?<\/p>\n<p>En primer lugar, puedes asignar manualmente propiedades y m\u00e9todos a la funci\u00f3n:<\/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>Pero tambi\u00e9n puedes utilizar los m\u00e9todos <code>call<\/code>, <code>apply<\/code> y <code>bind<\/code>, as\u00ed como las funciones de flecha.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f El m\u00e9todo <code>call()<\/code> de una funci\u00f3n acepta un objeto al que se refiere <code>this<\/code>.<\/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>El m\u00e9todo <code>call()<\/code> puede utilizarse en cualquier funci\u00f3n y hace exactamente lo que dice: llama a la funci\u00f3n.<\/p>\n<p>Adem\u00e1s, <code>call()<\/code> acepta cualquier otro par\u00e1metro definido en la funci\u00f3n:<\/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 El m\u00e9todo <code>apply()<\/code> acepta un objeto al que har\u00e1 referencia <code>this<\/code> y un array de par\u00e1metros de la funci\u00f3n.<\/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 El m\u00e9todo <code>bind()<\/code> asocia un objeto a una funci\u00f3n, de modo que siempre que invoques la funci\u00f3n, <code>this<\/code> haga referencia al objeto.<\/strong><\/p>\n<\/aside>\n\n<pre><code class=\"language-javascript\">const post = { id: 5, title: 'Awesome post', category: 'JavaScript' };\nconst doSomething = function() {\n\treturn `${this.id} - ${this.title} - ${this.category}`;\n}\nconst bindRender = doSomething.bind( post );\nconsole.log( bindRender() );<\/code><\/pre>\n<p>Una alternativa a las opciones comentadas anteriormente es utilizar <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Functions\/Arrow_functions\" target=\"_blank\" rel=\"noopener noreferrer\">arrow functions<\/a>.<\/p>\n<blockquote><p>Las expresiones arrow function s\u00f3lo deben utilizarse para funciones que no sean m\u00e9todos, porque no tienen su propio <code>this<\/code>.<\/p><\/blockquote>\n<p>Esto hace que las funciones flecha sean especialmente \u00fatiles con los manejadores de eventos.<\/p>\n<p>Esto se debe a que \u00abcuando se llama al c\u00f3digo desde un atributo de controlador de eventos inline, su <code>this<\/code> se establece en el elemento DOM en el que est\u00e1 colocado el oyente\u00bb (consulta la <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Operators\/this#this_in_inline_event_handlers\" target=\"_blank\" rel=\"noopener noreferrer\">documentaci\u00f3n web de mdn<\/a>).<\/p>\n<p>Pero las cosas cambian con las arrow functions porque&#8230;<\/p>\n<blockquote><p>&#8230; las arrow functions establecen <code>this<\/code> en funci\u00f3n del \u00e1mbito en el que se define la arrow function, y el valor de <code>this<\/code> no cambia en funci\u00f3n de c\u00f3mo se invoque la funci\u00f3n.<\/p><\/blockquote>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f El uso de arrow functions te permite vincular directamente el contexto a un manejador de eventos.<\/strong><\/p>\n<\/aside>\n\n<h3>Vinculaci\u00f3n de &#8216;this&#8217; a Manejadores de Eventos en React<\/h3>\n<p>Cuando se trata de React, tienes varias formas de asegurarte de que el manejador de eventos no pierde su contexto:<\/p>\n<p><strong>1. Utilizando <code>bind()<\/code> dentro del m\u00e9todo render:<\/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. Vinculando el contexto al manejador de eventos en el constructor:<\/strong><\/p>\n<pre><code class=\"language-javascript\">import React, { Component } from 'react';\nclass MyComponent extends Component {\n\tstate = { message: 'Hello World!' };\n\n\tconstructor(props) {\n\t\tsuper(props);\n\t\tthis.showMessage = this.showMessage.bind( this );\n\t}\n\n\tshowMessage(){\n\t\tconsole.log( 'This refers to: ', this );\n\t\tconsole.log( 'The message is: ', this.state.message );\n\t}\n\n\trender(){\n\t\treturn( &lt;button onClick={ this.showMessage }&gt;Show message from state!&lt;\/button&gt; );\n\t}\n}\nexport default MyComponent;<\/code><\/pre>\n<p><strong>3. Definiendo el manejador de eventos usando arrow functions:<\/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. Utilizando arrow functions en el m\u00e9todo de representaci\u00f3n:<\/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>Sea cual sea el m\u00e9todo que elijas, cuando pulses el bot\u00f3n, la consola del navegador mostrar\u00e1 la siguiente salida:<\/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>Operador Ternario<\/h2>\n<p>El <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Operators\/Conditional_Operator\">operador condicional<\/a> (u operador ternario) te permite escribir expresiones condicionales sencillas en JavaScript. Toma tres operandos:<\/p>\n<ul>\n<li>una condici\u00f3n seguida de un signo de interrogaci\u00f3n (<code>?<\/code>),<\/li>\n<li>una expresi\u00f3n a ejecutar si la condici\u00f3n es <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Glossary\/Truthy\" target=\"_blank\" rel=\"noopener noreferrer\">verdadera<\/a> seguida de un punto y coma (<code>:<\/code>),<\/li>\n<li>una segunda expresi\u00f3n a ejecutar si la condici\u00f3n es <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Glossary\/Falsy\" target=\"_blank\" rel=\"noopener noreferrer\">falsa<\/a>.<\/li>\n<\/ul>\n<pre><code class=\"language-javascript\">const drink = personAge &gt;= 18 ? \"Wine\" : \"Juice\";<\/code><\/pre>\n<p>Tambi\u00e9n es posible encadenar varias expresiones:<\/p>\n<pre><code class=\"language-javascript\">const drink = personAge &gt;= 18 ? \"Wine\" : personAge &gt;= 6 ? \"Juice\" : \"Milk\";<\/code><\/pre>\n<p>Pero ten cuidado, porque encadenar varias expresiones puede dar lugar a un c\u00f3digo desordenado y dif\u00edcil de mantener.<\/p>\n<p>El operador ternario es especialmente \u00fatil en React, sobre todo en tu c\u00f3digo JSX, que s\u00f3lo acepta expresiones entre llaves.<\/p>\n<p>Por ejemplo, puedes utilizar el operador ternario para establecer el valor de un atributo en funci\u00f3n de una condici\u00f3n espec\u00edfica:<\/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>En el c\u00f3digo anterior, comprobamos la condici\u00f3n <code>person.theme === 'dark'<\/code> para establecer el valor del atributo <code>style<\/code> del contenedor <code>div<\/code>.<\/p>\n<h2>Short Circuit Evaluation (Evaluaci\u00f3n por Cortocircuito)<\/h2>\n<p>El operador l\u00f3gico AND (<code>&&<\/code>) eval\u00faa los operandos de izquierda a derecha y devuelve <code>true<\/code> si y s\u00f3lo si todos los operandos son <code>true<\/code>.<\/p>\n<p>El AND l\u00f3gico es un <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Operators\/Logical_AND#short-circuit_evaluation\" target=\"_blank\" rel=\"noopener noreferrer\">short-circuit operator<\/a>. Cada operando se convierte en un booleano y, si el resultado de la conversi\u00f3n es <code>false<\/code>, el operador AND se detiene y devuelve el valor original del operando falso. Si todos los valores son <code>true<\/code>, devuelve el valor original del \u00faltimo operando.<\/p>\n<p><aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f En JavaScript, <code>true &amp;&amp; expression<\/code> siempre devuelve <code>expression<\/code>, y <code>false &amp;&amp; expression<\/code> siempre devuelve <code>false<\/code>.<\/p>\n<\/aside>\n<br \/>\n<\/strong><br \/>\nShort circuit evaluation es una funci\u00f3n de JavaScript que se utiliza habitualmente en React, ya que te permite devolver bloques de c\u00f3digo en funci\u00f3n de condiciones espec\u00edficas. <a href=\"https:\/\/kinsta.com\/es\/blog\/bloques-dinamicos\/#add-the-excerpt\">Aqu\u00ed<\/a> hay un ejemplo:<\/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>En el c\u00f3digo anterior, si <code>displayExcerpt<\/code> <strong>Y<\/strong> <code>post.excerpt.rendered<\/code> se eval\u00faan como <code>true<\/code>, React devuelve el bloque final de JSX.<\/p>\n<p><a href=\"https:\/\/legacy.reactjs.org\/docs\/conditional-rendering.html#inline-if-with-logical--operator\" target=\"_blank\" rel=\"noopener noreferrer\">Para recapitular<\/a>, \u00absi la condici\u00f3n es <code>true<\/code>, el elemento situado justo despu\u00e9s de <code>&&<\/code> aparecer\u00e1 en la salida. Si es <code>false<\/code>, React lo ignorar\u00e1 y omitir\u00e1\u00bb.<\/p>\n<h2 id=\"spread-syntax\" class=\"has-anchor-hash\">Spread Syntax (Sintaxis de Propagaci\u00f3n)<\/h2>\n<p>En JavaScript,\u00a0<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Operators\/Spread_syntax\" target=\"_blank\" rel=\"noopener noreferrer\">spread syntax<\/a> te permite expandir un elemento iterable, como un array o un objeto, en argumentos de funci\u00f3n, literales de array o literales de objeto.<\/p>\n<p>En el siguiente ejemplo, estamos descomprimiendo un array en una llamada a funci\u00f3n:<\/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>Puedes utilizar la spread syntax para duplicar un array (incluso arrays multidimensionales) o para concatenar arrays. En los siguientes ejemplos, concatenamos dos arrays de dos formas distintas:<\/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>Alternativamente:<\/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>Tambi\u00e9n puedes utilizar spread syntax para clonar o fusionar dos objetos:<\/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 id=\"destructuring-assignment\" class=\"has-anchor-hash\">Destructuring Assignment (Asignaci\u00f3n por Desestructuraci\u00f3n)<\/h2>\n<p>Otra estructura sint\u00e1ctica que encontrar\u00e1s utilizada a menudo en React es la sintaxis <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Operators\/Destructuring_assignment\" target=\"_blank\" rel=\"noopener noreferrer\">destructuring assignment<\/a><\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f La sintaxis destructuring assignment te permite desempaquetar valores de un array, o propiedades de un objeto, en variables separadas.<\/strong><\/p>\n<\/aside>\n\n<p>En el siguiente ejemplo, desempaquetamos valores de un 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>Y aqu\u00ed tienes un ejemplo sencillo de destructuring assignment con un objeto:<\/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>Pero podemos hacer a\u00fan m\u00e1s. En el siguiente ejemplo, desestructuramos algunas propiedades de un objeto y asignamos las restantes a otro objeto utilizando spread syntax<\/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>Tambi\u00e9n puedes asignar valores a un 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>Ten en cuenta que los par\u00e9ntesis alrededor de la sentencia de asignaci\u00f3n son necesarios cuando se utiliza la asignaci\u00f3n desestructurada literal de objeto sin declaraci\u00f3n.<\/p>\n<p>Para un an\u00e1lisis m\u00e1s profundo de la asignaci\u00f3n desestructurante, con varios ejemplos de uso, consulta la <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Operators\/Destructuring_assignment\" target=\"_blank\" rel=\"noopener noreferrer\">documentaci\u00f3n web de mdn<\/a>.<\/p>\n<h2>filter(), map() y reduce()<\/h2>\n<p>JavaScript proporciona varios m\u00e9todos \u00fatiles que utilizar\u00e1s a menudo en React.<\/p>\n<h3>filter()<\/h3>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f El <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Array\/filter\" target=\"_blank\" rel=\"noopener noreferrer\">m\u00e9todo<code>filter()<\/code><\/a> crea una <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Glossary\/Shallow_copy\" target=\"_blank\" rel=\"noopener noreferrer\">copia superficial<\/a> de una parte de un array dada filtrada hasta los elementos que cumplen la condici\u00f3n de la funci\u00f3n proporcionada.<\/strong><\/p>\n<\/aside>\n\n<p>En el siguiente ejemplo, aplicamos el filtro al array <code>numbers<\/code> para obtener un array cuyos elementos sean n\u00fameros mayores que 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>En el siguiente ejemplo, obtenemos un array de entradas con la palabra \u00abJavaScript\u00bb incluida en el t\u00edtulo:<\/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=\"Una array de entradas cuyo t\u00edtulo incluye \"JavaScript\"\" width=\"1198\" height=\"346\"><figcaption id=\"caption-attachment-152106\" class=\"wp-caption-text\">Una array de entradas cuyo t\u00edtulo incluye \u00abJavaScript\u00bb<\/figcaption><\/figure>\n<h3>map()<\/h3>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f El <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Array\/map\" target=\"_blank\" rel=\"noopener noreferrer\">m\u00e9todo<code>map()<\/code><\/a> ejecuta una funci\u00f3n proporcionada en cada elemento de un array y devuelve un nuevo array poblado con cada elemento resultante de la funci\u00f3n de retrollamada (callback).<\/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>En un componente React, a menudo encontrar\u00e1s el m\u00e9todo <code>map()<\/code> utilizado para construir listas. En el siguiente ejemplo, estamos mapeando el objeto <code>posts<\/code> de WordPress para <a href=\"https:\/\/kinsta.com\/es\/blog\/bloques-dinamicos\/\">construir una lista de entradas<\/a>:<\/p>\n<pre><code class=\"language-javascript\">&lt;ul&gt;\n\t{ posts && posts.map( ( post ) =&gt; {\n\t\treturn (\n\t\t\t&lt;li key={ post.id }&gt;\n\t\t\t\t&lt;h5&gt;\n\t\t\t\t\t&lt;a href={ post.link }&gt;\n\t\t\t\t\t\t{ \n\t\t\t\t\t\t\tpost.title.rendered ? \n\t\t\t\t\t\t\tpost.title.rendered :\n\t\t\t\t\t\t\t__( 'Default title', 'author-plugin' )\n\t\t\t\t\t\t}\n\t\t\t\t\t&lt;\/a&gt;\n\t\t\t\t&lt;\/h5&gt;\n\t\t\t&lt;\/li&gt;\n\t\t)\n\t})}\n&lt;\/ul&gt;<\/code><\/pre>\n<h3>reduce()<\/h3>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f El <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Array\/reduce\">m\u00e9todo <code>reduce()<\/code><\/a> ejecuta una funci\u00f3n callback (<em>reductora<\/em>) en cada elemento de un array y pasa el valor devuelto a la siguiente iteraci\u00f3n. En pocas palabras, el reductor \u00abreduce\u00bb todos los elementos de un array a un \u00fanico valor.<\/strong><\/p>\n<\/aside>\n\n<p><code>reduce()<\/code> acepta dos par\u00e1metros:<\/p>\n<ul>\n<li>Una funci\u00f3n callback a ejecutar para cada elemento del array. Devuelve un valor que se convierte en el valor del par\u00e1metro acumulador en la siguiente llamada. En la \u00faltima llamada, la funci\u00f3n devuelve el valor que ser\u00e1 el valor de retorno de <code>reduce()<\/code>.<\/li>\n<li>Un valor inicial que es el primer valor del acumulador pasado a la funci\u00f3n callback.<\/li>\n<\/ul>\n<p>La funci\u00f3n callback toma unos cuantos par\u00e1metros:<\/p>\n<ul>\n<li>Un <strong>acumulador<\/strong>: El valor devuelto por la llamada anterior a la funci\u00f3n de callback. En la primera llamada, se establece en un valor inicial si se especifica. En caso contrario, toma el valor del primer elemento del array.<\/li>\n<li>El valor del <strong>elemento actual<\/strong>: El valor se establece en el primer elemento del array (<code>array[0]<\/code>) si se ha establecido un valor inicial, de lo contrario, toma el valor del segundo elemento (<code>array[1]<\/code>).<\/li>\n<li>El <strong>\u00edndice actual<\/strong> es la posici\u00f3n del \u00edndice del elemento actual.<\/li>\n<\/ul>\n<p>Un ejemplo lo aclarar\u00e1 todo.<\/p>\n<pre><code class=\"language-javascript\">const numbers = [1, 2, 3, 4, 5];\nconst initialValue = 0;\nconst sumElements = numbers.reduce(\n\t( accumulator, currentValue ) =&gt; accumulator + currentValue,\n\tinitialValue\n);\nconsole.log( numbers ); \/\/ (5) [1, 2, 3, 4, 5]\nconsole.log( sumElements ); \/\/ 15<\/code><\/pre>\n<p>Veamos en detalle qu\u00e9 ocurre en cada iteraci\u00f3n. Vuelve al ejemplo anterior y cambia el <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>La siguiente imagen muestra la salida en la consola del navegador:<\/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=\"utilizando reduce() con el valor inicial fijado en 5\" width=\"1172\" height=\"388\"><figcaption id=\"caption-attachment-152231\" class=\"wp-caption-text\">utilizando reduce() con el valor inicial fijado en 5<\/figcaption><\/figure>\n<p>Ahora veamos qu\u00e9 ocurre sin el par\u00e1metro <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=\"Utilizando reduce() sin valor inicial\" width=\"1176\" height=\"360\"><figcaption id=\"caption-attachment-152232\" class=\"wp-caption-text\">Utilizando reduce() sin valor inicial<\/figcaption><\/figure>\n<p>Puedes encontrar m\u00e1s ejemplos y casos de uso en el sitio web <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>Exportaciones e Importaciones<\/h2>\n<p>A partir de ECMAScript 2015 (ES6), es posible exportar valores de un m\u00f3dulo JavaScript e importarlos a otro script. Utilizar\u00e1s mucho las importaciones y exportaciones en tus aplicaciones React y, por tanto, es importante que entiendas bien c\u00f3mo funcionan.<\/p>\n<p>El siguiente c\u00f3digo crea un componente funcional. La primera l\u00ednea importa la biblioteca React:<\/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>Utilizamos la palabra clave <code>import<\/code> seguida del nombre que queremos asignar a lo que estamos importando, seguido del nombre del paquete que queremos instalar tal y como se menciona en el archivo <strong>package.json<\/strong>.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f Las declaraciones <code>import<\/code> se utilizan para <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Statements\/import\" target=\"_blank\" rel=\"noopener noreferrer\">importar live bindings de s\u00f3lo lectura<\/a> exportados por otros m\u00f3dulos.<\/strong><\/p>\n<\/aside>\n\n<p>Observa que en la funci\u00f3n <code>MyComponent()<\/code> anterior, hemos utilizado algunas de las caracter\u00edsticas de JavaScript comentadas en las secciones anteriores. Incluimos los valores de las propiedades entre llaves y asignamos el valor de la propiedad <code>style<\/code> utilizando la sintaxis del operador condicional.<\/p>\n<p>El script finaliza con la exportaci\u00f3n de nuestro componente personalizado.<\/p>\n<p>Ahora que sabemos un poco m\u00e1s sobre importaciones y exportaciones, veamos m\u00e1s detenidamente c\u00f3mo funcionan.<\/p>\n<h3>Exportar<\/h3>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f La declaraci\u00f3n <code>export<\/code> se utiliza para exportar valores de un m\u00f3dulo JavaScript.<\/strong><\/p>\n<\/aside>\n\n<p>Cada m\u00f3dulo React puede tener <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Statements\/export#description\" target=\"_blank\" rel=\"noopener noreferrer\">dos tipos diferentes de exportaci\u00f3n<\/a>: <strong>exportaci\u00f3n con nombre<\/strong> y <strong>exportaci\u00f3n por defecto<\/strong>.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f Puedes tener varias exportaciones con nombre por m\u00f3dulo, pero s\u00f3lo una exportaci\u00f3n por defecto.<\/strong><\/p>\n<\/aside>\n\n<p>Por ejemplo, puedes exportar varias funciones a la vez con una sola sentencia <code>export<\/code>:<\/p>\n<pre><code class=\"language-javascript\">export { MyComponent, MyVariable };<\/code><\/pre>\n<p>Tambi\u00e9n puedes exportar caracter\u00edsticas individuales (<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>Pero s\u00f3lo puedes tener una \u00fanica exportaci\u00f3n por defecto:<\/p>\n<pre><code class=\"language-javascript\">export default MyComponent;<\/code><\/pre>\n<p>Tambi\u00e9n puedes utilizar la exportaci\u00f3n por defecto para funciones individuales:<\/p>\n<pre><code class=\"language-javascript\">export default function() { ... }\nexport default class { ... }<\/code><\/pre>\n<h3>Importar<\/h3>\n<p>Una vez exportado el componente, puedes importarlo a otro archivo, por ejemplo un archivo <strong>index.js<\/strong>, junto con otros m\u00f3dulos:<\/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>En el c\u00f3digo anterior, hemos utilizado la declaraci\u00f3n de importaci\u00f3n de varias formas.<\/p>\n<p>En las dos primeras l\u00edneas, asignamos un nombre a los recursos importados, en la tercera l\u00ednea no asignamos un nombre sino que simplemente importamos el archivo <strong>.\/index.css<\/strong>. La \u00faltima sentencia <code>import<\/code> importa el archivo <strong>.\/MiComponente<\/strong> y le asigna un nombre.<\/p>\n<p>Veamos las diferencias entre esas importaciones.<\/p>\n<p>En total, hay cuatro tipos de importaciones:<\/p>\n<p><strong>Importaci\u00f3n con nombre<\/strong><\/p>\n<pre><code class=\"language-javascript\">import { MyFunction, MyVariable } from \".\/my-module\";<\/code><\/pre>\n<p><strong>Importaci\u00f3n por defecto<\/strong><\/p>\n<pre><code class=\"language-javascript\">import MyComponent from \".\/MyComponent\";<\/code><\/pre>\n<p><strong>Importaci\u00f3n namespace<\/strong><\/p>\n<pre><code class=\"language-javascript\">import * as name from \"my-module\";<\/code><\/pre>\n<p><strong>Importaci\u00f3n side effect<\/strong><\/p>\n<pre><code class=\"language-javascript\">import \"module-name\";<\/code><\/pre>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f Una sentencia <code>import<\/code> sin llaves se utiliza para importar el valor por defecto <code>export<\/code>. Una sentencia <code>import<\/code> con llaves se utiliza para importar un nombre <code>export<\/code>.<\/strong><\/p>\n<\/aside>\n\n<p>Una vez que hayas a\u00f1adido unos cuantos estilos en tu <strong>index.css<\/strong>, tu tarjeta deber\u00eda tener el aspecto de la imagen siguiente, donde tambi\u00e9n puedes ver el c\u00f3digo HTML correspondiente:<\/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=\"Un componente React sencillo\" width=\"1806\" height=\"678\"><figcaption id=\"caption-attachment-152317\" class=\"wp-caption-text\">Un componente React sencillo<\/figcaption><\/figure>\n<p>Ten en cuenta que las declaraciones <code>import<\/code> s\u00f3lo pueden utilizarse en m\u00f3dulos en el nivel superior (no dentro de funciones, clases, etc.).<\/p>\n<p>Para una visi\u00f3n m\u00e1s completa de las declaraciones <code>import<\/code> y <code>export<\/code>, tambi\u00e9n puedes consultar los siguientes recursos:<\/p>\n<ul>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Statements\/export\" target=\"_blank\" rel=\"noopener noreferrer\">exportar<\/a> (mdn web docs)<\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Statements\/import\" target=\"_blank\" rel=\"noopener noreferrer\">importar<\/a> (mdn web docs)<\/li>\n<li><a href=\"https:\/\/react.dev\/learn\/importing-and-exporting-components\" target=\"_blank\" rel=\"noopener noreferrer\">Importar y Exportar Componentes<\/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\">\u00bfCu\u00e1ndo debo utilizar llaves en la importaci\u00f3n de ES6?<\/a> (Stack Overflow)<\/li>\n<\/ul>\n\n<h2>Resumen<\/h2>\n<p>React es una de las <a href=\"https:\/\/kinsta.com\/es\/blog\/bibliotecas-javascript\/#reactjs\">bibliotecas JavaScript m\u00e1s populares<\/a> hoy en d\u00eda y es una de las <a href=\"https:\/\/kinsta.com\/es\/blog\/salario-desarrollador-web\/\">habilidades m\u00e1s solicitadas<\/a> en el mundo del <a href=\"https:\/\/kinsta.com\/es\/blog\/desarrollador-de-frontend\/\">desarrollo web<\/a>.<\/p>\n<p>Con React es posible crear aplicaciones web din\u00e1micas e interfaces avanzadas. Crear aplicaciones grandes, din\u00e1micas e interactivas puede ser f\u00e1cil gracias a sus componentes reutilizables.<\/p>\n<p>Pero React es una biblioteca de JavaScript, y una buena comprensi\u00f3n de las principales caracter\u00edsticas de JavaScript es esencial para comenzar tu viaje con React. Por eso hemos reunido en un solo lugar algunas de las caracter\u00edsticas de JavaScript que encontrar\u00e1s m\u00e1s a menudo en React. Dominar esas funciones te dar\u00e1 una ventaja en tu <a href=\"https:\/\/kinsta.com\/es\/blog\/mejores-tutoriales-de-react\/\">viaje de aprendizaje de React<\/a>.<\/p>\n<p>Y cuando se trata de <a href=\"https:\/\/kinsta.com\/es\/blog\/tipos-de-desarrolladores\/\">desarrollo web<\/a>, pasar de JS\/React a WordPress requiere muy poco esfuerzo.<\/p>\n<p>Ahora es tu turno, \u00bfqu\u00e9 funciones de JavaScript crees que son m\u00e1s \u00fatiles en el desarrollo con React? \u00bfNos hemos dejado algo importante que te hubiera gustado ver en nuestra lista? Comparte tu opini\u00f3n con nosotros en los comentarios.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Hoy en d\u00eda, React es una de las bibliotecas de JavaScript m\u00e1s populares. Se puede utilizar para crear aplicaciones din\u00e1micas y con capacidad de respuesta, permite &#8230;<\/p>\n","protected":false},"author":36,"featured_media":66570,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[867,805,1043],"topic":[1297],"class_list":["post-66569","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-javascript","tag-javascript-libraries","tag-react","topic-tutoriales-javascript"],"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>Funciones de JavaScript que Debes Conocer para Dominar React- Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Libera todo el potencial del desarrollo de aplicaciones din\u00e1micas con React. \u00a1Descubre las funciones clave de JavaScript que necesitas conocer para empezar ahora!\" \/>\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\/es\/blog\/javascript-react\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Funciones de JavaScript que Debes Conocer para Dominar React\" \/>\n<meta property=\"og:description\" content=\"Libera todo el potencial del desarrollo de aplicaciones din\u00e1micas con React. \u00a1Descubre las funciones clave de JavaScript que necesitas conocer para empezar ahora!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/es\/blog\/javascript-react\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinsta.es\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-06-01T09:01:59+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-25T09:47:05+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/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=\"Libera todo el potencial del desarrollo de aplicaciones din\u00e1micas con React. \u00a1Descubre las funciones clave de JavaScript que necesitas conocer para empezar ahora!\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/06\/javascript-and-react-01.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@carlodaniele\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_ES\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Carlo Daniele\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"35 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/javascript-react\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/javascript-react\/\"},\"author\":{\"name\":\"Carlo Daniele\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63\"},\"headline\":\"Funciones de JavaScript que Debes Conocer para Dominar React\",\"datePublished\":\"2023-06-01T09:01:59+00:00\",\"dateModified\":\"2023-08-25T09:47:05+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/javascript-react\/\"},\"wordCount\":5675,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/es\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/javascript-react\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/06\/javascript-and-react-01.jpg\",\"keywords\":[\"JavaScript\",\"JavaScript Libraries\",\"React\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/es\/blog\/javascript-react\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/javascript-react\/\",\"url\":\"https:\/\/kinsta.com\/es\/blog\/javascript-react\/\",\"name\":\"Funciones de JavaScript que Debes Conocer para Dominar React- Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/es\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/javascript-react\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/javascript-react\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/06\/javascript-and-react-01.jpg\",\"datePublished\":\"2023-06-01T09:01:59+00:00\",\"dateModified\":\"2023-08-25T09:47:05+00:00\",\"description\":\"Libera todo el potencial del desarrollo de aplicaciones din\u00e1micas con React. \u00a1Descubre las funciones clave de JavaScript que necesitas conocer para empezar ahora!\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/javascript-react\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/es\/blog\/javascript-react\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/javascript-react\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/06\/javascript-and-react-01.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/06\/javascript-and-react-01.jpg\",\"width\":3042,\"height\":1521},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/javascript-react\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/es\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Tutoriales JavaScript\",\"item\":\"https:\/\/kinsta.com\/es\/secciones\/tutoriales-javascript\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Funciones de JavaScript que Debes Conocer para Dominar React\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/es\/#website\",\"url\":\"https:\/\/kinsta.com\/es\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Soluciones de alojamiento premium, r\u00e1pidas y seguras\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/es\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/es\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/es\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/es\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinsta.es\/\",\"https:\/\/x.com\/Kinsta_ES\",\"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\/es\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63\",\"name\":\"Carlo Daniele\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/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\/es\/blog\/author\/carlodaniele\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Funciones de JavaScript que Debes Conocer para Dominar React- Kinsta\u00ae","description":"Libera todo el potencial del desarrollo de aplicaciones din\u00e1micas con React. \u00a1Descubre las funciones clave de JavaScript que necesitas conocer para empezar ahora!","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\/es\/blog\/javascript-react\/","og_locale":"es_ES","og_type":"article","og_title":"Funciones de JavaScript que Debes Conocer para Dominar React","og_description":"Libera todo el potencial del desarrollo de aplicaciones din\u00e1micas con React. \u00a1Descubre las funciones clave de JavaScript que necesitas conocer para empezar ahora!","og_url":"https:\/\/kinsta.com\/es\/blog\/javascript-react\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinsta.es\/","article_published_time":"2023-06-01T09:01:59+00:00","article_modified_time":"2023-08-25T09:47:05+00:00","og_image":[{"width":3042,"height":1521,"url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/06\/javascript-and-react-01.jpg","type":"image\/jpeg"}],"author":"Carlo Daniele","twitter_card":"summary_large_image","twitter_description":"Libera todo el potencial del desarrollo de aplicaciones din\u00e1micas con React. \u00a1Descubre las funciones clave de JavaScript que necesitas conocer para empezar ahora!","twitter_image":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/06\/javascript-and-react-01.jpg","twitter_creator":"@carlodaniele","twitter_site":"@Kinsta_ES","twitter_misc":{"Escrito por":"Carlo Daniele","Tiempo de lectura":"35 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/es\/blog\/javascript-react\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/es\/blog\/javascript-react\/"},"author":{"name":"Carlo Daniele","@id":"https:\/\/kinsta.com\/es\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63"},"headline":"Funciones de JavaScript que Debes Conocer para Dominar React","datePublished":"2023-06-01T09:01:59+00:00","dateModified":"2023-08-25T09:47:05+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/es\/blog\/javascript-react\/"},"wordCount":5675,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/es\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/es\/blog\/javascript-react\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/06\/javascript-and-react-01.jpg","keywords":["JavaScript","JavaScript Libraries","React"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/es\/blog\/javascript-react\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/es\/blog\/javascript-react\/","url":"https:\/\/kinsta.com\/es\/blog\/javascript-react\/","name":"Funciones de JavaScript que Debes Conocer para Dominar React- Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/es\/blog\/javascript-react\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/es\/blog\/javascript-react\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/06\/javascript-and-react-01.jpg","datePublished":"2023-06-01T09:01:59+00:00","dateModified":"2023-08-25T09:47:05+00:00","description":"Libera todo el potencial del desarrollo de aplicaciones din\u00e1micas con React. \u00a1Descubre las funciones clave de JavaScript que necesitas conocer para empezar ahora!","breadcrumb":{"@id":"https:\/\/kinsta.com\/es\/blog\/javascript-react\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/es\/blog\/javascript-react\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/blog\/javascript-react\/#primaryimage","url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/06\/javascript-and-react-01.jpg","contentUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/06\/javascript-and-react-01.jpg","width":3042,"height":1521},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/es\/blog\/javascript-react\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/es\/"},{"@type":"ListItem","position":2,"name":"Tutoriales JavaScript","item":"https:\/\/kinsta.com\/es\/secciones\/tutoriales-javascript\/"},{"@type":"ListItem","position":3,"name":"Funciones de JavaScript que Debes Conocer para Dominar React"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/es\/#website","url":"https:\/\/kinsta.com\/es\/","name":"Kinsta\u00ae","description":"Soluciones de alojamiento premium, r\u00e1pidas y seguras","publisher":{"@id":"https:\/\/kinsta.com\/es\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/es\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/es\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/es\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinsta.es\/","https:\/\/x.com\/Kinsta_ES","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\/es\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63","name":"Carlo Daniele","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/#\/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\/es\/blog\/author\/carlodaniele\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/66569","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/users\/36"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/comments?post=66569"}],"version-history":[{"count":15,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/66569\/revisions"}],"predecessor-version":[{"id":66658,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/66569\/revisions\/66658"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/66569\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/66569\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/66569\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/66569\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/66569\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/66569\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/66569\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/66569\/translations\/es"},{"embeddable":true,"hreflang":"sv","title":"Swedish","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/66569\/translations\/se"},{"embeddable":true,"hreflang":"da","title":"Danish","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/66569\/translations\/dk"},{"href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/66569\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/media\/66570"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/media?parent=66569"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/tags?post=66569"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/topic?post=66569"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}