JavaScript

Lenguaje de programación interpretado.

• Web oficial

• JavaScript: variables y constantes
• Tipos de datos
• Incluir código JavaScript en una web
• Estructuras de control

Antiguamente se utilizaba la palabra reservada var. Aunque se pueda seguir utilizando, lo recomendable es utilizar let para la creación de variables:

let nombre = "Pepito";

Cualquier variable o constante que no tiene un valor por defecto es undefined.

Cuando queremos concatenar strings, podemos utilizar el operador de concatenación (+) o emplear las template strings que se encierran entre acentos graves (`) y las variables se encierran entre ${}:

let nombre = "Pepito";
let apellidos = "Grillo";
 
console.log(`${nombre} ${apellidos}`); // Salida: "Pepito Grillo"

Los template strings también permiten strings multilínea:

const html = `
    <p>Hola</p>
    <p>Este es otro párrafo</p>
`;

Se utilizan cuando queremos definir valores que no se modificarán a lo largo de la ejecución del programa. Se declaran con la palabra reservada const:

const nombre = "Pepito";

Partimos de un objeto literal:

const persona = {
    nombre: "Pepito",
    apellido: "Grillo",
    edad: 109,
    getNombre: function() {
        return `${this.nombre} ${this.apellido}`;
    }
}

Si queremos extraer las propiedades del objeto:

const {nombre, apellidos, edad} = persona;
 
console.log(nombre, apellidos, edad);

Gracias a esta característica de “desestructuración” nos ahorramos tener que hacer lo siguiente:

const nombre = persona.nombre;
const apellidos = persona.apellidos;
const edad = persona.edad;
 
console.log(nombre, apellidos, edad);

También podemos desestructurar el objeto dentro de una función:

function imprimePersona({nombre, apellidos, edad}) {
    console.log(nombre, apellidos, edad);
}
 
imprimePersona(persona);

const personas = [
    "Pepito",
    "Fulanito",
    "Menganito"
];
 
const [p1, p2, p3] = personas;
 
console.log(p1, p2, p3); // Pepito, Fulanito, Menganito

Si solo quisiésemos coger el último:

const [, , p3] = personas;
 
console.log(p3); // Menganito

Declaración típica de una función:

function sumar(a, b) {
    return a + b;
}
 
console.log(sumar(5,2)); // 7

Transformación a una función de flecha:

const sumar = (a, b) => {
    return a + b;
}

Para este ejemplo, como la función tiene solo una línea y esa línea es el return, se podría resumir de la siguiente manera:

const sumar = (a, b) => a + b;

Una función de callback es una función que se pasa a otra función como un argumento, que luego se invoca dentro de la función externa para completar algún tipo de rutina o acción.

La función setTimeout admite un callback como argumento:

setTimeout(function() {
    console.log("Hola, mundo");
}, 1000);

Un ejemplo más complejo:

const getUsuarioByID = (id, callback) => {
 
    const user = {
        id: id,
        nombre: "Pepito"
    }
 
    setTimeout( () => {
        callback(user)
    }, 1500)
 
}
 
getUsuarioByID(10, (usuario) => {
    console.log(usuario);
});

console.clear();

console.log("Hola, mundo!");

• Vue.js
• Angular
• React

• Botón de volver al inicio
• Cómo determinar si una variables es undefined o null
• JavaScript for impatient programmers (ES2021 edition)
• JavaScript Tutorial (W3Schools)
• You Don’t Know JS (book series)

• Eloquent JavaScript, de Marijn Haverbeke. Tiene versión online (gratuita).
• JavaScript: The Definitive Guide, de David Flanagan
• You don't know JS, de Kyle Simpson
  • You don't know JS yet, de Kyle Simpson.