JavaScript a fondo

@juanwmedia - www.wmedia.es

Declaraciones de variables

@juanwmedia - www.wmedia.es

JavaScript a fondo - Declaraciones de variable

La etiqueta <script>

Puerta de entrada al código JavaScript en nuestros proyectos.
Vive en el <head> de nuestros documentos HTML*.

@juanwmedia - www.wmedia.es

<script>
    console.log("Hola Mundo 🔥")
</script>

JavaScript a fondo - Declaraciones de variable

La etiqueta <script>

A través de <script> podemos cargar JavaScript externo.
Para ello, utilizamos el atributo src y una URL al recurso, ya sea relativo o absoluto.

@juanwmedia - www.wmedia.es

<script src="..."></script>

JavaScript a fondo - Declaraciones de variable

La etiqueta <script>

Muchas veces encontraremos <scrtipt> en <footer> en lugar de <header>, para asegurarnos de que el DOM está listo antes de acceder a él.
Hoy en día no es necesario usar este patrón, ya que tenemos el atributo defer a nuestro alcance.

@juanwmedia - www.wmedia.es

<script defer src="..."></script>

JavaScript a fondo - Declaraciones de variable

La etiqueta <script>

Con la etiqueta <noscript> podemos mostrar un mensaje al usuario cuyo navegador tenga JavaScript desactivado.

@juanwmedia - www.wmedia.es

<noscript>
  JavaScript desactivado ⚠️
</noscript>

JavaScript a fondo - Declaraciones de variable

Alzado (hoisting)

JavaScript es un lenguaje con tipos dinámicos, es decir, podemos asignar y reasignar diferentes tipos a una misma variable (de ahí el nombre: variable).
Para hacerlo tenemos que utilizar dos fases diferentes: declaración e inicialización.

@juanwmedia - www.wmedia.es

var favorito // Declaracióm
favorito = 66 // Inicialización
favorito = "Juan" // Reasignación

JavaScript a fondo - Declaraciones de variable

Alzado (hoisting)

Cuando creamos declaramos una variable, JavaScript le asigna el tipo undefined.
Si intentamos referenciar una variable antes de ser declarada, ¿qué crees que ocurrirá?.

@juanwmedia - www.wmedia.es

console.log(nombre) // 🤔
var nombre = "Juan"

JavaScript a fondo - Declaraciones de variable

Alzado (hoisting)

La respuesta es undefined porque JavaScript, al interpretar tu código alza al inicio del programa la declaración de variables (no la inicialización) y las funciones declaradas.
Esto explica el por qué, por ejemplo, puedes invocar una función antes de declararla.

@juanwmedia - www.wmedia.es

saludar() // "Hola 👋"
function saludar() {
  console.log("Hola 👋")
}

JavaScript a fondo - Declaraciones de variable

Ámbito y let

Hasta ahora hemos creado variables con var. Estas tienen ámbito de función: pueden ser accedidas desde la función donde fueron declaradas (y funciones interiores).

@juanwmedia - www.wmedia.es

var nombre = "Juan"
function saludar() {
    console.log("Hola " + nombre)
}
saludar() // "Hola Juan"

JavaScript a fondo - Declaraciones de variable

Ámbito y let

Sin embargo, si declaramos variables con let (ES2105), tenemos ámbito de bloque, es decir, solo pueden ser accedidas desde el bloque en el que se declararon, o bloques interiores.

@juanwmedia - www.wmedia.es

{
    let nombre = "Juan"
}
console.log(nombre) // nombre is not defined

JavaScript a fondo - Declaraciones de variable

Ámbito y let

Este ámbito de bloque tiene sus ventajas. Por ejemplo al utilizarlo con estructuras de control y de flujo.

@juanwmedia - www.wmedia.es

for (let i = 0; i <= 100; i++) {
    console.log(i)
}
console.log(i) // i is not defined

JavaScript a fondo - Declaraciones de variable

Ámbito y let

Además, al usar let tenemos un comportamiento mucho más estricto en el alzado (hoisting), algo que para muchos es otra ventaja.

@juanwmedia - www.wmedia.es

// Cannot access 'nombre' before initialization 
console.log(nombre) 
let nombre = "Juan"

JavaScript a fondo - Declaraciones de variable

Constantes

