JavaScript a fondo

Declaraciones de variables

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*.
<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.
<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.
<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.
<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.
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á?.
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.
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).
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.
{
    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.
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.
// 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.
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.
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.
{
  const nombre = "Juan"
}
console.log(nombre) // ⚠️
  • Por último, las variables creadas con const no son alzadas.

Todo sobre funciones

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.
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.
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.
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.
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.
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.
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.
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".
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.
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.
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.
(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.

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.
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.
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.
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.

 

[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.

 

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).

 

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.
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.
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.
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

Todo sobre Arrays

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.
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.
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.
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.
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.
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.
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).
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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

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

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

JavaScript a fondo - Todo sobre Arrays

const array = []

typeof array // object 😅

array instanceof Array // ✅

Array.isArray(array) // ✅

Todo sobre Objetos

Qué es un objeto

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

JavaScript a fondo - Comparaciones

  • Todas las comparaciones retornan un valor Booleano: verdadero o falso.
150 >= 100 // true

Comparando strings

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

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

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 // 😢

JavaScript a fondo

By Juan Andrés Núñez

JavaScript a fondo

  • 4,196