1.2 – Tipos y variables

JavaScript es un lenguaje de tipo script compacto, parcialmente basado en objetos y guiado por eventos diseñado específicamente para el desarrollo de aplicaciones cliente-servidor («client-server») dentro del ámbito de Internet. Los programas JavaScript van incrustados en los documentos HMTL, y se encargan de realizar acciones en el cliente, como pueden ser pedir datos, confirmaciones, mostrar mensajes, crear animaciones, comprobar campos… Pero como cualquier lenguaje tenemos que tener una base de programación para usarlo y así tomar decisiones oportunas en cada caso.

Las Variables

JavaScript tiene la peculiaridad de ser un lenguaje débilmente tipado, esto es, se puede declarar una variable que ahora sea un entero y más adelante una cadena de texto.

Tenemos dos formas para declarar o instanciar (crear) una variable:

DECLARACIÓN IMPLÍCITA (Globales): Consiste en escribir únicamente el nombre y asignarle un valor.

nombre = ”Antonio”;

Si la variable es global existirá y se podrá cambiar su valor a lo largo de todo el código de esa página, aunque sea dentro de un método.

DECLARACIÓN EXPLÍCITA (Locales): Se usa la palabra reservada var o let, seguida del nombre de la variable.

var nombre = ”Antonio”;
let nombre2 = "Juan";
const nombre3 = "pepe";

En este caso la variable la definiremos como local, y su existencia estará asociada al código que la contiene. Si estamos dentro de un método solo existirá en dicho método, si lo tenemos en el flujo de código principal, esa variable no existirá en el “interior“ de los métodos.

Podemos instanciar o declarar las variables con o sin un valor asociado:

var nombre;
var apellido1;

O hacerlo en una sola línea separándolas con comas:
var nombre, apellido1, apellido2, direccion;

La asignación siempre va de derecha a izquierda:

var nombre = “Antonio Otero“;

Para declarar las variables debemos tener en cuenta las siguientes condiciones:

• Una variable no puede tener espacios.
• No podemos usar palabras reservadas por el sistema, for, if, while…
• No pueden empezar por un número.
• No debemos usar tildes ni signos. Ejemplo año -> annio;
• Usar nombre de variables que faciliten su identificación, Ejemplo x=12 -> ejeX=12.
• No usar nombres genéricos que puedan confundirnos más adelante. Ejemplo: var nombreCliente , nombreContacto, nombreComercial…

Declaraciones y modo estricto

JavaScript tuvo algunos cambios importantes introducidos en 2009 y 2015. La mayoría de estos cambios ampliaron la sintaxis del lenguaje con nuevos elementos, pero algunos de ellos se referían solo al funcionamiento de los intérpretes de JavaScript. A menudo se trataba de aclarar el comportamiento de los intérpretes en situaciones potencialmente erróneas, como en los casos de inicialización de variables sin ninguna declaración previa. Veamos un ejemplo:

nombre = "Antonio"
      alert(nombre)

Puedes ver que nos hemos olvidado de declarar la variable nombre. La sintaxis de JavaScript original permitía tal negligencia, y en el momento de la inicialización hizo esta declaración por nosotros. Parece una solución bastante buena, pero desafortunadamente a veces puede conducir a situaciones ambiguas y potencialmente erróneas (diremos algunas palabras más al respecto mientras discutimos el alcance).Vamos a modificar nuestro ejemplo:

"use strict";

height = 180; // -> Uncaught ReferenceError: height is not defined
console.log(height);

Al principio de nuestro código, agregamos «use strict»;. Esta sentencia ha cambiado radicalmente el comportamiento del intérprete. ¿Por qué? Lo usamos cuando queremos obligar al intérprete a comportarse de acuerdo con los estándares modernos de JavaScript. Entonces, siempre que no estés ejecutando un código realmente antiguo, siempre debes usarlo. Y esta vez, usar una variable sin su declaración anterior se trata como un error. La frase «use strict»; debe colocarse al principio del código. Hará que el intérprete se ocupe del resto del código utilizando el modo estricto, que es el estándar moderno de JavaScript. Todos los demás ejemplos de nuestro curso estarán preparados para funcionar en este modo de forma predeterminada, incluso si «use strict»; no siempre aparezca al principio del código.

