Javascript 911.md

// Herencia por prototipado
var a = Object.create(null) // Esta es la única forma de crear un objeto sin prototipo
a.__proto__ === null
var b = Object.create(a)
b.__proto__ === a // true
a.x = 5
b.x // 5, la propiedad `x` se busca primero en `b` y luego en `b.__proto__`
b.x = 6
b.x // 6, la propiedad `x` se busca en `b`
a.x // 5, la propiedad `x` ahora existe 2 veces, una en `b` con el valor 6 y otra en `a` con el valor 5
a["x"] // esto es exactamente lo mismo que `a.x`, el `a.x` es solo la forma más azucarada de hacerlo
// Se puede pensar a la "cadena de prototipos" de un objeto como una lista enlazada. Las propiedades
// se buscan primero en el objeto, y si no se encuentran, en su prototipo, y si no en su prototipo y asi...


// Expresiones regulares
/a/
/fdsae+/gi.test("FSAEEE")

// Lo que hace el `new`.
function sum() {}
sum instanceof Object // true
sum.name // "sum"
console.log(this === window) // true, el `this` global es window
function sum(a, b) { console.log(this === window, this); return a + b; }
var a = new sum(a, b) // usando new el `this` local es un objeto de tipo `sum`
a instanceof sum // true, usando new, el valor de retorno de la función `sum` se ingora completamente
a.__proto__ === sum.prototype // la propiedad `__proto__` es especial, significa que hereda campos de ahí

El DOM. Document Object Model. Un mapeo 1 a 1 entre objetos de Javascript y el HTML que se ve en pantalla. La mejor forma de trabajar con él es borrarlo y regenerarlo de nuevo en cada vista. Se usa un DOM de mentirita (virtual DOM) para optimizar este paso (como es solo una optimización, en los casos de uso simples, no vale la pena preocuparse). Ejemplo de un DOM virtual:

type VNode =
    | { attributes: { [attr: string]: string }, properties: { [property: string]: unknown }, children: Array[Node] }
    | { text: string }

HTML tiene atributos:

<p class="flex flex-column" title="Chau">
    <b>Hola</b>
</p>

Los atributos de <p> son:

1. "class" con el valor "flex flex-column"
2. "title" con el valor "Chau"

Los hijos de <p> son:

1. El espacio en blanco previo al <b> (un enter y cuatro espacios)
2. El <b> con hijo: 2.1 Hola
3. El enter después del <b>

Cada uno de esos atributos se puede acceder usando getAttribute y setAttribute.

Pero también están las propiedades:

var div = document.querySelector("div")
div.getAttribute("class")
// Hacer `div.class` sería un syntax error porque `class` es una palabra reservada
div.className
div.setAttribute("class", "hola")

El atributo es class, la propiedad es className. No todos los atributos tienen su propiedad, solamente algunos "especiales", como el value del input o el style que recibe un objeto en vez de un string.

Para leer los hijos de nuestro <p> de arriba usamos firstChildElement en vez de firstChild, y nextElementSibling en vez de nextSibling, y children en vez de childNodes. Un Element es un Nodo que no es ni espacio en blanco ni texto.

El texto (en nuestro ejemplo sería solamente el Hola) no es un Element. O sea que si hacemos const b = fromHtml("<b>Hola</b>"); b.children.length === 0;.

Por cierto, esa función fromHtml es fácil de escribir:

function fromHtml(string) {
    const div = document.createElement("div")
    div.innerHTML = string
    return div.firstChild
}

Un componente es un nodo virtual con estado y con ciclo de vida. Se puede pensar como una clase porque es estádo + métodos que modifican ese estado (en particular, un método render que devuelve un nodo virtual).

Webpack es un bundler. Convierte los imports y transpila archivos. Luego minifica (quita tamaño del archivo borrando espacios en blanco y renombrando variables) y crea un source map (un archivo para seguir teniendo buen stack trace aunque se hayan renombrado las funciones).