Descripción de la Sintaxis y la Estructura de Código en JavaScript

Introducción

Antes de aprender a escribir en un idioma, primero debe aprender las reglas de la gramática. Aquí hay algunos ejemplos de reglas que puede encontrar en el idioma inglés:

• Una oración comienza con una letra mayúscula.
• Una oración termina en un punto..
• El diálogo hablado se pone dentro de las comillas dobles.

En este tutorial, examinaremos muchas de las reglas de la sintaxis de JavaScript y la estructura de código.

Del mismo modo, todos los lenguajes de programación deben adherirse a reglas específicas para funcionar. Este conjunto de reglas que determinan la estructura correcta de los lenguajes de la programación se conoce como sintaxis . Muchos lenguajes de programación consisten en gran parte de conceptos similares con variaciones en la sintaxis.

Funcionalidad y Legibilidad

Funcionalidad y legibilidad son dos razones importantes para centrarse en la sintaxis a medida que comienza a trabajar con JavaScript.

Hay algunas reglas de sintaxis que son obligatorias para la funcionalidad de JavaScript. Si no se siguen, la consola lanzará un error y el script dejará de ejecutarse.

Considere un error de sintaxis en el "Hello, World!" 1992)

// Example of a broken JavaScript program
console.log("Hello, World!"

Este ejemplo de código falta el paréntesis de cierre y en lugar de imprimir el esperado "Hello, World!" A la consola, aparecerá el siguiente error:

Output


Uncaught SyntaxError: missing ) after argument list

La falta del ")" debe agregarse antes de que el script continúe ejecutándose. Este es un ejemplo de cómo un error en la sintaxis de JavaScript puede romper la secuencia de comandos, ya que se debe seguir la sintaxis correcta para que se ejecute el código.

Algunos aspectos de la sintaxis y el formato de JavaScript se basan en diferentes escuelas de pensamiento. Es decir, hay reglas o opciones que no son obligatorias y no darán lugar a errores cuando se ejecute el código. Sin embargo, existen muchas convenciones comunes que son sensatas de seguir, ya que los desarrolladores entre proyectos y bases de código estarán más familiarizados con el estilo. La adhesión a convenciones comunes conduce a una mejor legibilidad.

Considere los siguientes tres ejemplos de asignación de variables.

const greeting="Hello";         // no whitespace between variable & string
const greeting =       "Hello"; // excessive whitespace after assignment
const greeting = "Hello";       // single whitespace between variable & string

Aunque los tres ejemplos anteriores funcionarán exactamente igual en la salida, la tercera opción de greeting = "Hello" es mucho la más utilizada y la forma más legible de escribir el código, especialmente cuando se considera dentro del contexto de un programa más grande.

Es importante mantener consistente el estilo de todo el proyecto de codificación. De una organización a otra, se encontrará con diferentes directrices a seguir, por lo que también debe ser flexible.

Examinaremos algunos ejemplos de código a continuación para familiarizarse con la sintaxis y la estructura del código JavaScript y remitirse a este artículo en caso de duda.

Espacio en Blanco

Los espacios en blanco en JavaScript consisten en espacios, pestañas y saltos de línea (pulsando ENTER en el teclado). Como se demostró anteriormente, el espacio en blanco excesivo fuera de una cadena y los espacios entre operadores y otros símbolos son ignorados por JavaScript. Esto significa que los siguientes tres ejemplos de asignación de variables tendrán exactamente el mismo resultado calculado:

const userLocation      =    "New York City, "     +  "NY";
const userLocation="New York City, "+"NY";
const userLocation = "New York City, " + "NY";

userLocation representará "New York City, NY" no importa cuál de estos estilos están escritos en el script, ni hará una diferencia en JavaScript si el espacio en blanco está escrito con pestañas o espacios.

Una buena regla general para poder seguir las convenciones de espacio en blanco más comunes es seguir las mismas reglas que usted está acostumbrado en matemáticas y gramática del lenguaje.

