Javascript (Conceptos claves) #

Enlaces de interés #

• recursividad en javascript
• certificación JS freeCodeCamp Ingles
• certificación JS freeCodeCamp Español

interpolación template string #

Las plantillas literales son cadenas literales que habilitan el uso de expresiones incrustadas. Con ellas, es posible utilizar cadenas de caracteres de más de una línea, y funcionalidades de interpolación de cadenas de caracteres.

• template string

Las plantillas de cadena de caracteres pueden contener marcadores, identificados por el signo de dólar y envueltos en llaves ${expresión}. Las expresiones contenidas en los marcadores, junto con el texto entre ellas, son enviados como argumentos a una función.

Interpolación de expresiones #

• barra invertida "alt + 92"
• acento grave "alt + 96"

let nombreUsuario = "bluuweb";
console.log("\nBienvenido: \n" + nombreUsuario + "\n");

con las plantillas literales, se pueden utilizar sus nuevas capacidades (es decir, insertar expresiones con ${ } e incluir caracteres de fin de linea literales dentro de la cadena) para simplificar la sintaxis:

let nombreUsuario = "bluuweb";
console.log(`
Bienvenido: 
${nombreUsuario}
`);

Métodos

let nombreUsuario = "bluuweb";
console.log(`Bienvenido: ${nombreUsuario.toUpperCase()}`)

Operador ternario

let nombreUsuario = "bluuweb"
let estado = false

console.log(`
${estado ? 'Bienvenido!' : 'Adiós!'} ${nombreUsuario}
`);

var vs let vs const #

Uno de los mayores problemas al declarar variables con var, es que puede sobrescribir las declaraciones de variables sin errores.

var estado = true;
var estado = false;
console.log(estado);

En una aplicación pequeña, es posible que no se encuentre con este tipo de problema, pero cuando su código se agrande, puede sobrescribir accidentalmente una variable que no tenía la intención de sobrescribir.

Debido a que este comportamiento no arroja un error, la búsqueda y corrección de errores se vuelve más difícil. Se introdujo let una nueva palabra clave llamada en ES6 para resolver este problema potencial con var.

• let: Una variable con el mismo nombre solo se puede declarar una vez.

let estado = true;
let estado = false;
console.log(estado);

Pero si se puede cambiar su valor:

let estado = true;
estado = false;
console.log(estado);

Scope #

Siguiendo con el tema de las variables en Javascript, conozcamos el scope.

Cuando declaras una variable con var, se declara globalmente o localmente si se declara dentro de una función.

var estado = true
if (estado) {
    var estado = false
}
console.log(estado)

let se comporta de manera similar, pero con algunas características adicionales. Cuando declaras una variable con let dentro de un bloque, declaración o expresión, su alcance se limita a ese bloque, declaración o expresión.

let estado = true
if (estado) {
    let estado = false
    console.log(estado)
}
console.log(estado)

Prueba esto:

for (let i = 0; i < 10; i++) {
    console.log(i)
}
console.log(i)

const #

const tiene todas las características increíbles de let, con la ventaja adicional de que las variables declaradas usando const son de solo lectura. Son un valor constante, lo que significa que una vez que se asigna una variable const, no se puede reasignar.

Error:

const estado = true
estado = false

Error:

for (const i = 0; i < 10; i++) {
    console.log(i)
}

Válido:

const estado = true
if (estado) {
    const estado = false
    console.log(estado)
}
console.log(estado)

Array vs const #

Es importante comprender que los objetos (incluidos los arreglos y las funciones) asignados a una variable mediante el uso const siguen siendo mutables. El uso de const solo evita la reasignación del identificador de variable.

Error:

const miArray = []
miArray = ["nuevoElemento"]

Válido:

const miArray = []
miArray[0] = ["nuevoElemento"]
console.log(miArray)

Array (push, pop, shift, unshift) #

El método push() añade uno o más elementos al final de un array y devuelve la nueva longitud del array.

const frutas = ["Banana"]
frutas.push("Sandía")
console.log(frutas)

El método unshift() agrega uno o más elementos al inicio del array, y devuelve la nueva longitud del array.

const frutas = ["Banana"]
frutas.unshift("Sandía")
console.log(frutas)

