¡Reencuéntrate con la tecnología en Platzi Day! Accede a miles de cursos por 72 horas. Una sorpresa te espera 😎

Regístrate

Comienza en:

04D

09H

31M

43S

97

Las 10 mejores prácticas para escribir código en JavaScript

45881Puntos

hace un mes

Curso Definitivo de HTML y CSS
Curso Definitivo de HTML y CSS

Curso Definitivo de HTML y CSS

Aprende HTML y CSS desde cero, sin conocimientos previos. Conoce todo sobre etiquetas HTML, semántica, CSS, como dar estilos a los elementos de tu sitio web, medidas EM/REM, modelo de caja y mucho más. Aprenderás todo lo que necesitas para empezar en el desarrollo web online y a construir sitios para internet de manera eficiente.

JavaScript es uno de los lenguajes de programación más utilizados en el mundo y una de sus principales ventajas, como también su más grande debilidad, es su versatilidad.

La fortaleza y la debilidad de JavaScript reside en que te permite hacer cualquier cosa, tanto para bien como para mal.
- Reginald Braithwaite

Gracias a esta característica que tiene JavaScript es que muchas personas pueden llegar a caer en malas prácticas, como no cuidar la estructura de tu código o escribir nombres incomprensibles para tus variables y funciones, las cuales se pueden ir replicando y extendiendo en la comunidad.

A continuación te voy a enseñar 10 buenas prácticas que puedes implementar en tu código para convertirte en la envidia de tus compañeros de trabajo y potenciar tus habilidades como desarrolladora.

1. Utiliza el encadenamiento opcional

El operador del encadenamiento opcional, también conocido como optional chaining, te permite leer el valor de una propiedad situada en lo más profundo de una cadena de objetos conectados sin necesidad de comprobar cada una de las referencias de la cadena.

const person = {
	name: 'Alex',
	cat: {
		name: 'Oliver'
	}
}

console.log(person.cat?.name) //> Olive

2. Cuida tus estructuras de datos

Elige cuidadosamente cómo van a ser tus estructuras de datos para que sean lo más eficientes posibles.

Veamos esto en un ejemplo: tenemos dos estructuras, una llamada fastStructure y otra llamada slowStructure. La primera es un ~70% más rápida que la segunda por el simple hecho de que la primera no requiere iteración y la segunda sí.

const fastStructure = {
	id_1: {
		name: 'Alex',
		email: '[email protected]'
	},
	id_2: {
		name: 'Juan',
		email: '[email protected]'
	},
	id_3: {
		name: 'Mariana',
		email: '[email protected]'
	}
}
const slowStructure = [
	{
		id: '01'
		name: 'Alex',
		email: '[email protected]'
	},
	{
		id: '02'
		name: 'Juan',
		email: '[email protected]'
	},
	{
		id: '03'
		name: 'Mariana',
		email: '[email protected]'
	}
]

3. Aprovecha el operador ternario

El operador ternario sirve para escribir el código de una sentencia if de una forma mucho más sencilla. Lo anterior resulta en un código más limpio y fácil de leer.

Este operador es el único en JavaScript que toma tres operandos:

  1. La condición seguida del signo de interrogación ?.
  2. Una expresión a ejecutar si la condición es verdadera seguida de dos puntos :.
  3. La expresión a ejecutar si es falsa.
let avg = prompt("Enter your average:")
let result = (avg >= 70) ? 'pass' : 'fail'

4. Implementa la desestructuración

La desestructuración de arreglos u objetos es una manera sencilla de mantener el código bien formateado y simple de leer. En lugar de obtener los valores a través de los índices, permite asignar nombres para que estos sean fácilmente identificables.

const person = {
	name: 'Alex',
	lastName: 'Camacho',
	age: '28',
	mail: '[email protected]'
}

let { name, lastName, age, mail } = person

console.log(name, lastName, age, mail) 
//> Alex Camacho 28 [email protected]

5. Utiliza los arreglos y const

