Código

 

Fundamentos de JavaScript: Sintaxis y estructura. Como con cualquier otro lenguaje, los lenguajes de programación se definen por conjuntos de reglas. Las reglas (o sintaxis) son las que seguimos cuando escribimos nuestro código, que forman la estructura lógica de nuestros programas.

Este artículo marca el comienzo de una serie que voy a escribir sobre el aprendizaje de los fundamentos de JavaScript. Asegúrate de seguirme si quieres seguir la pista!

Vamos a sumergirnos en los bloques de construcción de JavaScript. Estaremos buscando valores (literales y variables), camel casing, unicode, semicolores, sangría, espaciado blanco, comentarios, sensibilidad a las mayúsculas y minúsculas, palabras clave, operadores y expresiones! 😅

Al tomarnos el tiempo para aprender los fundamentos, estaremos en camino hacia la construcción de un código más funcional y legible!

Comencemos con los fundamentos de JavaScript: Sintaxis y estructura.

Valores de JavaScript

En JavaScript hay dos tipos de valores: Valores fijos (o literales) y Valores variables (variables).

Literales

Los literales se definen como valores que están escritos en nuestro código, como números, cadenas, booleanos (verdadero o falso), así como objetos y matrices (no se preocupe demasiado por ellos todavía). Algunos ejemplos incluyen:

10          // A number (can be a decimal eg. 10.5)
'Boat'      // A string (can be in double "" or single '' quotes)
true        // A boolean (true or false)
['a', 'b']                           // An array
{color: 'blue', shape: 'Circle'}     // An object

Nota: Estaré mirando los tipos de datos en detalle en mi próximo artículo, ¡manténte en sintonía!

Variables

Las variables se denominan valores que almacenan datos. En JavaScript declaramos nuestras variables con las palabras clave var, let o const, y asignamos valores con el signo igual =.

Por ejemplo, la clave se define como una variable. Al que se le asigna el valor abc123:

let key;

key = abc123;

¿Cuándo usar var? No lo hagas. En realidad, sólo debería utilizarse cuando se trabaja con código heredado. Es la antigua sintaxis pre-ES6.

¿Cuándo usar let? Utilízalo si tu variable necesita ser actualizada dentro del programa (puede ser reasignada).

¿Cuándo usar const? Úsalo si tu variable tiene un valor constante. Debe asignarse en el momento de la declaración y no puede reasignarse.

Camel Case

¿Qué pasa si nuestro nombre de variable consiste en más de una palabra? Por ejemplo, ¿cómo declararíamos una variable que deseamos llamar «first name»?

¿Podríamos usar guiones? Ejemplo first-name, No, están reservados para las sustracciones en JavaScript.

¿Qué hay de los subrayados? Ejemplo first-name, Podríamos, pero tiene una tendencia a hacer que nuestro código parezca desordenado y confuso.

¿La solución? Camel Case!Ejemplo firstName. La primera palabra es minúscula, la primera letra de cualquier palabra subsiguiente es mayúscula. Esta es la convención dentro de la comunidad.

Nota: Sin embargo, es bastante aceptable nombrar tus variables const en mayúsculas con guiones bajos, por ejemplo, const DEFAULT_PLAYBACK_SPEED = 1; esto dejaría claro a los demás que el valor es fijo. De lo contrario, sólo tienes que seguir con camelCase!

Unicode

JavaScript utiliza el juego de caracteres unicode. Unicode cubre casi todos los caracteres, puntuaciones y símbolos que hay! Comprueba la referencia completa. Esto es genial, ya que podemos escribir nuestros nombres en cualquier idioma, e incluso podríamos usar emojis como nombres de variables (¿por qué no? 🤷🏻).

Semicolores

Los programas JavaScript se componen de una serie de instrucciones conocidas como sentencias. Como por ejemplo:

// These are all examples of JavaScript statements:

let a = 1000;

a = b + c;

const time = Date.now();

Las sentencias JavaScript a menudo terminan en punto y coma.

Sin embargo, los puntos y coma no siempre son obligatorios. JavaScript no tiene ningún problema si no los utiliza.

// Still perfectly valid!

let a = 1000

a = b + c

const time = Date.now()

Sin embargo, hay algunas situaciones en las que son obligatorias. Por ejemplo, cuando usamos un bucle para un bucle, así:

for (i = 0; i < .length; i++) { 
  // code to execute
}

Sin embargo, cuando se utiliza una expresión en bloque, no se deben incluir los puntos y comas después de los refuerzos rizados, por ejemplo:

if (name == "Samantha") {
  // code
}                           // <- no ';'

//o,

function people(name) {
  // code
}                           // <- no ';'

Sin embargo, si estamos usando un objeto, como:

const person = {
  firstName: "Samantha",
  lastName: "Doe",
  age: 30,
  eyeColor: "blue"
};                          // el ';' es obligatorio

Entonces se requieren nuestros ;’s

Con el tiempo comenzarás a memorizar dónde pueden y dónde no pueden usarse los puntos y coma. Hasta entonces, es aconsejable usarlas al final de todas las frases (¡con la excepción de las frases en bloque!).

Además, es una convención común utilizarlos de todas formas, se considera una buena práctica, ya que reduce la probabilidad de errores.

Nota: Una vez que realmente empieces a usar JavaScript, empieza a usar un linter como ESLint. Automáticamente encontrará errores de sintaxis en tu código y te hará la vida mucho más fácil!

Hendiduras