Como ahora ya sabes, var y let permiten declarar variables dinámicas: puedes re-asociarlas a otro valor.
Si queremos crear una asociación constante a un valor, podemos usar const para la creación de variables.

@juanwmedia - www.wmedia.es

const edad = 77

JavaScript a fondo - Declaraciones de variable

Constantes

Al utilizar const nos aseguramos que no ocurrirá ninguna re-asociación a otro valor en esa variable.
Eso sí, usar constantes no significa que sean inmutables. Podemos mutar propiedades del valor asociado a la constante.

@juanwmedia - www.wmedia.es

const persona = "Juan"
persona += " Núñez" // 🤔

JavaScript a fondo - Declaraciones de variable

Constantes

En cuanto a su acceso, igual que con let disponemos de ámbito de bloque.

@juanwmedia - www.wmedia.es

{
  const nombre = "Juan"
}
console.log(nombre) // ⚠️

Por último, las variables creadas con const no son alzadas.

Todo sobre funciones

@juanwmedia - www.wmedia.es

JavaScript a fondo - Todo sobre funciones

Declaración de funciones

En JavaScript hay 3 formas de crear funciones. Vamos a explorarlas.
La primera forma es a través de las funciones declaradas.
Estas requieren un identificador y son alzables.

@juanwmedia - www.wmedia.es

function saludar() {
  console.log("Hola me llamo Juan")
}

Declaración de funciones

También podemos crear una expresión funcional, que consiste en asociar una función a una variable.
Puede tener nombre o ser anónima.
Lo que se alza es la declaración, no la asignación.

@juanwmedia - www.wmedia.es

const saludar = function () {
  console.log("Hola me llamo Juan")
}

JavaScript a fondo - Todo sobre funciones

Declaración de funciones

Por último, podemos crear una versión aún más acortada de una función anónima a través de las funciones flecha.
No disponen de contexto propio de this.
Disponen de retorno implícito, delimitadores opcionales y no se alzan.

@juanwmedia - www.wmedia.es

const saludar = () => {
  console.log("Hola me llamo Juan")
}

JavaScript a fondo - Todo sobre funciones

Parámetros y argumentos

Todas las funciones pueden tener parámetros para hacerlas aún más polivalentes.
Los parámetros son accesibles como variables en el cuerpo de la función.
Al invocar la función, pasamos valores como argumentos que son aceptados como parámetros.

@juanwmedia - www.wmedia.es

function saludar(nombre) {
  console.log("Hola me llamo " + nombre)
}

JavaScript a fondo - Todo sobre funciones

Parámetros y argumentos

Podemos establecer valores por defecto para los parámetros, en el caso de que no se satisfagan en la invocación.

@juanwmedia - www.wmedia.es

function saludar(nombre, apellido = "Núñez") {
  console.log(`Soy ${nombre} ${apellido}`);
}

JavaScript a fondo - Todo sobre funciones

Parámetros rest

Con los parámetros rest (ES2015) podemos aceptar cualquier número de parámetros en una función.
Son compatibles con los parámetros normales, pero deben declararse siempre al final.

@juanwmedia - www.wmedia.es

function checkOut(...prices) {
  Array.isArray(prices) // 💪
  const total = prices.reduce((acc, curr) => acc + curr)
  console.log(total)
}

JavaScript a fondo - Todo sobre funciones

Retornar valores

A no ser que seamos explícitos, las funciones JavaScript retornan undefined (implicit return).
Si especificamos algo que retornar, la función finalizará su ejecución y devolverá ese valor.

@juanwmedia - www.wmedia.es

function checkOut(...prices) {
  Array.isArray(prices) // 💪
  return prices.reduce((acc, curr) => acc + curr)
}

const total = checkOut("Juan", 13, 343, 123, 432) // 911

JavaScript a fondo - Todo sobre funciones

Closures

Ahora que entiendes mejor cómo funciona el ámbito en JavaScript, es el momento de hablar de closures.
Un closure es: "retornar una función desde otra función, con acceso al entorno de variables de un ámbito exterior".

@juanwmedia - www.wmedia.es

function soyUnClosure() {
  const variableLocal = "Juan"
  return function() {
    return variableLocal.toUpperCase()
  }
}

JavaScript a fondo - Todo sobre funciones

Closures

Entender cómo funcionan los closures es imprescindible para entender JavaScript.
Uno de los usos más comunes es la creación de factorías de funciones: exponen parte de su ámbito para crear otras funciones.