Puedes utilizar const para definir arreglos, incluso cuando este necesite ser actualizado posteriormente, esto funciona, ya que no estás reasignando nada en realidad.

const todoList = ["Write", "Read", "Eat"]
todoList.push("Sleep")

console.log(todoList)
//> ["Write", "Read", "Eat", "Sleep"]

6. Aprovecha los template literals

Las cadenas que se crean con comillas dobles " o simples ' tienen muchas limitaciones, puedes sustituir alguna de ellas por template literals para poder trabajar mucho más fácil con ellas y adquirir un par de funcionalidades extra.

let name = 'Alex'let activity = 'playing'let time = 'today'// Sin template literalsvar example = name + 'is' + activity + 'with her cats' + time

// Con template literalsvar betterExample = `${name} is ${activity} with her cats ${today}`

7. Ten cuidado con los nombres

Nuestro código tiene que ser simple y directo, debería leerse con la misma facilidad que un texto bien escrito.
- Grady Booch

La variables en JavaScript distinguen entre mayúsculas y minúsculas. Por lo tanto, una variable que tenga el mismo nombre, pero una de ellas inicie con mayúsculas y la otra minúscula, serán dos variables diferentes.

let name = 'Alex'let Name = 'Leo'let NAME = 'Ana'console.log(name) //> Alexconsole.log(Name) //> Leoconsole.log(NAME) //> Ana

Pero si hablamos de nombres, esto no termina aquí. Los nombres de variables, funciones, métodos, entre otros deben de ser preferiblemente en inglés y además pronunciables, lo cual quiere decir que no deben llevar guiones y priorizar el estilo camelCase.

const currentDate = moment().format('YYY/MM/DD')

8. Implementa findIndex

Esta es una de las características más subestimadas cuando se trata de encontrar un valor en un array de objetos. Puedes utilizar findIndex en lugar de bucles.

const someValues = [
	{prop1: 'abc', prop2: 'def'},
	{prop1: 'ghi', prop2: 'jkl'},
	{prop1: 'mno', prop2: 'pqr'}
]

const index = a.findIndex(x => x.prop2  === "jkl")

console.log(index) //> 1

9. Escribe tus propios Contracts y Docstrings

Siempre que desarrolles una nueva feature recuerda dejar comentarios o emplear Docstrings en el código para que este sea más fácil de entender. Esta práctica puede ser especialmente valiosa cuando alguien más o tu misma en el futuro tenga que volver a trabajar con ese código.

/**
* Represents a book
* @constructor
* @param {string} title - The title of the book
* @param {string} author - The author of the book
**/functionbook(title, author) {
	...
}

Puedes revisar más al respecto de este tema en la documentación de JSDoc.

10. Elige la notación abreviada de los object literals

Cuando se diseñan objetos o matrices en JavaScript, se puede ahorrar espacio de línea y optar por la notación abreviada.

Esto se consigue estableciendo las propiedades de un objeto durante la declaración y no después.

let computer = {
	caseColor: 'gray',
	brand: 'Apple',
	value: 1200,
	onSale: true
}

Ahora es tu turno, aplica estos hacks y mejora tu código

Ya conoces las diez mejores prácticas que puedes aprovechar en tu próximo proyecto, incluso en tu trabajo actual. Puedes desempolvar el último trabajo que hayas hecho y aplicar estos trucos para resaltar todas tus habilidades en programación.

Cuéntame en los comentarios qué otras buenas prácticas en JavaScript conoces que el resto de la comunidad debería de empezar a implementar en sus proyectos. Como siempre, te invito a pisar el acelerador y seguir ampliando tus conocimientos en este bello lenguaje.

Además, te recomiendo el Curso de Introducción al Testing con JavaScript que junto a estos aprendizajes hará que la calidad de tu línea de código sea envidiable para otras programadoras.

Te leo en los comentarios y recuerda: nunca parar de aprender 💚

Curso Definitivo de HTML y CSS
Curso Definitivo de HTML y CSS

Curso Definitivo de HTML y CSS