En teoría podríamos escribir todo un programa JavaScript en una sola línea. Sin embargo, esto sería casi imposible de leer y mantener. Es por eso que usamos líneas y sangrados. Usemos una sentencia condicional como ejemplo:

if (loginSuccessful === 1) {
  // code to run if true
} else {
  // code to run if false
}

Aquí podemos ver que cualquier código dentro de un bloque está sangrado. En este caso es nuestro código de comentario // código para ejecutar si es verdadero y luego // código para ejecutar si es falso. Puede elegir entre sangrar las líneas con unos pocos espacios (2 o 4 son comunes) o con una pestaña. Es totalmente su elección, lo principal es ser consistente!

Si estamos anidando nuestro código, lo sangraríamos así:

if (loginAttempts < 5){
  if (loginAttempts < 3){
    alert("< 3");
  } else {
    alert("between 3 and 5");
  }
} else {
  if (loginAttempts > 10){
    alert("> 10");
  } else {
    alert("between 5 and 10");
  }
}

Aplicando la sangría tendrás un código mucho más limpio, más fácil de mantener y más fácil de leer!

Espacio en blanco

JavaScript sólo requiere un espacio entre palabras clave, nombres e identificadores, de lo contrario cualquier espacio en blanco es completamente ignorado. Esto significa que en lo que se refiere a la lengua, no hay diferencia entre las siguientes afirmaciones:

const visitedCities="Melbourne, "+"Montreal, "+"Marrakech";
const visitedCities = "Melbourne, " + "Montreal, " + "Marrakech";

Estoy seguro de que encontrarás la segunda línea mucho más legible. Y otro ejemplo:

let x=1*y;       
let x = 1 * y;

Una vez más, la segunda línea es mucho más fácil de leer y depurar! Así que siéntete libre de espaciar tu código de una manera que tenga sentido! Por esta razón, también es un uso aceptable del espacio en blanco:

const cityName         = "Melbourne";
const cityPopulation   = 5000001;
const cityAirport      = "MEL";

Comentando

Un comentario es un código no ejecutable. Son útiles para proporcionar una explicación de algún código dentro de un programa. Y también para ‘comentar’ una sección de código para prevenir la ejecución – a menudo usada cuando se prueba una pieza de código alternativa.

Hay dos tipos de comentarios en JavaScript:

// Comment goes here

/* Comment goes here */

La primera sintaxis es un comentario de una sola línea. El comentario va a la derecha del //

El segundo es un comentario de varias líneas. El comentario va entre los asteriscos /* aquí *//

Un comentario multilínea más largo:

/* This is 
a comment spanning
multiple lines */

Identificadores

En JavaScript, el nombre de una variable, función o propiedad se conoce como identificador. Los identificadores pueden consistir en letras, números, $ y _. No se permiten otros símbolos y no pueden comenzar con un número.

// Valid :)

Name
name
NAME
_name
Name1
$name

// Invalid :(

1name
n@me
name!

Sensibilidad a las mayúsculas y minúsculas

JavaScript distingue entre mayúsculas y minúsculas! Un identificador llamado test es diferente de Test.

El siguiente paso arrojará un error:

function test() {
  alert("This is a test!");
}

function showAlert() {
  Test();                     // error! test(); is correct
}

Para asegurarnos de que nuestro código es legible, lo mejor es intentar variar nuestros nombres, para que no se encuentren identificadores demasiado similares.

Palabras reservadas

Hay un número de palabras dentro de JavaScript que no pueden ser usadas como identificadores. Esas palabras están reservadas por el idioma, ya que tienen funcionalidad incorporada. Como por ejemplo:

break, do, instanceof, typeof, case, else, new, var, catch, finally, return, void, continue, for, switch, while, debugger, function, this, with, default, if, throw, delete, in, try, class, enum, extends, super, const, export, import.

No necesitas memorizar estas palabras! Si obtienes algún error sintáctico extraño que apunte a una variable, puedes comprobar la lista y cambiar el nombre.

Operadores JavaScript

Los operadores aritméticos + - * y/  se utilizan principalmente cuando se realizan cálculos dentro de JavaScript, como por ejemplo:

(2 + 2) * 100

El operador de asignación = se utiliza para asignar valores a nuestras variables:

let a, b, c;
a = 1;
b = 2;
c = 3;

Expresiones JavaScript

Una expresión es cuando combinamos valores, variables y operadores para calcular un nuevo valor (conocido como evaluación). Como por ejemplo:

10 * 10    // Evalúa a 100

let x = 5
x * 10     // Evalúa a 50

const firstName = "Javi";
const lastName = "Niguez";
firstName + " " + lastName;    //Evalúa a: Javi Niguez

Conclusión sobre fundamentos de JavaScript: Sintaxis y estructura

Y ahí vamos! El objetivo de este artículo (Fundamentos de JavaScript: Sintaxis y estructura) es proporcionar una visión general de la sintaxis y estructura básicas de JavaScript. Hemos analizado muchas de las convenciones comunes, sin embargo, recuerda que puede ser algo flexible, especialmente cuando se trabaja en entornos de colaboración con sus propios estándares particulares.

La sintaxis y la estructuración juegan un papel importante tanto en la funcionalidad de nuestros programas como en la legibilidad y mantenibilidad del código.

Espero que este artículo le haya sido útil! Nos vemos en el próximo artículo y recuerda dejar cualquier pregunta en los comentarios de abajo. Estaré encantado de ayudar!