@juanwmedia - www.wmedia.es

function pedirPizzaUID(UID) {
  const ID = `${UID}-${Math.random()}`
  return function (pizza) {
    return `${ID}_${pizza}`  
  }
}

JavaScript a fondo - Todo sobre funciones

Closures

Clada closure retornado es independiente al anterior, es decir, forman un nuevo ámbito.
Eso sí, un closure puede modificar el estado atrapado en su interior.

@juanwmedia - www.wmedia.es

function pedirPizzaUID(UID) {
  let cantidadPizzas = 0
  const ID = `${UID}-${Math.random()}`
  return function (pizza) {
    cantidadPizzas++
    return `${ID}_${pizza}_${cantidadPizzas}`  
  }
}

JavaScript a fondo - Todo sobre funciones

IIFE's

Son las siglas de "Inmediately Invoked Function Expression".
La parte más importante es inmediatamente.

@juanwmedia - www.wmedia.es

(function() {
  // Haz cosas...
})()

JavaScript a fondo - Todo sobre funciones

IIFE's

Para crear un IIFE debemos envolver una función con el operador de agrupación.
De esta forma, indicamos que es una expresión que debe ser evaluada.
Como la expresión es evaluada como una función, podemos añadir unos paréntesis al final para auto ejecutarla inmediatamente.

@juanwmedia - www.wmedia.es

JavaScript a fondo - Todo sobre funciones

IIFE's

La principal utilidad de un IIFE es la auto-creación de un ámbito funcional nuevo e independiente.
Un ejemplo útil típico es su uso con bucles for.

@juanwmedia - www.wmedia.es

for(var i = 0; i < 10; i++) {
  console.log(i);
  setTimeout(function() {
    console.log('El número es ' + i);
  },1000);
}

JavaScript a fondo - Todo sobre funciones

IIFE's

Otro ejemplo es el patrón de módulo.

@juanwmedia - www.wmedia.es

const Person = (function(person){
	const name = person || "Juan"
	let distance = 0;
	function greet() {
		console.log("Hola me llamo " + name)
	}
	function run() {
		distance++
		console.log(`${name} ran ${distance} km`)
	}
	return {
		greet, run
	}
})("Andrés")

JavaScript a fondo - Todo sobre funciones

Callbacks

Es una función que se pasa a otra función como argumento para su ejecución posterior.

Existen callbacks síncronos y asíncronos.

@juanwmedia - www.wmedia.es

function miFuncion(fn) {
  // Callback
  fn()
}

JavaScript a fondo - Todo sobre funciones

Callbacks

Un ejemplo de callback síncrono es el que usamos en el método forEach de Arrays.

@juanwmedia - www.wmedia.es

[1, 2, 3, 4, 5].forEach(recorrer)

// Función declarada que se usa como
// callback
function recorrer(numero) {
  console.log(numero)
}

JavaScript a fondo - Todo sobre funciones

Callbacks

Un ejemplo de callback asíncrono es el que utilizamos en el método setTimeout de Window.

@juanwmedia - www.wmedia.es

setTimeout(saludar, 2000)

// Función declarada que se usa como
// callback
function saludar() {
  console.log("HOLA")
}

JavaScript a fondo - Todo sobre funciones

Funciones y this

El concepto de this puede ser confuso, ya que es dinámico y depende del contexto de ejecución.
En una función, en valor por defecto de this es Window (si no estamos en modo estricto).

@juanwmedia - www.wmedia.es

var nombre = "Juan"
function saludar() {
    console.log(this.nombre) // 🤔
}
saludar()

JavaScript a fondo - Todo sobre funciones

Funciones y this

Pero su valor (la referencia a un valor) se puede cambiar de forma dinámica.

@juanwmedia - www.wmedia.es

var nombre = "Juan"
const persona = { nombre: "Andrés"}
function saludar() {
    console.log(this.nombre) // 🤔
}
saludar.call(persona)

JavaScript a fondo - Todo sobre funciones

Funciones y this

Podemos comprobarlo usando un objeto.

@juanwmedia - www.wmedia.es

var nombre = "Juan"
const objeto = {
    nombre: "Andrés",
    saludar() {
        console.log(this.nombre)
    }
}
const funcion = objeto.saludar
funcion() // 🤔

