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

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.

📌Si quieres mejorar tus habilidades, te invito a tomar los cursos de la nueva escuela de Javascript de Platzi.

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.

👉🏼Lo que necesitas aprender sobre Javascript lo encuentras en Platzi

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