Tipos de variables

En JavaScript podemos instanciar variables de diferentes formas según su alcance. Tenemos let y var para variables y const para las contantes, dependiendo del resultado que queramos obtener utilizaremos una u otra.

Constantes

La palabra clave const se usa para declarar contenedores similares a variables. Dichos contenedores se denominan constantes. Las constantes también se utilizan para almacenar ciertos valores, pero una vez que se han ingresado valores durante la inicialización, ya no se pueden modificar. Esto significa que este tipo de contenedor se declara e inicializa simultáneamente. Por ejemplo, la siguiente declaración de la constante saludo es correcta:

const saludo = "¡Hola!";

let y var

Hasta ahora, asumimos que después de declarar una variable, su nombre podría usarse en todo el código del programa (es decir, el alcance de la variable es global). Esto no es del todo cierto: el alcance de una variable depende de dónde se declare. Desafortunadamente, para una buena comprensión del alcance de una variable, necesitamos aprender algunos elementos de programación más, como instrucciones o funciones condicionales, que se analizarán con detalle más adelante en el curso. Así que aquí nos limitaremos a la información básica y volveremos a este tema en diferentes partes del curso. Uno de los elementos básicos que influyen en el alcance de las variables es un bloque del programa.

Bloques del Programa. Podemos separar el código de un programa en bloques. En los bloques que creamos usando llaves {}, hay un conjunto de instrucciones que, por alguna razón, deben tratarse de forma independiente. Los bloques suelen estar asociados a instrucciones condicionales, bucles o funciones, de las que hablaremos más adelante. También podemos separar un bloque de un programa que no tenga nada en especial, simplemente eligiendo un determinado rango de instrucciones (en la práctica, esto no está especialmente justificado, y por ahora solo lo haremos por motivos educativos).

Veamos un ejemplo:

let contador;
console.log(contador); // -> undefined
{
    contador = 1;
    console.log(contador); // -> 1
}
contador = contador + 1;
console.log(contador); // -> 2

Primero, declaramos la variable contenedor. Luego abrimos un bloque dentro del cual inicializamos esta variable y mostramos su contenido. Fuera del bloque, aumentamos el valor almacenado en la variable en 1 y lo mostramos nuevamente. En este caso, el intérprete ejecutará el programa como si no hubiera notado el bloque, pasando por las instrucciones antes del bloque, en el bloque y después del bloque. Crear un bloque aquí, sin, por ejemplo, instrucciones condicionales, no tiene una justificación real, es solo un ejemplo del uso de llaves {}.

var

En el caso de declaraciones de variables usando la palabra clave var, la situación es ligeramente diferente. La variable declarada utilizándola fuera de los bloques será, como en el caso de let, global, es decir, será visible en todas partes. Si la declaras dentro de un bloque, entonces… bueno, por lo general volverá a ser global.

Comencemos con un ejemplo simple:

var height = 180;
{
 var weight = 70;
    console.log(height); // -> 180
    console.log(weight); // -> 70  
}
console.log(height); // -> 180
console.log(weight); // -> 70

Como era de esperar, ambas variables, height y weight, resultan ser globales. ¿Las variables declaradas usando var siempre, independientemente del lugar de declaración, serán globales? Definitivamente no. El problema es que var ignora los bloques de programa ordinarios, tratándolos como si no existieran. Entonces, ¿en qué situación podemos declarar una variable local usando var? Sólo dentro de una función. Dedicaremos mucho espacio a discutir la función y luego volveremos al problema del alcance de la variable. Ahora intentaremos presentar y discutir solo un ejemplo simple, que mostrará que las variables var a veces también son locales.

Tipos de datos

Cuando declaramos una variable, esta no pertenece a ningún tipo en concreto, tiene un valor indefinido (Undefined). Los tipos de datos que estudiaremos en JavaScript son:

• String: Cadenas de texto.
• Number: Valores numéricos (enteros o decimales).
• Boolean: Booleanos (true o false).
• Object: Objetos.
• Null: Objeto que todavía no existe.
• Undefined: Indefinido.

Number

Enteros (integer): Podemos representar nú́meros enteros de tres formas distintas: en base 10 (la usual), en base 16 (hexadecimal) o en base 8 (octal). Para denotar un número hexadecimal lo haremos escribiendo delante del número 0x. Por ejemplo, 0xF3A2 se refiere a F3A2 en hexadecimal. Para denotar un número en base octal lo haremos precediendolo de un 0 (cero). Por ejemplo, 01763 se refiere a 1763 en octal.

let numero1 = 258;

Decimales o reales (float): Con ellos podremos representar números en coma flotante, usando notación decimal o científica. Se toma el número decimal y se normaliza, es decir, se corre el punto decimal tantos puestos a la izquierda o a la derecha como sean necesarios para que haya un único número distinto de cero antes del punto. Para ello, será necesario acompañar este desplazamiento del punto con la respectiva multiplicación o división por potencias de 10. El formato es el siguiente: X.YYYYYYeNN donde e (también puede ser E) significa exponente, y NN es el número al que elevar 10 para obtener el número. Por ejemplo, el número 123.298 se escribe 1.23298E2, mientras que 0.00123 se escribe 1.23E-3

let numero = 36.58;

Booleanos

Tomarán los valores de verdad true o false (1 o 0). El resultado de evaluar una condición sería un valor booleano.

 let estalisto = true;<br>

Nulos

El valor null es bastante específico. El valor en sí es primitivo, mientras que el tipo al que pertenece no es un tipo primitivo, como Number o undefined. Esta es una categoría separada, asociada con tipos complejos, como objetos. El valor null se usa para indicar que la variable no contiene nada y, en la mayoría de los casos, es una variable que pretende contener valores de tipos complejos.

Cadenas

En JavaScript, las cadenas vienen delimitadas por comillas dobles, o bien por comillas simples, y pueden tener cualquier combinación de letras, espacios, números y otros símbolos. Podemos, además, usar los caracteres de escape que tenemos para representar los saltos de línea y otros elementos. Estos caracteres solo serán efectivos en la vista del código impreso, por ejemplo en un terminal. Por el contrario, lenguajes como HTML, los ignorarán.

• \b Espacio hacia atrás
• \f Salto de página
• \n Nueva línea
• \r Retorno de carro
• \t Tabulación
• \\ Barra invertida : \
• \’ Comilla simple : ’
• \” Comilla doble : ”

Ejemplo:

let texto = "Esto es un texto cualquiera\n";

Concatenar cadenas

Además de las operaciones matemáticas que podemos hacer con las variables numéricas, podemos también trabajar con las cadenas de texto, para ello usaremos el símbolo + que trabajando con tipos de datos string(cadenas de texto), lo que hace es concatenar dichos textos.
Ejemplo:

let nombre = "Antonio";
let apellidos = "Otero Veiga";
let nombreCompleto = nombre + “ “ + apellidos;
//Como podemos ver concatenamos el nombre con un espacio en blanco y el apellido.

Comentarios

En JavaScript tenemos dos tipos de comentarios, de línea y de párrafo. Para los comentarios de línea basta con empezar dicha línea con //.

Ejemplo:

alert(‘mensaje‘) // esto es un comentario.
// esto es otro comentarioPara los comentarios de párrafo encerraremos el texto en cuestión entre /* texto */ , al igual que en CSS y otros lenguajes podremos incluir todo el texto que queramos.

          /*
          Esto es un comentario
          de varias líneas
          */

Operadores

Aritméticos

Los operadores aritméticos son binarios (necesitan dos operandos), y realizan sobre sus operandos alguna de las operaciones aritméticas conocidas. En concreto, tenemos:

Operadores aritméticosEjemplos:

/ Ejemplo Suma:
var num1 = 5;
var num2 = 6;
var resultado = num1 + num2 // El valor de la variable resultado será 11

// Ejemplo Resta:
var num1 = 10;
var num2 = 6;
var resultado = num1 - num2 // El valor de la variable resultado será 4

// Ejemplo Producto:
var num1 = 10;
var num2 = 6;
var resultado = num1 * num2 // El valor de la variable resultado será 60

// Ejemplo Cociente:
var num1 = 10;
var num2 = 2;
var resultado = num1 / num2 // El valor de la variable resultado será 5

// Ejemplo Módulo:
var num1 = 9;
var num2 = 2;
var resultado = num1 % num2 // El valor de resultado será 1 que es el resto de la

El operador de asignación (=) puede también puede combinarse con un operador aritmético. variable = variable operador Aritmético expresión puede cambiarse por: variable operador Aritmético = expresión es decir:

Comparación de expresiones aritméticas.

Ejemplo:

let num1 = 8;
let num2 = 3;
num1 += num2 // Ahora la variable num1 tiene el valor de 11, que es la suma de 8+3;

Comparación

Los operadores de comparación son binarios y su resultado es un booleano (un valor de verdad). Nos permiten expresar si una relación de igualdad/desigualdad es cierta o falsa dados los operandos.

Ejemplos:

var numero1 = 3;
var numero2 = 5;
resultado = numero1 > numero2; // Resultado = false
resultado = numero1 < numero2; // resultado = true
numero1 = 5;
numero2 = 5;
resultado = numero1 >= numero2; // Resultado = true
resultado = numero1 <= numero2; // Resultado = true
resultado = numero1 == numero2; // Resultado = true
resultado = numero1 != numero2; // Resultado = false
texto1 = “hola”;
texto2 = “hola”;
texto3 = “adios”;
resultado = texto1 == texto3; // Resultado = false
resultado = texto1 != texto2; // Resultado = false
resultado = texto3 >= texto2; // Resultado = false
numero1 = 001;
numero2 = 1;
resultado = numero1 === numero2; // Resultado = false
resultado = numero1 == numero2; // Resultado = true

Incrementos y decrementos

Los operadores de incremento aumentan o disminuyen en una unidad el número al que se le aplica. Estos operadores debemos aplicarlos siempre a una variable cuyo valor sea un número entero. Para aumentar en una unidad se usa la expresión ++.

let num1 = 5;
num1++ //ahora num1 es igual a 6

Para disminuir en una unidad se usa la expresión –.

let num2 = 8;
num2-- //ahora num2 es igual a 7

Lógicos

Los operadores lógicos sirven para componer condiciones más simples por medio de las reglas de la y, o y no lógicas. Nos permiten expresar condiciones compuestas de las que queremos averiguar su valor de verdad.

&& AND (y lógica)
|| OR (o lógica)
! NOT (no lógico)

Ejercicios

Ejercicio 1

Realizando cálculos con variables, desarrolla el código necesario para hacer las siguientes operaciones.

1. Si en el mercado tenemos que 12 manzanas nos cuestan 3 euros, ¿cuánto nos costarían 17 manzanas?
2. Si tengo 37 euros ¿Cuántas manzanas me puedo comprar?.
3. Cuál es el precio de una manzana.

Para que el resultado aparezca en la pantalla utiliza el método document.write(). Ejemplo:

<script type=”text/javascript”>
dato = “hola“;
document.write(dato) // imprimirá por pantalla el texto hola.
</script>

Ejercicio 2

Crea en un documento con código JS, las siguientes variables.

                let nombre="Pepu";
                let direccion="Madrid"
                let edad= 9

Ahora crea una nueva variable, llamada frase, que contenga un string embebiendo los valores de las variables.
Ejemplo: -> Pepú tiene 9 años y vive en Madrid.

• Puedes utilizar, document.write(‘texto a imprimir’) o un console.log(‘texto a imprimir por terminal’)
• Cambia el valor de las variables y comprueba el resultado.