Por ejemplo, let x = 5 * y sea ​​más legible que let x=5*y .

Una excepción notable a este estilo que puede ver es durante la asignación de múltiples variables. Observe la posición de = en el ejemplo siguiente:

const companyName         = "DigitalOcean";
const companyHeadquarters = "New York City";
const companyHandle       = "digitalocean";

Todos los operadores de asignación ( = ) están alineados, con el espacio en blanco después de la variable. Este tipo de estructura de organización no es utilizado por cada base de código, pero se puede utilizar para mejorar la legibilidad.

Las nuevas líneas en exceso también son ignoradas por JavaScript. Generalmente, se insertará una nueva línea adicional sobre un comentario y después de un bloque de código.

Paréntesis

Para palabras clave como if , switch y for , los espacios normalmente se agregan antes y después de los paréntesis. Observe los siguientes ejemplos de comparación y bucles.

// An example of if statement syntax
if () { }

// Check math equation and print a string to the console
if (4 < 5) {
    console.log("4 is less than 5.");
}

// An example of for loop syntax
for () { }

// Iterate 10 times, printing out each iteration number to the console
for (let i = 0; i <= 10; i++) {
    console.log(i);
}

Como se ha demostrado, la sentencia if y for loop tienen espacios en blanco en cada lado de los paréntesis (pero no dentro de los paréntesis).

Cuando el código pertenece a una función, método o clase, los paréntesis estarán tocando el nombre respectivo.

// An example function
function functionName() {}

// Initialize a function to calculate the volume of a cube
function cube(number) {
    return Math.pow(number, 3);
}

// Invoke the function
cube(5);

En el ejemplo anterior, cube() es una función, y el par de paréntesis () contendrá los parámetros o argumentos. En este caso, los parámetros son number o 5 , respectivamente. Aunque cube () con un espacio extra es válido en que el código se ejecutará como se esperaba, casi nunca se ve. Mantenerlos juntos ayuda a asociar fácilmente el nombre de la función al par de paréntesis y cualquier argumento pasado asociado.

Punto y Coma

Los programas JavaScript consisten en una serie de instrucciones conocidas como declaraciones, así como los párrafos escritos consisten en una serie de oraciones. Mientras que una oración termina con un punto, una instrucción JavaScript a menudo termina en un punto y coma ( ; ).

// A single JavaScript statement
const now = new Date();

Si dos o más declaraciones están próximas entre sí, es obligatorio separarlas con un punto y coma.

// Get the current timestamp and print it to the console
const now = new Date(); console.log(now);

Si las sentencias están separadas por una nueva línea, el punto y coma es opcional.

// Two statements separated by newlines
const now = new Date()
console.log(now)

Una convención segura y común es separar declaraciones con un punto y coma independientemente de las saltos de línea. Generalmente, se considera una buena práctica incluirlas para reducir la probabilidad de errores.

// Two statements separated by newlines and semicolons
const now = new Date();
console.log(now);

Los puntos y coma también son necesarios entre la inicialización, la condición y el incremento o decremento de un bucle for .

for (initialization; condition; increment) {
    // run the loop
}

Los puntos y coma no se incluyen después de cualquier clase de declaración de bloque, como if , for , do , while , class , switch y function . Estas instrucciones de bloque están contenidas entre corchetes {} . Observe los siguientes ejemplos.

// Initialize a function to calculate the area of a square
function square(number) {
    return Math.pow(number, 2);
}

// Calculate the area of a number greater than 0
if (number > 0) {
    square(number);
}

Tenga cuidado, ya que no todo el código encerrado entre corchetes terminará sin un punto y coma. Los objetos están encerrados entre corchetes, y deben terminar en un punto y coma.

// An example object
const objectName = {};

// Initialize triangle object
const triangle = {
    type: "right",
    angle: 90,
    sides: 3,
};

Es una práctica ampliamente aceptada incluir los puntos y coma después de cada declaración JavaScript, excepto las sentencias de bloque, que terminan entre corchetes.

Sangría