Aprende HTML y CSS desde cero, sin conocimientos previos. Conoce todo sobre etiquetas HTML, semántica, CSS, como dar estilos a los elementos de tu sitio web, medidas EM/REM, modelo de caja y mucho más. Aprenderás todo lo que necesitas para empezar en el desarrollo web online y a construir sitios para internet de manera eficiente.
Alex
Alex
alexcamachogz

45881Puntos

hace un mes

Todas sus entradas
Escribe tu comentario
+ 2
Ordenar por:
3
17Puntos

Hola Alex, soy novata…puedes explicarme porqué en el punto dos, la primera opción no requiere iteración?
Gracias es todo muy interesante.
Silvia

2
2054Puntos
un mes

Hola, lo que pasa es que la primera estructura que es fastStructure se puede acceder muchisimo más rápida que la segunda porque no tiene ningún array, si no que es un objecto que adentro tiene varios objectos además con un identificador que en el caso seria el id.

Por ejemplo usted para acceder a un array tiene que acceder al nombre del array y a la posición.

console.log(slowStructure[0])

// output {id: ‘01’, name: ‘Alex’, email: ‘[email protected]’}

por ejemplo la primera fastStructure usted no necesita acceder a la posición si no, al nombre del elemento ejemplo:

console.log(fastStructure.id_1)

// {name: ‘Alex’, email: ‘[email protected]’}

Entonces ya cuando hacemos iteraciones que son los loops la estructura slowStructure usted la puede recorrer con un for, forEach, map, white ejemplo:

const slowStructureLoopResult = slowStructure.map(user => {
    return {
        id: user.id,
        name: user.name,
        email: user.email
    }
})

Mientras la estructura fastStructure usted no necesitaría hacer un loop si no inmediatamente acceder a los valores ejemplo:

var output = Object.values(fastStructure)
console.log(output);

Espero a ver aclarado las dudas

3
3105Puntos

Muy buen resumen. Solo ajustaría este código ejemplo:

const someValues = [
	{prop1: 'abc', prop2: 'def'},
	{prop1: 'ghi', prop2: 'jkl'},
	{prop1: 'mno', prop2: 'pqr'}
]

const index = someValues.findIndex(x => x.prop2  === "jkl")

console.log(index) //> 1
1
2054Puntos
un mes

Sí en los primeras declaraciones también le falto las comas al final pero es entendible

1
45881Puntos
25 días

Hey gracias por esto, no había notado que se me habían ido las comas 🤗

2
16302Puntos

Pequeño tip:

No se si sea recomendable, pero puedes anidar operadores ternarios y en algunos casos, pienso que es un código más limpio que poner if:

const msg = edad > 17 ? "Eres mayor de edad" :
			edad > 11 ? "Eres adolescente" : "Eres infante";
2
11664Puntos

Que opinas de EcmaScript 6 + 🧑‍🚀

2
un mes

Es un buen cambio para desarrolladores que comenzaron con la programación síncrona, permite tener un buen orden a nivel visual del código y evita bastante tener promesas anidadas.

1

Me parece genial que nos ayuden a aplicar mejores practicas en nuestro codigo. 😁

1

Esto me va a venir bien para acompañar con el curso de programacion basica

1
2994Puntos

Genial resumen, gracias Alex! 😄 😃

1
39084Puntos

Gracias por los tips Alex!!

1
13762Puntos

Genial resumen, gracias Alex! 😄

1
20778Puntos

Estuvo super interesante esto 😄 Gracias

1

Muchísimas gracias por los tips, ya iba implementando uno que otro durante mi aprendizaje, pero habían otros que hasta el momento desconocía.

1
6365Puntos

Gracias Alex, buenas practicas son siempre bienvenidas ! 😃

1
808Puntos

Excelente muy buenas practicas.! muchas gracias.

1
6363Puntos

Muchas gracias por la información, pondré en practica tus consejos porque si son muy buenos para tener un mejor orden en el código.

1
39084Puntos

Genial, a poner en practica la información.

1
35545Puntos

Excelente post, viernes de práctica JavaScript :hea