Javascript (Objetos)
¿Quieres apoyar los directos? 😍
Tienes varias jugosas alternativas:
1. Suscríbete al canal de Youtube (es gratis) click aquí
2. Si estás viendo un video no olvides regalar un 👍 like y comentario 🙏🏼
3. También puedes ser miembro del canal de Youtube click aquí
4. Puedes adquirir cursos premium en Udemy 👇🏼👇🏼👇🏼 ¿Quiéres apoyar los directos?
Curso de HTML + CSS + Bootstrap 5 + Git y más UDEMY
Curso de React + Firebase UDEMY
Curso [Link] + Firebase UDEMY
JavaScript está diseñado en un paradigma simple basado en objetos.
Un objeto es una colección de propiedades, y una propiedad es una asociación entre un
nombre (o clave) y un valor.
El valor de una propiedad puede ser una función, en cuyo caso la propiedad es conocida
como un método.
Además de los objetos que están predefinidos en el navegador, puedes definir tus propios
objetos.
Los objetos son similares a los arreglos (arrays), excepto que en lugar de usar índices para
acceder y modificar sus datos, accedes a los datos en objetos a través de
propiedades (properties).
objetos
Objeto literal
Se denomina objeto literal al objeto cuyas propiedades están declaradas textualmente en
el código.
mas info
const gato = {
nombre: 'Valiente',
duerme: true,
edad: 10,
enemigos: ["agua", "perros"]
}
Acceder a los valores
Notación de punto:
[Link]([Link])
[Link]([Link])
[Link]([Link][0]);
Notación de corchetes (nos servirá para recorrerlo):
[Link](gato['nombre'])
[Link](gato['edad'])
[Link](gato["enemigos"][0]);
CRUD (propiedades)
Crear (create)
[Link] = 'Azul'
Leer (read)
[Link](gato)
Actualizar (update)
[Link] = 11
Eliminar (delete)
delete [Link]
hasOwnProperty
A veces es útil comprobar si existe o no la propiedad de un objeto dado. Podemos utilizar el
método .hasOwnProperty(propname) para determinar si un objeto tiene una propiedad con
ese nombre. .hasOwnProperty() devuelve true o false si se encuentra la propiedad o
no.
const gato = {
nombre: 'Valiente',
duerme: true,
edad: 10,
enemigos: ["agua", "perros"]
}
[Link]([Link]("nombre"))
[Link]([Link]("salud"))
Objetos anidados
const gato = {
nombre: 'Valiente',
duerme: true,
edad: 10,
enemigos: ["agua", "perros"],
otros: {
amigos: ["Cobarde", "Tímido", "Pegajoso"],
favoritos: {
comida: {
fria: "salmón",
caliente: "pollo"
}
}
}
}
Acceder:
[Link]([Link][0])
[Link]([Link])
Encadenamiento opcional
Optional chaining : El operador de encadenamiento opcional ?. permite leer el valor
de una propiedad ubicada dentro de una cadena de objetos conectados sin tener que
validar expresamente que cada referencia en la cadena sea válida.
const gato = {
nombre: "Valiente",
duerme: true,
edad: 10,
enemigos: ["agua", "perros"],
};
[Link]([Link]);
Encadenamiento opcional: resultado undefined.
[Link]([Link]?.favoritos);
Propiedad
Propiedades:
const frutas = ["sandía", "pera", "melon"];
[Link]([Link]);
Métodos:
const frutas = ["sandía", "pera", "melon"];
[Link]("banana");
[Link](frutas);
Métodos
const gato = {
nombre: "Valiente",
duerme: true,
edad: 10,
enemigos: ["agua", "perros"],
comer: function () {
[Link]("Ahora está comiendo");
},
};
[Link]();
Reducido:
const gato = {
nombre: "Valiente",
duerme: true,
edad: 10,
enemigos: ["agua", "perros"],
comer() {
[Link]("Ahora está comiendo");
},
};
[Link]();
Con parámetros:
const gato = {
nombre: "Valiente",
duerme: true,
edad: 10,
enemigos: ["agua", "perros"],
comer(comida) {
return "Ahora está comiendo: " + comida;
},
};
[Link]([Link]("pez"));
¿Qué pasará con esto?
const gato = {
nombre: "Valiente",
duerme: true,
edad: 10,
enemigos: ["agua", "perros"],
comer(comida) {
return `${nombre} está comiendo ${comida}`;
},
};
[Link]([Link]("pez"));
Lo está buscando en el objeto global
const nombre = "Ignacio";
const gato = {
nombre: "Valiente",
duerme: true,
edad: 10,
enemigos: ["agua", "perros"],
comer(comida) {
return `${nombre} está comiendo ${comida}`;
},
};
[Link]([Link]("pez"));
Objeto this :
const gato = {
nombre: "Valiente",
duerme: true,
edad: 10,
enemigos: ["agua", "perros"],
comer(comida) {
[Link](this);
},
};
[Link]("pez");
this
Veamos una introducción a this
this: Hace referencia al objeto contexto de JavaScript en el cual se está ejecutando el
código actual
más info
const gato = {
nombre: "Valiente",
duerme: true,
edad: 10,
enemigos: ["agua", "perros"],
comer(comida) {
return `${[Link]} está comiendo ${comida}`;
},
};
[Link]([Link]("pez"));
TIP
Vamos a tener que dedicar una clase especial a "this" más adelante.
arrow function
¿Esto funcionará?
const gato = {
nombre: "Valiente",
duerme: true,
edad: 10,
enemigos: ["agua", "perros"],
comer: (comida) => {
return `${[Link]} está comiendo ${comida}`;
},
};
[Link]([Link]("pez"));
Arrow Functions
No tiene this o super y no se debe usarla como métodos.
Funciones Flecha
Pero si puedo utilizarla en su interior:
const gato = {
nombre: "Valiente",
duerme: true,
edad: 10,
enemigos: ["agua", "perros"],
comer(comida) {
return `${[Link]} está comiendo ${comida}`;
},
mostrarEnemigos() {
return [Link]((item) => [Link](item));
},
};
[Link]();
Recorrer un objeto
for in
for...in
for in : La instrucción for-in itera sobre todas las propiedades enumerables de un objeto
que está codificado por cadenas
const gato = {
nombre: "Valiente",
duerme: true,
edad: 10,
enemigos: ["agua", "perros"],
};
for (const propiedad in gato) {
[Link](gato[propiedad]);
}
¿Por qué usar for...in?
Dado que for...in está construido para iterar propiedades de objeto, no se recomienda su
uso con arreglos y opciones como [Link]() y existe for...of, ¿cuál podría
ser el uso de for...in?
Es posible que se utilice de forma más práctica con fines de depuración, ya que es una
forma fácil de comprobar las propiedades de un objeto (mediante la salida a la consola o
de otro modo)
Aunque los arreglos suelen ser más prácticos para almacenar datos, en situaciones en las
que se prefiere un par clave-valor para trabajar con datos (con propiedades que actúan
como la "clave"), puede haber casos en los que desees comprobar si alguna de esas claves
cumple un valor particular.
[Link]()
[Link]() : devuelve un array con los valores correspondientes a las propiedades
enumerables de un objeto.
[Link]([Link](gato));
Con forEach()
[Link](gato).forEach((item) => [Link](item));
Existen más métodos como:
[Link]()
[Link]()
[Link]()
Destructuring Objects
desestructuración La sintaxis de desestructuración es una expresión de JavaScript que
permite desempacar valores de arreglos o propiedades de objetos en distintas variables.
const gato = {
nombre: "Valiente",
duerme: true,
edad: 10,
enemigos: ["agua", "perros"],
otros: {
amigos: ["Cobarde", "Tímido", "Pegajoso"],
favoritos: {
comida: {
fria: "salmón",
caliente: "pollo",
},
},
},
};
const nombreGato = [Link];
[Link](nombreGato);
Destructuring de objetos:
const gato = {
nombre: "Valiente",
duerme: true,
edad: 10,
enemigos: ["agua", "perros"],
otros: {
amigos: ["Cobarde", "Tímido", "Pegajoso"],
favoritos: {
comida: {
fria: "salmón",
caliente: "pollo",
},
},
},
};
const { nombre, duerme, edad, enemigos } = gato;
[Link](nombre);
[Link](duerme);
[Link](edad);
[Link](enemigos);
Alias:
const { nombre: nombreGato } = gato;
[Link](nombreGato);
por defecto:
const gato = {
// nombre: "Valiente",
duerme: true,
edad: 10,
enemigos: ["agua", "perros"],
otros: {
amigos: ["Cobarde", "Tímido", "Pegajoso"],
favoritos: {
comida: {
fria: "salmón",
caliente: "pollo",
},
},
},
};
const { nombre: nombreGato = "Sin nombre" } = gato;
[Link](nombreGato);
Anidados:
const gato = {
nombre: "Valiente",
duerme: true,
edad: 10,
enemigos: ["agua", "perros"],
otros: {
amigos: ["Cobarde", "Tímido", "Pegajoso"],
favoritos: {
comida: {
fria: "salmón",
caliente: "pollo",
},
},
},
};
const {
otros: { amigos },
} = gato;
[Link](amigos);
Array
La destructuring también sirve para Array, solo reemplazar por []
const enemigos = ["agua", "perros"]
const [agua, perro] = enemigos;
[Link](agua);
[Link](perro);
Métodos:
const gato = {
nombre: "Valiente",
duerme: true,
edad: 10,
enemigos: ["agua", "perros"],
comer(comida) {
return `${[Link]} está comiendo ${comida}`;
},
mostrarEnemigos() {
return [Link]((item) => [Link](item));
},
};
const { comer } = gato;
[Link](comer("pez"));
// undefined está comiendo pez
Getters y Setters
info
get : Enlaza la propiedad de un objeto con una función que será llamada cuando la
propiedad es buscada.
set : La sintaxis set asocia la propiedad de un objeto a una función que será llamada
cuando haya un intento de asignar valor a esa propiedad.
GET: Tenga en cuenta lo siguiente al trabajar con la sintaxis get:
Debe tener exactamente cero parametros.
No debe haber múltiples getters para una misma propiedad.
SET: Tenga en cuenta lo siguiente al trabajar con setters:
Debe tener exactamente un parámentro
const gato = {
nombre: "Valiente",
duerme: true,
edad: 10,
enemigos: ["agua", "perros"],
comer(comida) {
return `${[Link]} está comiendo ${comida}`;
},
get nombreMayuscula() {
return [Link]();
},
set nuevoEnemigo(nuevo) {
[Link](nuevo);
},
};
// GET
[Link]([Link]);
// SET
[Link] = "batman";
[Link]([Link]);
por valor vs por referencia
fuente
por valor: Cuando asignamos valores primitivos (Boolean, Null, Undefined, Number, String
y Symbol), el valor asignado es una copia del valor que estamos asignando.
por referencia: Pero cuando asignamos valores NO primitivos o complejos (Object, Array y
Function), JavaScript copia “la referencia”, lo que implica que no se copia el valor en sí, si
no una referencia a través de la cual accedemos al valor original.
Primitivos: (por valor)
let a = "hola";
let b = a;
[Link](b);
Si cambiamos el valor de a, b sigue siendo "hola"
a = "chao";
[Link](b);
No primitivos: (por referencia)
let a = ["hola"];
let b = a;
[Link](b);
let a = ["hola"];
let b = a;
[Link]("chao");
[Link](b);
Lo mismo pasa con los objetos:
const a = {
nombre: "hola",
};
const b = a;
[Link] = "chao";
[Link](b);
¿Que sigue?
Destructuring, Spread, Rest
Clases y POO
Prototipos
Programación funcional
Promesas
AJAX
Async Await
DOM
Enlaces:
destructuring, rest, spread
Last Updated: 11/27/2021, [Link] PM