El método pop() elimina el último elemento de un array y lo devuelve. Este método cambia la longitud del array.

const frutas = ["manzana", "pera"];

frutas.unshift("uva");

const frutaEliminada = frutas.pop();

console.log(frutas);
console.log(frutaEliminada);

El método shift() elimina el primer elemento del array y lo retorna. Este método modifica la longitud del array.

const frutas = ["manzana", "pera"];

frutas.unshift("uva");

const frutaEliminada = frutas.shift();

console.log(frutas);
console.log(frutaEliminada);

Práctica: carrito de compras #

• El objetivo es crear una aplicación que nos permita ir agregando elementos a un carrito de compras: ver ejemplo
• confirm(): muestra una ventana de diálogo con un mensaje opcional y dos botones, Aceptar (true) y Cancelar (false).

Solución:

const frutas = []
const fruta = prompt('🍒 Feria Market 🍉 ¿qué fruta desea comprar?')

frutas.push(fruta)

while (confirm('¿Desea agregar otro elemento al 🛒?')) {
    const fruta = prompt('¿qué fruta desea comprar?')
    frutas.push(fruta)
}

console.log('Ustede compró: ')
for (let fruta of frutas) {
    console.log(fruta)
}

Funciones anónimas #

En JavaScript, usualmente no necesitas nombrar tus funciones, especialmente cuando se pasa una función como argumento a otra función. En su lugar, creamos funciones inline (en línea). No necesitamos nombrar estas funciones porque no las reutilizamos en otro lugar.

Función declarativa:

// declaro la función
function numAleatorioRango(min, max) {
    return Math.floor(Math.random() * (max - min)) + min;
}

// invoco la función
console.log(numAleatorioRango(1, 11))

Función expresada:

Anónima (expresada en una variable):

const miNumero = function (min, max) {
    return Math.floor(Math.random() * (max - min)) + min;
}
console.log(miNumero(1, 11))

Diferencia declarativa vs Expresada:

console.log(miNumero(1, 11))
const miNumero = function (min, max) {
    return Math.floor(Math.random() * (max - min)) + min;
}

ES6 nos proporciona el azúcar sintáctico, para no tener que escribir funciones anónimas de este modo. En su lugar, puedes usar la sintaxis de función flecha.

Arrow functions #

• Arrow functions: Una expresión de función flecha es una alternativa compacta a una expresión de función tradicional

const miNumeroFlecha = (max) => {
    return Math.floor(Math.random() * (max - 1)) + 1;
}

console.log(miNumeroFlecha(11))

Reducción:

const miNumeroFlecha = max => Math.floor(Math.random() * (max - 1)) + 1;
        
console.log(miNumeroFlecha(11))

Reducción con paréntesis:

const miNumeroFlecha = max => (Math.floor(Math.random() * (max - 1)) + 1);
        
console.log(miNumeroFlecha(11))

Más parámetros:

const miNumeroFlecha = (min, max) => Math.floor(Math.random() * (max - min)) + min;

console.log(miNumeroFlecha(1, 11))

Parámetros opcionales (también se puede hacer con function):

const miNumeroFlecha = (min = 1, max = 10) => Math.floor(Math.random() * (max - min)) + min;

console.log(miNumeroFlecha())

Arrow & forEach() #

• forEach(): El método forEach() ejecuta la función indicada una vez por cada elemento del array.

let frutas = ["manzana", "sandía", "pera"]
frutas.forEach(fruta => console.log(fruta))

let frutas = ["manzana", "sandía", "pera"]
frutas.forEach((fruta, index, array) => {
    console.log(index)
    console.log(fruta)
    console.log(array)
})

En nuestro ejemplo de carrito de compras:

const carrito = []
const fruta = prompt('🍒 Feria Market 🍉 ¿qué fruta desea comprar?')

carrito.push(fruta)

while (confirm('¿Desea agregar otro elemento al 🛒?')) {
    const fruta = prompt('¿qué fruta desea comprar?')
    carrito.push(fruta)
}

console.log('Ustede compró: ')
carrito.forEach((fruta, index) => (
    console.log(`${index + 1}: ${fruta}`)
))

Todavía nos quedan muchas cositas interentes de las arrow function pero antes tenemos que conocer los objetos en Javascript. Nos vemos en la próxima sección 😍