JavaScript a fondo - Todo sobre funciones

Funciones y this

De hecho podemos perder el contexto de this.

@juanwmedia - www.wmedia.es

var nombre = "Juan"
const objeto = {
    nombre: "Andrés",
    saludar() {
        setTimeout(function() {
            console.log(this.nombre)
        }.bind(this), 1000
    }
}
objeto.saludar() // 🤔

JavaScript a fondo - Todo sobre funciones

@juanwmedia - www.wmedia.es

Todo sobre Arrays

@juanwmedia - www.wmedia.es

JavaScript a fondo - Todo sobre Arrays

Creación de Arrays

Estructura de datos ordenada por índices únicos.
Para crear un Array el método más utilizado es notación literal.
Usamos corchetes para delimitar la estructura y separamos cada elemento con comas.

@juanwmedia - www.wmedia.es

const dias = ["lunes", "martes", "miércoles"]

Creación de Arrays

Podemos acceder a los elementos del Array a través de su índice.
Como valor compuesto, las Array se pasan por referencia, no por valor.

@juanwmedia - www.wmedia.es

const dias = ["lunes", "martes", "miércoles"]
const diasCopia = dias
console.log(dias === diasCopia) // true
console.log([] === []) // 🤔

JavaScript a fondo - Todo sobre Arrays

Índices y elementos

Podemos cambiar los elementos del Array a través de su índice.
También podemos añadir al final a través de la propiedad length.

@juanwmedia - www.wmedia.es

const tags = ["terror", "aventura", "suspense"]
tags[0] = "horror"
tags[tags.length - 1] = "scifi"
// [ 'horror', 'aventura', 'suspense', '-1': 'scifi' ]

JavaScript a fondo - Todo sobre Arrays

Índices y elementos

Podemos vaciar un Array de varias formas.

@juanwmedia - www.wmedia.es

const tags = ["terror", "aventura", "suspense"]

tags = [] // Error de reasignación a constante

tags.length = 0

tags.splice(0, tags.length)

JavaScript a fondo - Todo sobre Arrays

Arrays multi dimensionales

Dentro un Array pueden vivir más Arrays.
La clave es referirse a sus elementos a través de su índice.

@juanwmedia - www.wmedia.es

const libros = [["IT", 7], ["El Terror", 9], ["El Exorcista", 10]]

// Acceder a "El Terror"
const titulo = libros[1][0]
const precio = libros[1][1]

// Otra forma
const libro = libros[1]
const titulo = libro[0]
const precio = libro[1]

JavaScript a fondo - Todo sobre Arrays

Desestructurar Arrays

Gracias a JavaScript ES6 podemos extraer los elementos de un Array de forma más sencilla.

@juanwmedia - www.wmedia.es

const libros = [["IT", 7], ["El Terror", 9], ["El Exorcista", 10]]

// Acceder a "El Terror"
const [ , libro] = libros
const [titulo, precio] = libro

// Otra forma
const [ , [titulo, precio] ] = libros

JavaScript a fondo - Todo sobre Arrays

Desestructurar Arrays

Incluso podemos combinarlo con los parámetros rest (también de ES6).

@juanwmedia - www.wmedia.es

const libros = [["IT", 7], ["El Terror", 9], ["El Exorcista", 10]]

// Acceder a "IT"
const [ IT, ...resto ] = libros

// IT = [ 'IT', 7 ]
// resto = [ [ 'El Terror', 9 ], [ 'El Exorcista', 10 ] ]

JavaScript a fondo - Todo sobre Arrays

Añadir elementos

Para añadir elementos al inicio y mutar el Array podemos usar el método unshift.

@juanwmedia - www.wmedia.es

const colores = ["rojo", "verde", "azul"]
colores.unshift("turquesa")
// [ 'turquesa', 'rojo', 'verde', 'azul' ]

JavaScript a fondo - Todo sobre Arrays

Añadir elementos

Para añadir elementos al inicio sin mutar el Array podemos usar el operador spread.

@juanwmedia - www.wmedia.es

const colores = ["rojo", "verde", "azul"]
const colores2 = ["turquesa", ...colores]
// [ 'turquesa', 'rojo', 'verde', 'azul' ]

JavaScript a fondo - Todo sobre Arrays

Añadir elementos

Para añadir elementos al final y mutar el Array podemos usar método push.

@juanwmedia - www.wmedia.es

const colores = ["rojo", "verde", "azul"]
colores.push("turquesa")
// [ 'rojo', 'verde', 'azul', 'turquesa' ]

JavaScript a fondo - Todo sobre Arrays

Añadir elementos

Para añadir elementos al final sin mutar el Array podemos usar el método push.

@juanwmedia - www.wmedia.es

const colores = ["rojo", "verde", "azul"]
const colores2 = [...colores, "turquesa"]
// [ 'rojo', 'verde', 'azul', 'turquesa' ]

JavaScript a fondo - Todo sobre Arrays

Añadir elementos

Para añadir elementos en cualquier índice y mutar el Array podemos usar el método splice.

@juanwmedia - www.wmedia.es

const colores = ["rojo", "verde", "azul"]
const nuevoColor = "amarillo"
colores.splice(2, 0, nuevoColor)
// [ 'rojo', 'verde', 'amarillo', 'azul' ]

JavaScript a fondo - Todo sobre Arrays

Añadir elementos

Para añadir elementos en cualquier índice sin mutar el Array podemos usar el método slice.

@juanwmedia - www.wmedia.es

const colores = ["rojo", "verde", "azul"]
const nuevoColor = "amarillo"
const colores2 = [
  ...colores.slice(0, 2), // rojo, verde 
  nuevoColor,
  ...colores.slice(2) // azul
]
// [ 'rojo', 'verde', 'amarillo', 'azul' ]

JavaScript a fondo - Todo sobre Arrays

Eliminar elementos

Para eliminar elementos al inicio y mutar el Array podemos usar el método shift.
Además retornamos lo eliminado.

@juanwmedia - www.wmedia.es

const colores = ["rojo", "verde", "azul"]
const rojo = colores.shift()
// [ 'verde', 'azul' ]

JavaScript a fondo - Todo sobre Arrays

Eliminar elementos

Para eliminar elementos al inicio sin mutar el Array podemos usar el operador spread y el método slice.

@juanwmedia - www.wmedia.es

const colores = ["rojo", "verde", "azul"]
const colores2 = [...colores.slice(1)]
// [ 'verde', 'azul' ]

JavaScript a fondo - Todo sobre Arrays

Eliminar elementos

Para eliminar elementos al final y mutar el Array podemos usar el método pop.
Además retornamos lo eliminado.

@juanwmedia - www.wmedia.es

const colores = ["rojo", "verde", "azul"]
const azul = colores.pop()
// [ 'rojo', 'verde' ]

JavaScript a fondo - Todo sobre Arrays

Eliminar elementos

Para eliminar elementos al final sin mutar el Array podemos usar el operador spread y el método slice.

@juanwmedia - www.wmedia.es

const colores = ["rojo", "verde", "azul"]
const colores2 = 
      [...colores.slice(0, colores.length -1)]
// [ 'rojo', 'verde' ]

JavaScript a fondo - Todo sobre Arrays

Eliminar elementos

Para eliminar elementos en cualquier índice sin mutar el Array podemos usar el operador spread y el método slice.

@juanwmedia - www.wmedia.es

const colores = ["rojo", "verde", "azul"]
const index = 1
const colores2 = 
      [...colores.slice(0, index), 
       ...colores.slice(index +1)]
// [ 'rojo', 'azul' ]

JavaScript a fondo - Todo sobre Arrays

Encontrar elementos

Una manera sencilla de encontrar elementos primitivos es utilizar el método indexOf.
Devuelve el índice si lo encuentra, o -1 si no lo encuentra.

@juanwmedia - www.wmedia.es

const colores = ["rojo", "verde", "azul"]
const indice = colores.indexOf("verde") // 1

JavaScript a fondo - Todo sobre Arrays

Encontrar elementos

Otra forma consiste en usar el método includes.
Retorna un valor booleano.

@juanwmedia - www.wmedia.es

const colores = ["rojo", "verde", "azul"]
const esRojo = colores.includes("verde") // true

JavaScript a fondo - Todo sobre Arrays

JavaScript a fondo - Declaraciones de variable

Encontrar elementos

En escenarios más reales donde tenemos colecciones de información, podemos usar el método findIndex que acepta un callback.

@juanwmedia - www.wmedia.es

const colores = [
  { id: 1, nombre: "rojo"},
  { id: 2, nombre: "verde"},
  { id: 3, nombre: "azul"},
]
const indice = colores
	.findIndex(color => 
               color.nombre === "verde")

Encontrar elementos

Si lo que necesitamos es el elemento encontrado (no su índice) podemos usar el método find.

@juanwmedia - www.wmedia.es

const colores = [
  { id: 1, nombre: "rojo"},
  { id: 2, nombre: "verde"},
  { id: 3, nombre: "azul"},
]
const azul = colores.find(
  color => color.nombre === "azul")

JavaScript a fondo - Todo sobre Arrays

Copia superficial vs profunda

Podemos copiar elementos de forma superficial al utilizar el operador spread, Array.from y similar.
Si los elementos son valores primitivos, se copiarán por valor.

@juanwmedia - www.wmedia.es

const original = ["rojo", true, 99]
const copia = [...original]
copia[1] = false
//[ 'rojo', true, 99 ] [ 'rojo', false, 99 ]

JavaScript a fondo - Todo sobre Arrays

Copia superficial vs profunda

Si los elementos a copiar son valores compuestos, se pasarán por referencia.

@juanwmedia - www.wmedia.es

const original = [
  { id: 1, nombre: "rojo"},
  { id: 2, nombre: "verde"},
  { id: 3, nombre: "azul"},
]
const copia =  Array.from(original)
original[0].id = 666

JavaScript a fondo - Todo sobre Arrays

Fusionar Arrays

@juanwmedia - www.wmedia.es

JavaScript a fondo - Todo sobre Arrays

Podemos hacer una copia superficial y fusionar Arrays con la sintaxis de spread.

const cats = ['Nino', 'Guizmo', 'Milo'];
const moreCats = ['Tina', 'Moma', 'Mila'];

const allCats = [...cats, ...moreCats]

Fusionar Arrays

@juanwmedia - www.wmedia.es

JavaScript a fondo - Todo sobre Arrays

También podemos usar el método estático concat de Array.

const allCats = cats.concat(moreCats)
const evenMoreCats 
	= [].concat(cats, moreCats, ["Milo"]);

Type check Arrays

@juanwmedia - www.wmedia.es

JavaScript a fondo - Todo sobre Arrays

¿Cómo saber si un valor es del tipo Array?. Dale un vistazo a typeof, instanceof e isArray.

const array = []

typeof array // object 😅

array instanceof Array // ✅

Array.isArray(array) // ✅

@juanwmedia - www.wmedia.es

Todo sobre Objetos

@juanwmedia - www.wmedia.es

Qué es un objeto

@juanwmedia - www.wmedia.es

JavaScript a fondo - Todo sobre Objetos

Los objetos JavaScript son estructuras en cuyo interior se guardan colecciones de pares propiedad-valor.

const cat = {
  name: "Guizmo",
  color: "black"
}

Qué es un objeto

@juanwmedia - www.wmedia.es

JavaScript a fondo - Todo sobre Objetos

Además de Strings y otros valores primitivos, dentro de un objeto puedes guardar Arrays e incluso otros objetos.

const cat = {
  ...
  address: {
    city: "Valencia",
    postacolde: 42157
  }
}

Orden de propiedades

@juanwmedia - www.wmedia.es

JavaScript a fondo - Todo sobre Objetos

El orden en que se creen las propiedades en un objeto no tiene importancia, ya que (a diferencia de los Array) se accede a ellas a través de un identificador.

const address = {
  city: "Valencia",
  postacolde: 42157
}

console.log(address.city)

Creación de un objeto

@juanwmedia - www.wmedia.es

JavaScript a fondo - Todo sobre Objetos

La manera más sencilla de crear un objeto es con la notación literal, es decir, usar las llaves { } para crear un nuevo objeto y guardarlo en una variable.

const user = {
  rol: 'Developer',
  team: 'FE',
};

// "Deprecated"
const person = new Object({ name: 'Juan' });

Valor vs referencia

@juanwmedia - www.wmedia.es

JavaScript a fondo - Todo sobre Objetos

Los objetos (igual que los Array) se pasan por referencia y no por valor.

const user = { rol: 'Developer' };

const userReference = user;

userReference.name = 'Juan';

console.log(user) 🤔

Propiedades, métodos y valores

@juanwmedia - www.wmedia.es

JavaScript a fondo - Todo sobre Objetos

Las propiedades de un objeto son las características de la entidad que define.
Podemos definir propiedades al crear el objeto y también más adelante.

const person = {
  name: "Juan"
}

person.surname = "Andrés"

Propiedades, métodos y valores

@juanwmedia - www.wmedia.es

JavaScript a fondo - Todo sobre Objetos

Pero las características son inertes, inanimadas. ¿Qué ocurre con las acciones?. Para eso tenemos los métodos.
Un método es una función que vive en un objeto.

...

person.sayHello = function() {
  console.log(`Hi, I'm ${this.name}`)
}

Propiedades, métodos y valores

@juanwmedia - www.wmedia.es

JavaScript a fondo - Todo sobre Objetos

Por supuesto, también podemos definir los métodos en la fase de creación del objeto.

const person = {
  name: 'Juan',
  sayHello: function () {
    console.log(`Hi, I'm ${this.name}`);
  },
};

person.sayHello();

Propiedades computadas

@juanwmedia - www.wmedia.es

JavaScript a fondo - Todo sobre Objetos

Es posible definir los identificadores de propiedades de forma dinámica usando bracket notation.

const person = {
  name: 'Juan',
  'skill 1': 'JavaScript',
  sayHello: function () { ... },
};

person['skill 1'];

this y métodos de objetos

@juanwmedia - www.wmedia.es

JavaScript a fondo - Todo sobre Objetos

Como sabes, es MUY común querer acceder al interior de un objeto desde un método. Para ello tenemos this.

const person = {
  name: 'Juan',
  sayHello() {
    console.log(`Hi I'm ${this.name}`)
  }
};

this y métodos de objetos

@juanwmedia - www.wmedia.es

JavaScript a fondo - Todo sobre Objetos

Sin embargo, no olvides que el valor de this se evalúa durante la ejecución (runtime), es decir, es dinámico.

const user = {
  name: 'Juan',
  greet() {
    console.log(this.name);
  },
};

user.greet.call({ name: 'Guizmo' });

this y métodos de objetos

@juanwmedia - www.wmedia.es

JavaScript a fondo - Todo sobre Objetos

Por último, acuérdate de que las funciones flecha no tienen this propio, lo heredan del ámbito exterior.
Esto hace que no sean buenas candidatas para métodos de objetos.

const user = {
  name: 'Juan',
  greet: () => console.log(this.name),
};

user.greet() // undefined

Object keys, values y entries

@juanwmedia - www.wmedia.es

JavaScript a fondo - Todo sobre Objetos

El método keys de Object retorna un Array con las propiedades (keys) enumerables de un objeto.

const persona = {
  nombre: 'Juan',
  profesion: 'Dev',
  ciudad: 'Valencia',
};

Object.keys(persona)
  .forEach((key) => console.log(key));

Object keys, values y entries

@juanwmedia - www.wmedia.es

JavaScript a fondo - Todo sobre Objetos

El método values de Object retorna un Array con los valores (values) de las propiedades enumerables de un objeto.

const persona = {
  nombre: 'Juan',
  profesion: 'Dev',
};

for (const value of Object.values(persona)) {
  console.log(value);
}

Object keys, values y entries

@juanwmedia - www.wmedia.es

JavaScript a fondo - Todo sobre Objetos

El método entries de Object retorna un Array con los pares de propiedad y valor (key-value) de las propiedades enumerables de un objeto.

const persona = {
  nombre: 'Juan',
  profesion: 'Dev',
};

for (const [key, value] of Object.entries(persona)) {
  console.log(key, value);
}

Desestructurar objetos

@juanwmedia - www.wmedia.es

JavaScript a fondo - Todo sobre Objetos

Con ES2015 (ES6) llegó por fin la posibilidad de desestructurar propiedades de objetos.

const product = {
  id: 785679,
  name: "PlayStation 5",
  color: "white",
  price: {
    sale: 499,
    full: 599,
  },
};

const color = product.color;
const sale = product.price.sale; // 🫠

Desestructurar objetos

@juanwmedia - www.wmedia.es

JavaScript a fondo - Todo sobre Objetos

Con una sintaxis muy parecida a la de los módulos JavaScript, podemos extraer propiedades del objeto.

const product = {
  id: 785679,
  name: "PlayStation 5",
  color: "white",
  price: {
    sale: 499,
    full: 599,
  },
};

const { id, color } = product;

Desestructurar objetos

@juanwmedia - www.wmedia.es

JavaScript a fondo - Todo sobre Objetos

Incluso podemos extraer propiedades anidadas dentro de un objeto.

const product = {
  id: 785679,
  name: "PlayStation 5",
  color: "white",
  price: {
    sale: 499,
    full: 599,
  },
};

const { price: { sale, full } } = product;

Desestructurar objetos

@juanwmedia - www.wmedia.es

JavaScript a fondo - Todo sobre Objetos

También podemos evitar colisiones de identificadores creando alias al desestructurar.

const product = {
  id: 785679,
  name: "PlayStation 5",
  color: "white",
  ...
};
  
const id = "Another ID"

const { id:productId, color } = product;

Desestructurar objetos

@juanwmedia - www.wmedia.es

JavaScript a fondo - Todo sobre Objetos

Por último, también podemos usar el operador spread (...) para extraer "el resto" de propiedades del objeto.

const product = {
  id: 785679,
  name: "PlayStation 5",
  color: "white",
  ...
};

const { color, id, price: { sale }, ...rest } = product

Fusionar y clonar objetos

@juanwmedia - www.wmedia.es

JavaScript a fondo - Todo sobre Objetos

Con Object.assign podemos fusionar varios objetos.

const product = {
  id: 785679,
  name: "PlayStation 5",
  color: "white",
};

const price = {
  sale: 499,
  full: 599,
};

const merged = Object.assign({}, product, price)

Fusionar y clonar objetos

@juanwmedia - www.wmedia.es

JavaScript a fondo - Todo sobre Objetos

También podemos usar el operador spread.

const product = {
  id: 785679,
  name: "PlayStation 5",
  color: "white",
};

const price = {
  sale: 499,
  full: 599,
};

const merged = {...product, ...price}

Fusionar y clonar objetos

@juanwmedia - www.wmedia.es

JavaScript a fondo - Todo sobre Objetos

La fusión se realiza de forma profunda en el primel nivel, los siguientes son referencias (shallow copy).

const product = {
  name: "PlayStation 5",
  data: {
    color: "white",
  },
};

const price = { sale: 499 };

const merged = { ...product, ...price };
merged.data.color = "red";
console.log(product.data.color); // red ⚠️

Fusionar y clonar objetos

@juanwmedia - www.wmedia.es

JavaScript a fondo - Todo sobre Objetos

Para una verdadera copia profunda (deep copy) podemos usar librerías externas o el objeto JSON.

const product = {
  name: "PlayStation 5",
  data: {
    color: "white",
  },
};

const price = { sale: 499 };

const merged = { ...product, ...price };
const deepCloned = JSON.parse(JSON.stringify(merged));

Comparaciones

Un viejo conocido

@juanwmedia - www.wmedia.es

JavaScript a fondo - Comparaciones

Los operadores de comparación JavaScript conectan con lo que sabemos de matemáticas comunes.

a > b, b > a // Mayor o menor que
c >= d, c <= d // Mayor o igual que
e = f // Asignación
g == h // Comparación
i != j // Distinto

Verdadero o falso

@juanwmedia - www.wmedia.es

JavaScript a fondo - Comparaciones

Todas las comparaciones retornan un valor Booleano: verdadero o falso.

150 >= 100 // true

Comparando strings

@juanwmedia - www.wmedia.es

JavaScript a fondo - Comparaciones

Podemos comparar incluso cadenas de texto a través de su orden (diccionario lexicográfico).

"Juan" == "Juan"; // true
"Juan" < "Joan"; // false
"Juan" < "juan"; // true 🤔

Comparación de tipos

@juanwmedia - www.wmedia.es

JavaScript a fondo - Comparaciones

También podemos comparar diferentes tipos utilizando la conversión de tipos (type coercion).
De esta forma comparamos el valor y hacemos conversiones de tipo.

"122" == 122; // true
12 > "11" // true
0 == false // true
'' == false // true

Comparación de tipos

@juanwmedia - www.wmedia.es

JavaScript a fondo - Comparaciones

Para evitar la conversión de tipo podemos usar la igualdad estricta (===).
De esta forma comparamos tipo y valor de los operandos.

"122" === 122; // false
0 === false // false
'' === false // false
null == undefined // 🤔
undefined == 0 // 😢