Apuntes JavaScript – Conceptos básicos

Características generales

La sintaxis de JavaScript es muy similar a la de otros lenguajes de programación como Java y C. Las normas básicas que definen la sintaxis de JavaScript son las siguientes:

  • No se tienen en cuenta los espacios en blanco y las nuevas líneas. el código se puede ordenar de forma adecuada para entenderlo mejor (tabulando las líneas, añadiendo espacios, creando nuevas líneas, etc.)
  • Es sensible a mayúsculas y minúsculas.
  • No se define el tipo de las variables.
  • Las variables puede cambiar de tipo durante el desarrollo del script.
  • No es necesario terminar cada sentencia con el carácter de punto y coma (;)
    No es obligatorio, pero es conveniente realizarlo para evitar posibles confusiones, personalmente me resulta más cómodo y mantienes la costumbre de otros lenguajes.

Comentarios

Los comentarios se utilizan para añadir información en el código fuente del programa. Aunque el contenido no se visualiza por pantalla, si que se envía al navegador del usuario, es necesario extremar precauciones sobre la información incluida en los mismos.

JavaScript dispone de comentarios de línea y de bloque.

Comentarios de línea //

Estos comentarios, se encuentran a partir de las dos barras (//) y siempre en esa misma línea.

// Esto es un texto de prueba que no se  mostraría en pantalla.
alert("hola mundo");

Como vemos, el texto que continúa en la línea del comentario está en gris, indicando que no se ejecutaría ninguna acción en caso de haberla, normalmente se usa para incluir información adicional que explique lo que hacemos.

Comentarios de bloque /* ….*/

Para comentar un bloque completo, incluimos en el inicio /* a continuación todo el texto que deseemos comentar, y finalmente, para indicar que termina el comentario incluimos */

/* Este es un ejemplo de un comentario que incluye varias líneas
primera linea del comentario
segunda linea del comentario
tercera linea del comentario */
alert("Hola Mundo");

Variables: var, let y const

Antes de comenzar, varios conceptos de interés:

scope de una variable: hace referencia al lugar donde esta existe, o donde podrá ser accesible. Podríamos decir también que es el alcance que determina la accesibilidad de las variables en cada parte de nuestro código.

bloque: conjunto de instrucciones de JavaScript que se encuentran delimitadas entre llaves {}

En JavaScript la visibilidad de las variables es de ámbito global y todo se pasa por referencia a scopes descendientes o herederos, es un lenguaje de programación con el ámbito global como ámbito, visibilidad o scope predeterminado y en el que todo se pasa por referencia también de forma predeterminada.

Esto significa que una variable declarada fuera de una función es una variable global y es pasada por referencia a scopes descendientes o herederos.

var

la declaración con var define una variable en el ámbito local actual y se hereda a scopes descendientes por referencia.

Si la variable es declarada fuera de una función, la variable será una variable global.

Una variable declarada exclusivamente dentro de una función, no existe fuera de la misma, pues sería una variable local para esa función.

let

Esta instrucción let declara una variable de alcance local con ámbito de bloque (block scope), la cual, opcionalmente, puede ser inicializada con algún valor.

Si en un bloque ya existe una variable let e intentamos crear de nuevo la variable, nos dará un error, esto con var no sucede, ya que directamente reescribiría la variable anterior.

Si declaramos una variable con let dentro un bloque que a su vez está dentro de una función, la variable pertenece solo a ese bloque.

Ejemplo de var y let:

var a = 5; 
var b = 10; 

if (a === 5) { 
  let a = 4; // El alcance es dentro del bloque if 
  var b = 1; // El alcance es global 

  console.log(a);  // 4 
  console.log(b);  // 1 
}  
console.log(a); // 5 
console.log(b); // 1 

Como podemos ver, en el código anterior, la variable “a” se encuentra asignada mediante var de forma global, en un principio se le asigna un valor 5, igual pasa con “b”.

En el bloque if se les reasigna un nuevo valor, vemos como a en esta ocasión es asignada mediante let, lo que hace que esta variable a sea diferente a la anterior y sólo va a existir durante este bloque, por eso al mostrar por primera vez en consola leerá el valor de la a que prevalece, el del bloque. Sin embargo, al salir, del bloque if, a continuará teniendo el valor inicial de 5.

En el caso de b, con var hemos realizado una reasignación, pero la variable modificada es la misma que teníamos fuera del bloque, que es heredada, con lo que se mostrará por pantalla en ambos casos el nuevo valor (1).

Muchos desarrolladores se inclinan hacia let como la forma predeterminada de declarar variables en JavaScript, pues el scope más específico previene la sobreescritura de variables de forma accidental al declarar variables sin ensuciar el scope superior.

const

Este tipo de asignación indica que la variable tiene un valor constante, cuyo ámbito o scope es, al igual que con let, el bloque.

Esta declaración previene tanto a sobreescritura (como hace let), pero también lo hace con la reasignación de valores.

Siempre que el valor del objeto que almacena la variable sea inmutable, este no se podrá modificar, sin embargo, si contiene, por ejemplo, un array, se podrá cambiar los valores de los elementos que este contiene.

Ejemplo:

const alumno = {nombre : 'Manolo'};
alumno.nombre = "Jose";
console.log(alumno.nombre); // "Jose"

const user = { name: ‘Juan’ };

user.name = ‘Manolo’;

console.log(user.name); // Manolo

Resumiendo

  • var declara una variable de scope global o local para la función sin importar el ámbito de bloque.
  • let declara una variable de scope global, local para la función o de bloque.
  • const declara una variable de scope global, local para la función o de bloque. No es reasignable, pero es mutable. No permite hoisting.

En general, let sería todo lo que se necesita dentro de un bloque, función o ámbito global. const sería para variables que no van sufrir una reasignación. var se puede relegar para cuando necesitemos hacer hoisting, vamos, casi nunca.

Resumen extraído de Cybmeta