Nombrar elementos en JavaScript

Autor: | Última modificación: 26 de octubre de 2022 | Tiempo de Lectura: 3 minutos
Temas en este post:

Algunos de nuestros reconocimientos:

Premios KeepCoding

El mundo de la programación tiene diversos lenguajes con objetos nativos ya nombrados. Sin embargo, la gran mayoría del desarrollo se da en la creación de nuevos elementos. En este post, te enseñaremos cómo nombrar elementos en JavaScript, una actividad que haremos repetidas veces al desarrollar código.

Antes de empezar

Para enseñarte cómo nombrar elementos en JavaScript, te pondremos un ejemplo. Supongamos que tenemos un proyecto que pretende simular un tweet. Para ello, hemos creado un objeto con las propiedades de un tweet y un string template con el que decidimos qué propiedad será parte de qué etiqueta HTML con el fin de ser visualizado. Este código lo hemos ejecutado en nuestro post sobre pintar un array de objetos con el DOM. Luego, hemos segmentado este código siguiendo la técnica MVC en nuestros posts sobre identificar el patrón modelo vista controlador e implementar el modelo vista controlador.

Entonces, ahora tenemos un nuevo archivo en el que queremos introducir la sección vista de nuestro código. Para ello, debemos crear una función que se encargue de pintar la vista de nuestro tweet. A continuación, te mostramos esta función:

export function xxx (tweet) {

const currentTime = new Date (tweet.created_at)

const tweetTemplate =

<h1> ${tweet.handler} </h1>

<p> ${tweet.content} </p>

<h1> ${currentTime} </p>

;

return tweet;

}

Nota que todavía no le hemos dado un nombre a esta función, porque ahora es el momento de aprender cómo nombrar elementos en JavaScript.

¿Cómo nombrar elementos en JavaScript?

Lo primero que debemos hacer al nombrar elementos en JavaScript, ya sean funciones como en nuestro ejemplo o variables, es pensar cuál es el rol del elemento a nombrar. En nuestro caso, deberemos pensar qué es lo que está haciendo el método anterior. Para nuestro ejemplo, está construyendo la vista de un tweet. Por ello, nuestro método podría llamarse BuildTweetView.

Si tienes dudas sobre el nombre que has decidido ponerle a un elemento, te recomendamos cerrar el código de este y ver solo los nombres posibles. En nuestro caso, podríamos comparar los siguientes nombres: buildTweetView, printView y setTweet. Al compararlos, debemos pensar en cuál es la acción que nos evoca cada nombre. De este modo, podemos elegir el que más se acerque a lo que necesitamos.

Como puedes ver, a la hora de nombrar elementos en JavaScript, normalmente pensamos en un sustantivo que defina el contexto del componente y un verbo que defina lo que hace. En nuestro caso, Tweet y View son sustantivos que nos ayudan mucho. Luego, deberemos elegir entre el verbo set y build según cómo pensemos en este componente.

Recursos para seguir aprendiendo

Si quieres conocer más sobre la nomenclatura que se debe seguir a la hora de nombrar elementos en JavaScript, te recomendamos el artículo sobre gramática y tipos en la página oficial de Mozilla Developer Network, donde aprenderás exactamente qué reglas debemos seguir al nombrar nuestras variables, funciones y demás.

Además, nuestro blog sobre desarrollo web siembre está ahí para ti y tu aprendizaje sobre los distintos lenguajes de programación que lo hacen posible. Sin embargo, si tienes dudas puntuales que te gustaría resolver, también te recomendamos la página web javascript.info, un recurso ideal para aprender JavaScript, ya seas un novato que quiere aprender desde cero o un pro que quiere profundizar en determinados aspectos.

¿Te animas a seguir aprendiendo?

Ahora que sabes cómo nombrar elementos en JavaScript, te invitamos a seguir aprendiendo con nosotros sobre las reglas y posibilidades de este y otros lenguajes de programación en nuestro Desarrollo Web Full Stack Bootcamp. Además de JavaScript, en este espacio de formación intensiva aprenderás a dominar lenguajes como HTML, CSS y JSX. Aprenderás la teoría y la práctica con el constante acompañamiento de profesionales en el sector. ¿Te animas a seguir aprendiendo sobre el mundo del desarrollo web para triunfar en el mercado laboral? ¡Inscríbete y lógralo en muy pocos meses!

👉 Descubre más del Desarrollo Web Full Stack Bootcamp ¡Descarga el temario!

👉 Prueba el Bootcamp Gratis por una Semana ¡Empieza ahora mismo!

👉 Conoce nuestros otros Bootcamps en Programación y Tecnología

¡CONVOCATORIA ABIERTA!

Desarrollo Web

Full Stack Bootcamp

Clases en Directo | Profesores en Activo | Temario 100% actualizado