Lección 2: Variables

Las variables sirven para guardar un contenido en la memoria que más adelante necesitarás leer o modificar: textos, números, booleanos o diccionarios.

La sintaxis se estructura de la siguiente forma:

[tipo] [clave] = [valor];

por ejemplo

const nombre = 'Andrea';

Las claves no pueden contener espacios, acentos, ñ o empezar por un número.

const nombre = 'Andrea'; // Bien
const 2nombre = 'Joan'; // Mal
const nombre con apellido = 'Joan Chamorro'; // Mal
const nombreConApellido = 'Andrea Motis'; // Bien, se usa el formato camelCase

En lugar de los espacios se utiliza, por convenido, el formato camel case: en la siguiente palabra debe empezar por mayúscula.

const musicoConInstrumento = 'Joan Chamorro';
const musicoYCantante = 'Andrea Motis';

Tipos

Después de entender como se estructura, es el momento de entender los 3 tipos que puedes utilizar:

• const: acceso local, solo lectura.
• let: acceso local, lectura y editable.
• var: acceso global, lectura y editable.

El acceso local implica que solo se puede acceder a la variable en el contexto donde se esta ejecutando la aplicación. En otras palabras, no lo puedes utilizar fuera de unas {}.

Observa como ha sido aplicado los tipos en 3 variables diferentes:

const discografica = 'jazztojazz';
let pistas = 16;
var titulo = 'Feeling good';

Tipos de contenido

El valor de la variable puede ser de diferentes tipos.

Texto (String)

Puede ser con comillas simples o dobles .

const nombre = 'Lucia';

Números enteros (Integer)

const edad = 31;

Decimales (Float)

Usando el punto en lugar de la coma .

const altura = 1.72;

Verdad o mentira (Boolean)

const mayorEdad = true;
const fumador = false;

Nulo (null)

const dieta = null;

Indefinido (undefined)

Ausencia de valor. No debemos asignarlo.

const salud = undefined;

JSON (objeto)

Es un valor que contiene otras valores. Se utiliza para guardar una estructura compleja en una variable.

[tipo] [clave] = {
    [subclave]: [valor],
    [subclave]: [valor]
};

Las subclaves se separan entre sí por comas.

por ejemplo

let disco = {
    pistas: 16,
    titulo: 'Feeling good',
    discografica: 'jazztojazz'
};

No cometas el error de añadir una coma (,) en la última línea.

Operaciones aritméticas

Se usan los mismos elementos que conoces. Por ejemplo para sumar 2 variables. Usaríamos el símbolo +.

const num1 = 10;
const num2 = 5;
const resultado = num1 + num2;

console.log(resultado);
// 15

Aunque también es posible trabajar con los valores.

const resultado = 20 + 3;

console.log(resultado);
// 23

Otras operaciones disponibles:

Sumar

const resultado = num1 + num2;

Restar

const resultado = num1 - num2;

Dividir

const resultado = num1 / num2;

Multiplicar

const resultado = num1 * num2;

Resto

const resultado = num1 % num2;

Potencia (Elevado a…)

const resultado = num1 ** num2;

Paréntesis

Si necesitas realizar operaciones más complejas puede apoyarte en paréntesis.

const resultado = (5 * 2) + (10 / 2)

console.log(resultado);
// 15

Incremento o disminución

Si deseas aumentar un número, o reducirlo, puedes usar la siguiente estrategia.

let numero = 1;
numero += 1;
// 2

Es el equivalente a hacer:

let numero = 1;
numero = numero + 1;
// 2

Un atajo muy utilizado es usar ++ 0 --. Te adelanto que la variable no puede ser una constante.

let numero = 1;
numero++;
// 2

let segundoNumero = 1;
numero--;
// 0

Modifica el valor aumentando o disminuyendo en 1.

Aunque debes saber que existe la posibilidad de usarlo como prefijo o sufijo con diferentes devoluciones.

//// Incrementando con sufijo ++
let numero = 5;
console.log(numero++)
// 5
console.log(numero)
// 6

//// Incrementando con prefijo ++
let numero = 5;
console.log(++numero)
// 6
console.log(numero)
// 6

La diferencia es:

• numero++: Incrementa pero te devulve el valor sin modificar, el anterior.
• ++numero: Incrementa y te devulve el valor modificado.

También se aplica, de igual modo, con --.

Manipulación

Concadenar

Para unir varios strings disponemos de varias maneras.

Con el símbolo del +.

const nombre = 'Atila';
const apodo = ' el huno';
const completo = nombre + apodo;

console.log(completo);
// Atila el huno

Con plantillas etiquetadas (Tagged templates).

const zona = 'Mancha';
const libro = `En un lugar de la ${zona} cuyo nombre no me quiero acordar...`;

console.log(libro);
// En un lugar de la Mancha cuyo nombre no me quiero acordar...

O con la función concat().

const lugar = 'Notre-Dame tiene una altura de ';
const altura = 128;
const medida = ' metros';
const textoCompuesto = ''.concat(lugar, altura, medida);

console.log(textoCompuesto);
// Notre-Dame tiene una altura de 128 metros

Son 3 formas de hacer lo mismo, pero siempre que puedas utiliza plantillas etiquetadas por ser más moderno y su facilidad de lectura.

Manipular strings

Un string dispone de una gran cantidad de funcionalidades para transformar los textos.

const cadenaNormal = 'El 90% de nuestras decisiones las toma nuestro subconsciente';

// Convierte en mayusculas
const cadenaMayusculas = cadenaNormal.toUpperCase();

// Convierte en minúsculas
const cadenaMinusculas = cadenaNormal.toLowerCase();

// Número de carácteres
const longitud = cadenaNormal.length;

Puedes conocer otras funcionalidades en la documentación de Mozilla.

Intercambiar tipos

En ciertos momentos necesitarás cambiar un tipo por otro para hacer operaciones aritméticas o transformaciones. Un caso habitual: tengo un número y quiero saber por cuantas cifras esta formado. Debería convertirlo a string para a continuación usar .length (un número no dispone de la funcionalidad para saber su longitud).

Cuando llegue el caso de cambiar tipos, encontrarás varias herramientas.

Integer/Float a String

Para transformar un número a un texto dispones de 2 posibilidades.

Usando el operador +.

const miTexto = 45.3 + '';

o la función .toString().

const miTexto = (45.3).toString();

String a Integer/Float

Para pasar de un texto a un número con decimales o entero, haremos uso de dos funciones.

// Número entero
const miNumero = parseInt('45');

// Número con decimales
const miDecimal = parseFloat('45.3');

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

Nueva replica  {{ formatEllipsisAuthor(replyComment.author) }}

Acepto la política de Protección de Datos.

Publicar ¡Publicado! ¡Ups! Algo ha fallado, ¿Reintentamos? Enviando...

Escribe el primer comentario