====== JavaScript ======

Lenguaje de programación interpretado.

  * [[https://developer.mozilla.org/es/docs/Web/JavaScript|Web oficial]]

===== Secciones =====

  * [[informatica:programacion:javascript:variables_constantes|JavaScript: variables y constantes]]
  * [[informatica:programacion:javascript:tipos_de_datos|Tipos de datos]]
  * [[informatica:programacion:javascript:incluir_javascript|Incluir código JavaScript en una web]]
  * [[informatica:programacion:javascript:estructuras_control|Estructuras de control]]
===== Variables =====

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

<code javascript>
let nombre = "Pepito";
</code>

<WRAP center round info 60%>
''var'' crea variables de ámbito global.
</WRAP>

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

==== Template strings ====

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 ''${}'':

<code javascript>
let nombre = "Pepito";
let apellidos = "Grillo";

console.log(`${nombre} ${apellidos}`); // Salida: "Pepito Grillo"
</code>

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

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

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'':

<code javascript>
const nombre = "Pepito";
</code>

===== Destructuring =====

==== Objetos ====

Partimos de un objeto literal:

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

Si queremos extraer las propiedades del objeto:

<code javascript>
const {nombre, apellidos, edad} = persona;

console.log(nombre, apellidos, edad);
</code>

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

<code javascript>
const nombre = persona.nombre;
const apellidos = persona.apellidos;
const edad = persona.edad;

console.log(nombre, apellidos, edad);
</code>

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

<code javascript>
function imprimePersona({nombre, apellidos, edad}) {
    console.log(nombre, apellidos, edad);
}

imprimePersona(persona);
</code>

==== Arrays ====

<code javascript>
const personas = [
    "Pepito",
    "Fulanito",
    "Menganito"
];

const [p1, p2, p3] = personas;

console.log(p1, p2, p3); // Pepito, Fulanito, Menganito
</code>

Si solo quisiésemos coger el último:

<code javascript>
const [, , p3] = personas;

console.log(p3); // Menganito
</code>

===== Funciones de flecha =====

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

<code javascript>
function sumar(a, b) {
    return a + b;
}

console.log(sumar(5,2)); // 7
</code>

Transformación a una **función de flecha**:

<code javascript>
const sumar = (a, b) => {
    return a + b;
}
</code>

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:

<code javascript>
const sumar = (a, b) => a + b;
</code>

===== Callback =====

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:

<code javascript>
setTimeout(function() {
    console.log("Hola, mundo");
}, 1000);
</code>

Un ejemplo más complejo:

<code javascript>
const getUsuarioByID = (id, callback) => {

    const user = {
        id: id,
        nombre: "Pepito"
    }
    
    setTimeout( () => {
        callback(user)
    }, 1500)
    
}

getUsuarioByID(10, (usuario) => {
    console.log(usuario);
});
</code>

===== Consola =====

==== Limpiar ====

<code javascript>
console.clear();
</code>

==== Escribir ====

<code javascript>
console.log("Hola, mundo!");
</code>

===== Frameworks =====
 
  * [[informatica:programacion:javascript:vue.js|Vue.js]]
  * [[https://angular.io/|Angular]]
  * [[https://reactjs.org/|React]]


===== Recursos =====

  * [[https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_scroll_to_top|Botón de volver al inicio]]
  * [[https://www.tutorialrepublic.com/faq/how-to-determine-if-variable-is-undefined-or-null-in-javascript.php|Cómo determinar si una variables es undefined o null]]
  * [[https://exploringjs.com/impatient-js/index.html|JavaScript for impatient programmers (ES2021 edition)]]
  * [[https://www.w3schools.com/js/default.asp|JavaScript Tutorial]] (W3Schools)
  * [[https://kbpsystem777.github.io/You-Dont-Know-JS/|You Don’t Know JS (book series)]]

==== Libros ====

  * [[https://nostarch.com/ejs3|Eloquent JavaScript]], de Marijn Haverbeke. Tiene [[https://eloquentjavascript.net/|versión online]] (gratuita).
  * [[https://www.oreilly.com/library/view/javascript-the-definitive/9781491952016/|JavaScript: The Definitive Guide]], de David Flanagan
  * [[https://github.com/getify/You-Dont-Know-JS/blob/1st-ed/README.md|You don't know JS]], de Kyle Simpson
    * [[https://github.com/getify/You-Dont-Know-JS|You don't know JS yet]], de Kyle Simpson.