Un programa de JavaScript completo puede ser escrito técnicamente en una sola línea. Sin embargo, esto se convertiría rápidamente en muy difícil de leer y mantener. En su lugar, usamos líneas de nuevo y sangría.

He aquí un ejemplo de una sentencia condicional if / else , escrita en una línea o con líneas de nueva línea y sangría.

// Conditional statement written on one line
if (x === 1) { /* execute code if true */ } else { /* execute code if false */ }

// Conditional statement with indentation
if (x === 1) {
    // execute code if true
} else {
    // execute code if false
}

Observe que cualquier código incluido dentro de un bloque está sangrado. La sangría puede realizarse con dos espacios, cuatro espacios o presionando el carácter de tabulación. El uso de pestañas o espacios depende de sus preferencias personales (para un proyecto en solitario) o de las directrices de su organización (para un proyecto colaborativo).

Incluir la abrazadera de apertura al final de la primera línea, como en el ejemplo anterior, es la forma convencional de estructurar declaraciones de bloques de JavaScript y objetos. Otra forma en que puede ver las instrucciones del bloque escritas es con las llaves en sus propias líneas.

// Conditional statement with braces on newlines
if (x === 1)
{
    // execute code if true
}
else
{
    // execute code if false
}

Este estilo es mucho menos común en JavaScript que en otros idiomas, pero no desconocido.

Cualquier instrucción de bloque anidado se indentará.

// Initialize a function
function isEqualToOne(x) {
    // Check if x is equal to one
    if (x === 1) {
        // on success, return true
        return true;
    } else {
      return false;
    }
}

La sangría adecuada de su código es imprescindible para mantener la legibilidad y mitigar la confusión. Una excepción a esta regla a tener en cuenta es que las bibliotecas comprimidas tendrán carácteres innecesarios eliminados, para permitir tiempos más rápidos de carga de página (como en jquery.min.js y d3.min.js ).

IDENTIFICADORES

El nombre de una variable, función o propiedad se conoce como un identificador en JavaScript. Los identificadores constan de letras y números, pero no pueden incluir ningún símbolo fuera de $ y _ , y no pueden comenzar con un número.

Distingue Mayúsculas y Minúsculas

Estos nombres distinguen mayúsculas y minúsculas. Los dos ejemplos siguientes, myVariable y myvariable se refieren a dos variables distintas.

var myVariable = 1;
var myvariable = 2;

La convención de los nombres JavaScript es que están escritos en camelCase, lo que significa que la primera palabra es minúscula, pero cada palabra siguiente comienza con una letra mayúscula. También puede ver variables globales o constantes escritas en mayúsculas, separadas por subrayados.

const INSURANCE_RATE = 0.4;

La excepción a esta regla son los nombres de clase, que a menudo se escriben con cada palabra que comienza en una letra mayúscula (PascalCase).

// Initialize a class
class ExampleClass {
    constructor() { }
}

Para asegurarse de que el código es legible, es mejor utilizar identificadores claramente diferentes a través de los archivos de programa.

Reservado

Los identificadores tampoco deben consistir en palabras clave reservadas. Las palabras clave son palabras en el lenguaje JavaScript que tienen una funcionalidad incorporada, como var , if , for y this .

Por ejemplo, no sería posible asignar un valor a una variable denominada var .

var var = "Some value";

Dado que JavaScript entiende que var es una palabra clave, esto resultará en un error de sintaxis:

SyntaxError: Unexpected token (1:4)

Para una referencia completa, vea esta lista de palabras clave reservadas (MDN)

Conclusión

Este tutorial le proporciona una descripción general de la sintaxis básica y la estructura de código de JavaScript. La sintaxis es importante tanto para la correcta ejecución del programa como para la legibilidad y capacidad de mantenimiento tanto para usted como para el colaborador en su código.

Hemos revisado muchas convenciones comunes de la sintaxis y el estilo de JavaScript en este tutorial, pero al final del día lo más importante para recordar es ser flexible y consistente con su equipo y organización.