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
- ¿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) // ✅
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