Introducción al curso
¡Alto! Tenemos una nueva versión de este curso para ti
Bienvenidos al Curso de Fundamentos de JavaScript
Repositorio de este curso de fundamentos de JS
Primeros pasos en JavaScript
Variables
Variables: Strings
Variables: Números
Funciones
El alcance de las funciones
Objetos
Desestructurar objetos
Parámetros como referencia o como valor
Comparaciones en JavaScript
Estructuras de Control y Funciones
Condicionales
Funciones que retornan valores
Arrow functions
Estructuras repetitivas: for
Estructuras repetitivas: while
Estructuras repetitivas: do-while
Condicional múltiple: switch
Arrays
Introducción a arrays
Filtrar un array
Transformar un array
Reducir un array a un valor
Programación Orientada a Objetos en JavaScript
Cómo funcionan las clases en JavaScript
Modificando un prototipo
El contexto de las funciones: quién es this
La verdad oculta sobre las clases en JavaScript
Clases en JavaScript
Asincronismo
Funciones como parámetros
Cómo funciona el asincronismo en JavaScript
Cómo funciona el tiempo en JavaScript
¿Qué pasó con swapi.co?
Callbacks
Haciendo múltiples requests
Manejando el Orden y el Asincronismo en JavaScript
Manejo de errores con callbacks
Promesas
Promesas Encadenadas
Múltiples promesas en paralelo
Async-await: lo último en asincronismo
Juego de HTML
Comenzando el juego
Generando una secuencia de números
Iluminando la secuencia de colores
Obteniendo el input del usuario
Agregando la verificación del color elegido
Agregando los estados finales del juego
Conclusiones del curso
Complementos
Diferencias entre var, let y const
Memoización: ahorrando cómputo
¿Hace cuántos días naciste?
Funciones recursivas
Entiende los closures de JavaScript
Estructuras de datos inmutables
Cambiando de contexto al llamar a una función
¿Cuándo hace falta poner el punto y coma al final de la línea?
Crea una cuenta o inicia sesión
¡Continúa aprendiendo sin ningún costo! Únete y comienza a potenciar tu carrera
Vamos a empezar a trabajar con objetos, veremos cómo declararlos, cuáles son sus ventajas, cómo asignarles atributos y cómo trabajar con ellos dentro de las funciones.
Los objetos se definen delimitados mediante llaves {}
Un atributo se compone de una clave (key) y un valor (value), que se separan entre sí por dos puntos “”:"". Los valores pueden ser de tipo string, número, booleano, etc. Cada atributo está separado del siguiente por una coma. Un objeto puede tener todos los atributos que sean necesarios.
Escribir el nombre de un objeto separado por un punto del nombre de un atributo, nos permite acceder al valor de dicho atributo para ese objeto. Un objeto también se puede pasar como atributo en una función.
Las últimas versiones de JavaScript nos permiten desglosar el objeto para acceder únicamente al atributo que nos interesa. Esto se consigue encerrando el nombre del atributo entre llaves { }.
Aportes 386
Preguntas 38
les sugiero profundamente si quieren complementar a lo que estan aprendiendo, esta pagina eloquentjavascript.net
Amigos? amigo el que te ponga de ejemplo en tus clases 😅
Cuando vayan a imprimir en consola uno o varios objetos utilicen console.table en lugar de console.log y notaran la diferencia 😉
Practicando lo aprendido…

// El valor puede ser de cualquier tipo válido en JS (string, number, boolean, array, object, etc)
var persona = {
nombre: 'Alejandro',
apellidos: 'González Reyes',
edad: 34,
ciudad: 'Santiago Tianguistenco',
codigoPostal: '52710'
}
var persona2 = {
nombre: 'Miguel Angel',
apellidos: 'González Reyes',
edad: 18,
ciudad: 'San Miguel Almaya',
codigoPostal: '52710'
}
function imprimirNombreMayusculas(nombre) {
nombre = nombre.toUpperCase()
console.log(nombre)
}
// Para acceder a la información encapsulada en un objeto de JS, es necesario invocar el objeto.propiedad
imprimirNombreMayusculas(persona.nombre)
imprimirNombreMayusculas(persona2.nombre)
// Esta función recibe un objeto de JS, por tanto internamente se accede al valor de cada uno de sus atributos o propiedades
function imprimirPersona(persona) {
var nombre = persona.nombre.toUpperCase()
var apellidos = persona.apellidos.toUpperCase()
var ciudad = persona.ciudad.toUpperCase()
var codigoPostal = persona.codigoPostal.toUpperCase()
var edad = persona.edad + ' años'
console.log('Tu nombre es ', nombre, apellidos, 'vives en', ciudad, 'con código postal', codigoPostal, 'y tienes', edad)
}
// Es posible pasar como parámetro un objeto completo a una función
imprimirPersona(persona)
imprimirPersona(persona2)
// En ES6 existe lo que se conoce como "destructuring", el cual consiste en descomponer o desglozar un objeto y acceder unicamente al atriuto(s) que nos interesa. Esto se consigue encerrando entre llaves los atributos requeridos
function imprimirNombreCompleto({nombre, apellidos}) {
var sujeto = `${nombre} ${apellidos}`
console.log('Bienvenido', sujeto)
}
imprimirNombreCompleto(persona)
imprimirNombreCompleto(persona2)
// En JS, por lo general, las funciones o métodos reciben como parámetros a un objeto. Que internamente se le emplean sus valores para configurar o inicializar determinadas tareas
imprimirNombreCompleto({
nombre: 'Tomas de Aquino',
apellidos: 'Tonalá Franciscano',
edad: 78,
})
RESUMEN:
En esta clase aprendimos a declarar objetos, y a llamar atributos de diferentes maneras. En el siguiente código se hacen ejemplos con elementos químicos para facilitar la diferenciación entre objetos. El código está comentariado.
// Los objetos sirven para modelar cosas de la vida real, abstracciones y demás. Podemos empaquetar atributos a un objeto. Un objeto puede ser pasado como parámetro en una función.
var elemento ={
//Key______________//Value
nombre_elemento: "Hidrógeno",
numero_atomico:1,
configuracion_electronica: '1S-1',
categoria: "Gas",
usos:"Combustible"
}
var elemento ={
//Key______________//Value
nombre_elemento: "Carbono",
numero_atomico:12,
configuracion_electronica: '4p-6',
categoria: "Sólido",
usos:"la vida misma como la conocemos."
}
// Me imprimirá todos los atributos que tiene el objeto.
function imprimirElemento(){
console.log(elemento.nombre_elemento);// llamo individualmente los atributos de ese objeto.
console.log(elemento.numero_atomico);
}
imprimirElemento() // Invoco la función sin parámetros. Si la llamo tomando el código así, solo me leerá los atributos de Carbono, por lo que implica que debe llamarse los objetos en orden
//Los objetos tienen un nombre único. por lo cual:
var hidrogeno ={
//Key______________//Value
nombre_elemento: "Hidrógeno",
numero_atomico:1,
configuracion_electronica: '1S-1',
categoria: "Gas",
usos:"Combustible"
}
var carbono ={
//Key______________//Value
nombre_elemento: "Carbono",
numero_atomico:12,
configuracion_electronica: '4p-6',
categoria: "Sólido",
usos:"la vida misma como la conocemos."
}
var helio ={
//Key______________//Value
nombre_elemento: "Helio",
numero_atomico:2,
configuracion_electronica: 'NN',
categoria: "Gas noble",
usos:"El sol está hecho de helio"
}
// Me imprimirá todos los atributos que tiene el objeto.
function imprimirElementoSinParametro(){
console.log(hidrogeno.nombre_elemento);// llamo individualmente los atributos de ese objeto.
console.log(carbono.nombre_elemento);// llamo individualmente los atributos de ese objeto.
console.log(carbono.usos);// llamo individualmente los atributos de ese objeto.
}
imprimirElementoSinParametro() // Así puede llamarme a ambos elementos químicos por su atributo nombre y usos.
//Podemos inclusive pasar por parámetro a un objeto
function imprimirElemento(elemento){
var nombre_elemento = elemento.nombre_elemento
console.log(nombre_elemento);
}
imprimirElemento(carbono) // Invoco la función con el nombre del objeto
// O podemos reducir aún más
//Sin necesidad de declarar una variable
function imprimirElementoSinVariable(elemento){
console.log(elemento.nombre_elemento);
}
imprimirElementoSinVariable(helio) // Invoco la función con el nombre del objeto
//Existen diferentes formas de trabajar dependiendo del contexto, podemos desglosar el objeto como parámetro de la siguiente manera:
function imprimirElementoSinVariable({nombre_elemento, usos}){ // De esta manera solo llamo los atributos que me interesan del objeto al que voy a pasar por función.
console.log(nombre_elemento);
console.log(usos);
}
imprimirElementoSinVariable(helio) // Invoco la función con el nombre del objeto
imprimirElementoSinVariable(hidrogeno) // Invoco la función con el nombre del objeto
imprimirElementoSinVariable(carbono) // Invoco la función con el nombre del objeto
imprimirElementoSinVariable({nombre_elemento: 'Uranio',usos:'Ninguno buena para la humanidad'}) // Puedo inclusive crear atributos de un objeto dentro de la función.
Los objetos también se pueden definir usando su forma procedimental:
var objeto = new Object();
Quiero compartir que se puede construir un objeto con múltiples elementos key-value dentro de la llamada a una función y que una función puede recoger más de un elemento de un objeto tal y como se muestra a continuación:
var samuel = {
nombre: 'Samuel',
apellido: 'Fumero',
edad: 22
}
var pepe = {
nombre: 'Pepe',
apellido: 'González',
edad: 45
}
function imprimirNombreEnMayusculas({nombre, edad}){
console.log(`${nombre} tiene ${edad} años`)
}
imprimirNombreEnMayusculas(samuel)
imprimirNombreEnMayusculas(pepe)
imprimirNombreEnMayusculas({nombre: 'Maria',
apellido: 'Pérez',
edad: 19})
var nombredanny = 'Danny'
var nombreleo = 'Leo'
var nombrelaura = 'Laura'
function imprimirMayuscula(nombre) {
nombre = nombre.toUpperCase()
console.log(nombre)
}
imprimirMayuscula(nombredanny)
imprimirMayuscula(nombreleo)
imprimirMayuscula(nombrelaura)}
////////------------Ejemplo 1-------------
var danny = {
// nombre es key o llave y danny es valor
nombre: 'Danny',
apellido: 'Velasquez',
edad: 29
}
var andrea = {
nombre: 'Andrea',
apellido: 'Reyes',
edad: 26
}
var universidad = {
nombre: 'ZAMORANO',
ubicacion: 'San Antonio de Oriente',
Fundación: 1942
}
// esta es una variable local que no afecta la variable global
function imprimirMayuscula(lafuncionreutilizable) {
lafuncionreutilizable = lafuncionreutilizable.toUpperCase();
console.log(lafuncionreutilizable)
}
imprimirMayuscula(danny.apellido)
imprimirMayuscula(andrea.apellido)
imprimirMayuscula(universidad.ubicacion)
imprimirMayuscula('La Universidad ' + universidad.nombre + ' Esta Ubicada en ' + universidad.ubicacion)
// Resultado:
// VELASQUEZ
// REYES
// SAN ANTONIO DE ORIENTE
// LA UNIVERSIDAD ZAMORANO ESTA UBICADA EN SAN ANTONIO DE ORIENTE
// ////////------------Ejemplo 2-----
// esta es una variable local que no afecta la variable global
function imprimirMayuscula(persona) {
var lafuncionreutilizable = persona.nombre.toUpperCase();
console.log(lafuncionreutilizable)
}
imprimirMayuscula(danny)
// Resultado: DANNY
imprimirMayuscula(andrea)
// Resultado: ANDREA
// ////////------------Ejemplo 3-----
// esta es una variable local que no afecta la variable global
function imprimirMayuscula(persona) {
console.log(persona.nombre.toUpperCase())
console.log(persona.apellido.toUpperCase())
}
imprimirMayuscula(danny)
imprimirMayuscula(andrea)
// ////////------------Ejemplo 4-----
// esta es una variable local que no afecta la variable global
function imprimirMayuscula({ nombre }) {
console.log(nombre.toUpperCase())
}
imprimirMayuscula(danny)
imprimirMayuscula(andrea)
imprimirMayuscula(universidad)
imprimirMayuscula({ nombre: 'eap' })
lo hice así para poder modificar más de dos atributos del objeto:
function imprimirNombreM(v)
{
n = v.nombre.toUpperCase();
a = v.apellido.toUpperCase();
e = v.edad;
console.log(`${n} ${a} is ${e} years old`);
}
imprimirNombreM(Francisco);```
Además también el destructuring de objetos en JavaScript permite asignar un valor por default, para este caso quedaría de la siguiente forma.
function imprimirNombreEnMayusculas({nombre = ''}) {
console.log(nombre.toUpperCase())
}
De ésta forma al llamar al función sin parámetros, imprimirá en la consola una línea vacía y no arrojará una expeción.
Nota: Como valor por defecto de nombre puse dos comillas simples, también podrían ser dos comillas dobles.
Comparto mi aporte, yo quise pasar por parametros nombre y apellido, para que la funcion me arrojara un saludo con mi nombre en mayusculas. Aca dejo el codigo:
var henry = {
nombre: "Henry",
apellido: "Garcia",
edad: 23
};
var alfredo = {
nombre: "Alfredo",
apellido: "Rodriguez",
edad: 23
};
function imprimirNombreEnMayusculas({ nombre, apellido }) {
console.log(`Mi nombre es ${nombre.toUpperCase()} ${apellido.toUpperCase()}`)
};
imprimirNombreEnMayusculas(henry);
imprimirNombreEnMayusculas(alfredo);
SUPER APUNTES OBJETOS.
{
nombre = nombre.toLocaleUpperCase()
console.log(nombre)
}
imprimirElNombreEnMayusculas(angel.nombre)
imprimirElNombreEnMayusculas(dario.nombre)
debemos indicar en los parámetros de “imprimirElNombreEnMayusculas” el objeto y a que clave queremos acceder, como en este caso es nombre. Otra opción es decirle a la función que en vez de recibir un nombre recibe el objeto de la persona y ordenarle que tome el nombre, esto se hace de la siguiente manera.
También se puede escribir de la siguiente manera
var angel = {
nombre: ‘Angel’,
apellido: ‘Sulbaran’,
Edad: 23
}
var dario = {
nombre: ‘Dario’,
apellido: ‘Susnisky’,
edad: 27
}
function imprimirElNombreEnMayusculas(persona) {
console.log(persona.nombre.toUpperCase())
}
imprimirElNombreEnMayusculas(angel)
imprimirElNombreEnMayusculas(dario)
otra manera de escribirlo es
var angel = {
nombre: ‘Angel’,
apellido: ‘Sulbaran’,
Edad: 23
}
var dario = {
nombre: ‘Dario’,
apellido: ‘Susnisky’,
edad: 27
}
function imprimirElNombreEnMayusculas({ nombre }) {
console.log(nombre.toUpperCase())
}
imprimirElNombreEnMayusculas(angel)
imprimirElNombreEnMayusculas(dario)
se escribe de esta manera para que en los parámetros de la función le ordenamos que solo traiga el nombre del objeto y eso es lo que le especificamos que pase a mayúsculas.
Porque solo obtendremos el atributo nombre del objeto que nos llegue
Al indicar en la función imprimir nombre que traiga el atributo nombre, se debe tener cuidado, debido que si el objeto que se desea traer no posee nombre, va a haber un error.
Recuerda que tenemos Acceso a propiedades de un objeto usando las nuevas funciones liberadas con ES6 Object Destructuring (leer mas en MDN Web Docs)
object = key: value
🆂🅸🅼🅿🅻🅴
Un objeto en JS es lo equivalente a una CLASE en CSS.
Para pedir dos parámetros y desglosarlos, en las mismas llaves. colocamos una coma y el siguiente atributo.
function imprimirNombreEnMatuscular({ nombre,apellido }){
console.log(nombre.toUpperCase())
console.log(apellido.toUpperCase())
}
Shaves, Shavascript, Sacha
Me causó curiosidad la palabra Prolijo, gracias por el nuevo vocabulario.
Complemento: https://www.geeksforgeeks.org/objects-in-javascript/
La forma de recibir objetos o mandarlos en funciones esta genial!, no lo había visto nunca
Muy buena explicación
OBJETOS
- Los objetos se definen delimitados mediante llaves {}
- Un atributo se compone de una clave (key) y un valor (value), que se separan entre sí por dos puntos “”:"".
- Se puede pasar como parametro en una funcion uno de sus atributos o los que se necesiten!!
- EJEMPLO: function imprimir({objeto.atributo}) {console.log(atributo)}
- Tambien se puede enviar un nuevo objeto al llamar la funcion
- EJEMPLO: imprimir({nombre: ‘Roberto’})
Comprendido
//Para crear el objeto ponermos ‘var’ luego el nombre del objeto ‘sacha’
//luego ponemos '= y abrimos llaves '´{} nos delimitan el objetos podremos poner
//las caracteristicas ‘atributos’ del objeto. cada atributo debe estar
//separado por comas
var sacha={
//los atributos estan estructurados de la siguiente forma:
//CLAVE: VALOR ambos separados por dos puntos
nombre:‘sacha’,
apellido:‘carlos’,
edad:28
}
var dario={
nombre:‘dario’,
apellido:‘susnisky’,
edad:27
}
//--------------------------------------------------------------
//function imprimirNombreEnMayusculas(persona){
function imprimirNombreEnMayusculas({nombre}){
console.log(nombre.toUpperCase())
}
imprimirNombreEnMayusculas(sacha)
imprimirNombreEnMayusculas(dario)
//se puede crear objetos siempre i cuando tengamos el atributo que estamos
//llamando
imprimirNombreEnMayusculas({nombre:‘pepito’})//se puede crear objetos
//nos vota error si mandamos a imprimir sin atributos
imprimirNombreEnMayusculas()
Los objetos se definen delimitados mediante llaves {}
Vamos a empezar a trabajar con objetos, veremos cómo declararlos, cuáles son sus ventajas, cómo asignarles atributos y cómo trabajar con ellos dentro de las funciones.
En el principio de la clase veíamos como había que ir declarando una variable por cada persona y que esto no era prolijo, pero al final con los objetos terminas declarando uno por cada nueva persona igual… y esto no fue explicado, en ese aspecto la verdad que espero aclarar en los próximos videos…
Cómo puedo imprimir el objeto completo: El nombre, el apellido y la edad?
El desglosar un object también se conoce como Destructuring, tiene muchas aplicaciones aquí el enlace a la documentación si desean aprender mas sobre el tema .
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
El error es TypeError
cuando el valor del parámetro no es, el valor esperado por la función
Excelente clase. Me gustó mucho esta posibilidad de poner el atributo directo del objeto dentro de llaves en el parámetro de la función. 🙂
=)
Este curso se complementa muy bien con el de programación básica, pero creo que le hacen falta ejercicios más prácticos
en el minuto 8:57 sale ese error, pero vi que se puede atrabajar desde el navegador, dandole valores en la consola, y el código funciona normal
Mi resumen.
// Clase 6 - OBJETOS
// como no podemos pisar una variable y no podemos crear dos variables con el mismo nombre,
//la mejor opción es crear un objeto. básicamente es una variable que contiene varias opciones.
var persona1 = {
nombre: 'Isabella',
apellido: 'Ferreyro',
edad: 2
}
// La manera convencional de escribir una función es esta
function imprimirNombreEnMayusculas(person){
var nombre = persona1.nombre.toUpperCase()
console.log(nombre)
}
// una manera mas corta de escribir el mismo código
function imprimirNombreMayus(person){
console.log('funcion corta ' + persona1.nombre.toUpperCase())
}
//manera mejorada y clara de desglosar el objeto en la función.
function imprimeNombreEnMayuscula({ nombre }){//Desglosamos el objeto persona1, obteniendo el atributo nombre
console.log('manera mejorada de escribir el nombre de ' + nombre.toUpperCase())
}
imprimirNombreEnMayusculas(persona1)
imprimirNombreMayus(persona1)
imprimeNombreEnMayuscula(persona1)
Los objetos también pueden tener más de un nivel de profundidad:
var personas = {
sacha: {
nombre: 'Sacha',
apellido: 'Complicado',
edad: 28
},
carlos: {
nombre: 'Carlos',
apellido: 'Fernandez',
edad: 23
}
}
Lo volví a repetir, me quedo claro!
Esto de ser un lenguaje debilmente tipado es una ventaja para la rapidez al escribir código, pero hay que ser muy cuidadoso al momento del debug, por lo mismo se pueden tener muchos errores y no obtener ninguna excepción que nos avise.
por que creó dentro de la funcion una variable nombre?
function imprimirEnayusculas(persona) {
var nombre = persona.nombre.toUpperCase();
console.log('Hola mi nombre es ' + nombre);
}```
// crear objeto
var jery = {
nombre: 'jery',
apellido: 'ramirez',
edad: 23
}
function imprimirNombre(persona){
var nombre = persona.nombre.toUpperCase()
console.log(nombre);
}
function imprimirEdad({edad}){
console.log(edad);
}
imprimirNombre(jery);
imprimirEdad(jery);
imprimirEdad({edad:25})
Anotaciones de la clase, que de esta manera lo entiendo un poco más.
Codigo 1:
//Variables Globales
var Juan = {
nombre : 'Juan',
apellido : 'Teixeira',
edad : 30
}
var Nades = {
nombre : 'Nadeska',
apellido : 'Lara',
edad : 29
}
function ImprimirNombreEnMayuscula (parametro){
VariableLocal = parametro.nombre.toUpperCase()
console.log(VariableLocal);
}
ImprimirNombreEnMayuscula(Juan)
ImprimirNombreEnMayuscula(Nades)
Codigo 2:
//Variables Globales
var Juan = {
atributo1 : 'Juan',
atributo2 : 'Teixeira',
atributo3 : 30
}
function ImprimirNombreEnMayuscula ({atributo1}){
console.log( atributo1.toUpperCase());
}
ImprimirNombreEnMayuscula(Juan)
El mismo criterio de los diccionarios
En caso de que requiramos acceder a mas de un atributo de un objeto se puede desglosar de la siguiente manera:
var persona = {
nombre : 'Francisco',
apellido: 'Vázquez'
};
function nombreEnMayusculas({ nombre , apellido })
{
console.log(nombre.toUpperCase());
console.log(apellido.toUpperCase());
}
nombreEnMayusculas(persona)
// Clase 6 = OBJETOS
/* Los objetos reunen ciertas caracteristicas en comun (atributos) de un objeto de la vida real*/
var jose ={ // Los objetos se definen delimitados mediante llaves {}
nombre: 'jose',
apellido: 'calvano', //clave: Valor
edad: 28
/* Un atributo se compone de una clave (key) y un valor (value), que se separan entre sí
por dos puntos “”:"". Los valores pueden ser de tipo string, número, booleano, etc.
Cada atributo está separado del siguiente por una coma. Un objeto puede tener todos
los atributos que sean necesarios.*/
}
function imprimirMayusculas(nombre) {
nombre = nombre.toUpperCase()
console.log(nombre)
}
imprimirMayusculas(jose.nombre)
/*Escribir el nombre de un objeto separado por un punto del nombre de un atributo,
nos permite acceder al valor de dicho atributo para ese objeto.*/
//Mejorando un poco
var persona ={
nombre : 'jose',
apellido : 'calvano',
edad : 23
}
imprimirMayusculas(persona.apellido)
//un objeto también se puede pasar como atributo en una función.
function imprimirMayusculas2(nombre) {
nombre = persona.nombre.toUpperCase()
console.log(nombre)
}
imprimirMayusculas2(persona)
//Las últimas versiones de JavaScript nos permiten desglosar el objeto para acceder únicamente al atributo que nos interesa. Esto se consigue encerrando el nombre del atributo entre llaves { }.
function imprimirMayusculas3({nombre}) {
nombre = nombre.toUpperCase()
console.log(nombre)
}
imprimirMayusculas3(persona)
//Podemos definir a demas un objeto de la siguiente manera
imprimirMayusculas3({nombre:'juan'})```
Que interesante, Descubri tres formas de hacer lo mismo, Obviamente unas mejores que otras… pero es interesante!
Hola, me gustaría utilizar un archivo .JSON como base de datos (solo para hacer pruebas durante el desarrollo) y poder añadir instancias, borrarlas, y rellenar datos, modificarlo desde el index.js en el lado del servidor con node.js, No cual sería la manera. ¿Alguien sabe como podría hacerlo?
Saludo con nombre y edad, usando arrow functions:
let david = {
nombre: 'David',
apellido: 'Rivadeneyra',
edad: 33
}
let samuel = {
nombre: 'Samuel',
apellido: 'Rivadeneyra',
edad: 29
}
const saludar = (nombre, edad) => {
c(`Hola me llamo ${nombre} y tengo ${edad} años.`)
}
saludar(david.nombre, david.edad)
saludar(samuel.nombre, samuel.edad)
Nota : Estos tipos de objetos son denominados “Objetos literales”
var sacha = {
nombre: 'Sacha',
apellido: 'Lifszyc',
pasatiempo: 'cine',
apodo: 'Pepito',
edad: 28
}
var dario = {
nombre: 'Darío',
apellido: 'Susnisky',
pasatiempo: 'futbol',
apodo: 'D',
edad: 27
}
//Accediendo al atributo (nombre):
function imprimirNombreEnMayuscu1as(nombre) {
nombre = nombre.toUpperCase()
console.log(nombre)
}
imprimirNombreEnMayuscu1as(sacha.nombre)
imprimirNombreEnMayuscu1as(dario.nombre)
//Accediendo al objeto (la persona):
function imprimirApellidoEnMayuscu1as(persona) {
var apellido = persona.apellido.toUpperCase()
console.log(apellido)
}
imprimirApellidoEnMayuscu1as(sacha)
imprimirApellidoEnMayuscu1as(dario)
//Accediendo al objeto (la persona) sin declarar una nueva variable:
function imprimirApellidoEnMayuscu1as(persona) {
console.log(persona.apellido.toUpperCase())
}
imprimirApellidoEnMayuscu1as(sacha)
imprimirApellidoEnMayuscu1as(dario)
/*Otra alternativa puede ser que al declarar la funcion, desglosar el objeto en
los parámetros (nueva funcionalidad de JS):*/
function imprimirPasatiempoEnMayuscu1as({ pasatiempo }) {
console.log(pasatiempo.toUpperCase())
}
imprimirPasatiempoEnMayuscu1as(sacha)
imprimirPasatiempoEnMayuscu1as(dario)
//Se puede definir el objento dentro del parámetro de la función:
function imprimirApodoEnMayuscu1as({ nombre }) {
console.log(nombre.toUpperCase())
}
imprimirApodoEnMayuscu1as({ nombre: 'Pepito' })
/*Si se llama una función y no se quiere hacer referencia a una variable, saldrá error
ya que JS tratará de acceder a un atributo de algo que terminará siendo 'undifined'.
Esto también pasara si el objeto que se le pasa a la función no contiene el atributo:
function imprimirPasatiempoEnMayuscu1as({ pasatiempo }) {
console.log(pasatiempo.toUpperCase())
}
imprimirPasatiempoEnMayuscu1as()
Resultado: Uncaught TypeError
*/
Esto es lo que yo entendí de la clase.
/*declaramos un objeto que seró una representación de algo de la vida real
que tiene caracteristicas comunes.
*/
var hector = {
nombre: 'Héctor', //el atributo estó compuesto por key : value
apellido: 'López', //Separamos cada atributo con una coma ','
edad: 22
}
var euma = {
nombre: 'Eugenia',
apeliido: 'López',
edad: 30
}
//Ambas variables estan declaradas en el objeto global.
/*En este ejemplo declaramos una nueva variable que toma el valor del atributo nombre
del parametro persona, donde persona es el objeto.*/
function imprimirNombreEnUpper(persona) {
var nombre = persona.nombre.toUpperCase()
console.log(nombre)
}
/*Podemos, en cambio, desglosar el objeto para recuperar el valor del atributo únicamente.
Para ello vamos a usar llaves dentro del parámetro. { atributo } */
function imprimirNombreEnLower({ nombre }) {
console.log(nombre.toLowerCase())
}
imprimirNombreEnUpper(hector)
imprimirNombreEnUpper(euma)
imprimirNombreEnLower(hector)
imprimirNombreEnLower(euma)
//Podemos declarar el atributo dentro del parámetro.
imprimirNombreEnLower({nombre: 'Rodolfo'})
imprimirNombreEnLower({apellido: 'Ruíz'})```
Sencilla y poderosa explicación de objetos en javascript, genial!
Separación de objeto.atributo permite el acceso
JSON o JavaScript Object Notation son los objetos que creamos en JavaScript para el intercambio de datos.
Por favor corrijan si me equivoco.
<code>
var Daniel ={
nombre: "Daniel",
apellido: "Dominguez",
edad: "23"
}
var Juan ={
nombre: "Juan",
apellido: "Dominguez",
edad: "15"
}
function imprimirNombreEnMayusculas({nombre}){
console.log(nombre.toUpperCase());
}
imprimirNombreEnMayusculas(Daniel);
imprimirNombreEnMayusculas(Juan);
imprimirNombreEnMayusculas({nombre: "Mercedez"});
imprimirNombreEnMayusculas({nombre: "Perez"});
justo me dio curiosidad e intente ponerle 2 atributos para el objeto de la función y también se puede :
function imprimirNombreEnMayusculas({ nombre, apellido }){ console.log(nombre.toUpperCase(), apellido); }
un poco dificil lo de los parametros en las funciones😣
Excelente, me estaba costando entender sobre este tema 😃 gracias.
Muy buena clase, algo vital en programación orientada a objetos.
Además en vez de, por ejemplo: var JuanNombre, JuanApellido, JuanEdad, etc…
Simplemente un objeto Juan = { Atributos que tiene }
Esto es el equivalente a una tupla?
Aquí mi resumen de la clase:
//Ejemplo 1: Declaramos una variable por cada nombre a utilizar
var nombreMirna = 'Mirna'
var nombreAlberto = 'Alberto'
function imprimirNombreEnMayusculas1(nombre) {
nombre = nombre.toUpperCase()
console.log(nombre)
}
imprimirNombreEnMayusculas1(nombreMirna)
imprimirNombreEnMayusculas1(nombreAlberto)
//Optimizando el código con objetos
var mirna = {
nombre: 'Mirna',
apellido: 'Veras',
edad: 39
}
var alberto = {
nombre: 'Alberto',
apellido: 'Castillo',
edad: 42
}
//Ejemplo 2: Llamando al objeto 'persona'
function imprimirNombreEnMayusculas2(persona) {
console.log(persona.nombre.toUpperCase())
}
imprimirNombreEnMayusculas2(mirna)
imprimirNombreEnMayusculas2(alberto)
//Ejemplo 3: Desglosando el objeto por el atributo que nos interesa
function imprimirNombreEnMayusculas3({ nombre }) {
console.log(nombre.toUpperCase())
}
imprimirNombreEnMayusculas3(mirna)
imprimirNombreEnMayusculas3(alberto)
//Definiendo un objeto al invocar a la función
imprimirNombreEnMayusculas3({ nombre: 'Pepito' })
//Invocar a la función sin parámetros o con los parámetros incorrectos (da error)
imprimirNombreEnMayusculas3()
imprimirNombreEnMayusculas3({ apellido: 'Gómez' })
Básicamente en esta clase aprendes JSON
Se podría destructurar usando valores por defecto en caso que la variable no llegue
const persona = {
nombre: 'Sebastian',
apellido: 'Otalora',
edad: 25
}
function imprimirNombreEnMayuscula(persona) {
const { nombre = '' } = { ...persona }
console.log('=====imprimirNombreEnMayuscula======');
console.log('[nombre]', nombre.toUpperCase());
console.log('====================================');
}
<var personita = {
nombre: 'rodrigo',
apellido: 'velez',
edad: 40
}
var lorena = {
nombre: 'lorena',
apellido: 'jimenez',
edad: 19
}
var edades = {
edad: 20
}
//ejercicio
//funcion simple pasamos parametro x parametro y la mandamos a llamar asi x parametro x parametro
function imprimirnombrecompletomasedad(nombre, apellido, edad){
console.log(`mi nombre completo es ${nombre} ${apellido} y tengo ${edad} `)
}
imprimirnombrecompletomasedad(lorena.nombre, lorena.apellido, lorena.edad)
//funcion desestruturada la llamaos en un solo objecto y la mandamo a llamar con un solo objecto del nombre de la variable que tiene
function mostrarapellidoyedad({apellido, edad}){
console.log(`mi apellido y edad son ${apellido} ${edad}`)
}
mostrarapellidoyedad(personita)>
var miguel = {
nombre:'Miguel',
apellido:'Porras',
edad:25,
cuidad : 'Bogota'
}
var yenny = {
nombre:'Yenny',
apellido:'Gomez',
edad:24,
cuidad : 'Soacha'
}
function imprimirNombreMayusculas({nombre,apellido,edad,cuidad}){
console.log(nombre+ " "+ apellido)
console.log(edad +" "+ cuidad)
}
imprimirNombreMayusculas(miguel);
imprimirNombreMayusculas(yenny);
Dejo este ejemplo de otra clase de JS:
// Un objeto es una colección de propiedades, y una propiedad es una asociación de key (nombre, o clave) y valores.
var objecto = {}; // Object Literal Syntax
var miAuto = {
marca: “Toyota”, // key - value
modelo: “Corolla”,
annio: 2020,
detallesDelAuto: function() { // Metodo de un objeto (una función dentro de un objeto)
return Auto ${this.modelo} ${this.annio}
;
}
};
miAuto.annio
miAuto.modelo
miAuto.detallesDelAuto();
En JavaScript, un objeto es un entidad independiente con propiedades y tipos. Compáralo con una taza, por ejemplo. Una taza es un objeto con propiedades. Una taza tiene un color, un diseño, tiene peso y un material con la que fue hecha, etc. De la misma manera, los objetos de JavaScript pueden tener propiedades, las cuales definen sus características.
//Sintaxis
var NombreDelObjeto = {
clave: 'valor',
clave: 'valor',
clave: 'valor'
}
//Ejemplo
var carlos = {
nombre: 'carlos',
apellido: 'Diaz',
edad: '34'
}
Si bien el estándar en programación es mencionar los términos en inglés, queda mucho más claro llamar a los Keys ‘claves’, en vez de ‘llaves’, como he notado que a veces se suele hacer.
Aprendí que las variables no se declaran con mayúscula de lo contrario da error o no se veran los resultados.
Aqui la información en Mozilla Devoloper sobre Objetos
Entendido
var david ={
nombre:'David',
apellido:'Baez',
edad: 28
}
var isabela ={
nombre:'Isabela',
apellido:'Baez',
edad: 9
}
function imprimirNombreEnMayusculas({nombre}){
console.log('Mi nombre en mayuscula es: ' + nombre.toUpperCase() + '.')
}
imprimirNombreEnMayusculas(david)
imprimirNombreEnMayusculas(isabela)
imprimirNombreEnMayusculas({nombre: 'Ana Maria'})
En otros lenguajes, como python, se conocen con el nombre de diccionarios.
Nueva funcionalidad de JS que accede a la propiedad del objeto directamente al indicarlo entre llaves {} como parametro de la funcion.
como se pone comillas en javascript
Objetos tienen atributos, los atributos tienen valores.
Un objeto es una variable que tiene en su interior más variables.
var johan = {
nombre: "Johan",
/* (clave : valor,) */
apellido: "Echeverri",
/* (clave : valor,) */
edad: 28
/*(clave: valor)*/
}
/* ^ */
/* | */
/* (----------Objeto----------) */
var miguel = {
nombre: "miguel",
apellido: "Aragon",
edad: 22
}
function imprimirNombreEnMayusculas(persona) {
console.log(persona.nombre.toUpperCase());
/* asi accedemmos al valor de los keys de un objeto */
}
imprimirNombreEnMayusculas(johan);
imprimirNombreEnMayusculas(miguel);
function imprimirNombreEnMayusculas2({ nombre }) {
console.log(nombre.toUpperCase());
/* la palabra nombre hace referencia a la key que estamos usando */
}
/* de esta manera ponemos que como parametro va a entrar un objeto que tiene una key llamada nombre y con ese argumento es que trabajaremos */
imprimirNombreEnMayusculas2(johan);
imprimirNombreEnMayusculas2(miguel);
/* imprimirNombreEnMayusculas2("juano"); */
/* este argumento remperia el codigo ya que la funcion esta esperando un objeto no un string, lo mismo pasa si no pasamos un argumento o si no pasamos un objeto con la key esperada (nombre)*/
imprimirNombreEnMayusculas2({ nombre: "Juano" });
/* sin embargo podemos invocar la funcion estableciendo como parametro un objeto de forma directa */
Por si a alguno le es más cómodo o le interesa correr el programa directamente desde atom.
Hay una opción en Settings => Install => Buscan “script” y se descargan la primera opción
Una vez instalado, van a Packages => Script => Run Script (o usar el shortcut Ctrl + Shift + B)
y listo! 😊
const users = [
{name: 'Dario', lastName: 'Susnisky'},
{name: 'Valeria', lastName: 'Susnisky'}
]
let listOfNames = users.map(item => console.log(item.name.toUpperCase()));
Los objetos son estructuras de datos que pueden tener atributos y/o tener métodos.
En la sintaxis de JavaScript se encierran entre llaves. {objeto}
Los Atributos de un objeto Están compuestos de una ++clave ++(que es como el nombre de la variable dentro del objeto), el signo de dos puntos ( que es como el signo igual para asignarle un valor a una clave) y el ++valor ++que puede ser cualquier tipo de dato inclusive otro objeto. Los objetos se separan entre si por el signo coma (al igual que en los arreglos).
Los ++Métodos ++ no son otra cosa que ++funciones ++para dicho objeto.
El Acceso a los atributos se puede dar por notación de puntos o notación de corchetes. siendo la primera, la primera la que se mostro en la clase y la segunda una forma en la que se le pasa un string con la clave del atributo encerrado entre corchetes, ejemplo [‘clave’]
Otras formas de iniciar y darle prioridades a un objeto:
var myCar = new Object();
myCar.make = 'Tesla';
myCar.model = 'S';
myCar.year = 2021;
var sasha= {
nombre : ‘sacha’,
apellido : ‘Sregks’,
edad : 20
}
var dario = {
nombre : ‘Dario’,
apellido : ‘Susniky’,
edad: 27
}
var carro = {
nombre : ‘spark’
}
//Forma 1
// function imprimirNombreEnMayusculas(sasha){
// nombre = nombre.toUpperCase()
// console.log(nombre)
// }
//forma 2
// function imprimirNombreEnMayusculas(persona){
// var nombre = persona.nombre.toUpperCase()
// console.log(nombre)
// }
//forma 3
// function imprimirNombreEnMayusculas(persona){
// console.log(persona.nombre.toUpperCase())
// }
//forma 4
function imprimirNombreEnMayusculas({nombre}){
console.log(nombre.toUpperCase())
}
imprimirNombreEnMayusculas(sasha)
imprimirNombreEnMayusculas(carro)
Cuando le lanzo esto el navegador me dice que no esta definido, sera que no esta actualizado estoy usando firefox
var miObjeto = {
nombre:“Edwin”,
apellido: “Mogollon”,
edad: 21
};
function ImprimirNombreYEdad({nombre}, {edad}){
var {nombre} = objeto;
var {edad} = objeto;
console.log("Hola me llamo “+ nombre +” Y tengo "+edad );
}
//ImprimirNombreYEdad(miObjeto);
ImprimirNombreYEdad({nombre: ‘Juan’}, {edad: ‘55’});
En esta clase hemos aprendido sobre objetos:
Los objetos se declaran de la siguiente manera:
var myCar {
color: 'blue',
brand: 'Toyota',
year: 2019
};
Podemos llamar a cada uno de estos atributos de nuestro objeto de la siguiente manera:
console.log(myCar.color);
console.log(myCar.brand);
console.log(myCar.year);
Además de ello les comparto el código de la clase:
//6th Lesson: Objects
//We declare an object with key and value: var objectName { , };
var aldo = {
personName: 'Aldo',
personLastName: 'Ortiz',
personAge: 28
};
var dario = {
personName: 'Darío',
personLastName: 'Suskinly',
personAge: 34
}
//we can use this if we wanna access directly to a part of the object
//function printObjectNameInUpperCase({ personName }) {
function printObjectNameInUpperCase(person) {
console.log(person.personName.toUpperCase());
console.log(person);
}
printObjectNameInUpperCase(aldo);
printObjectNameInUpperCase(dario);
//creating an attribute when calling a function!
printObjectNameInUpperCase({ personName: 'Carlos' });
3ra Forma de acceder al objeto
😄
var Persona1 = {
nombre: "Julio",
apellido: "Morado",
edad: 30,
};
var Persona2 = {
nombre: "Naty",
apellido: "Sipan",
edad: 29,
};
function imprimirEnMayuscucla(persona) {
var nombre = persona.nombre.toUpperCase()
var apellido = persona.apellido.toUpperCase()
console.log(nombre, apellido)
}
imprimirEnMayuscucla(Persona1);
imprimirEnMayuscucla(Persona2);
// Objetos.
var Jhonny = {
nombre: "Jhonny",
curso: "Desarrollo Web",
apellido: "Callisaya",
}
function nombreMa({nombre}) {
console.log(nombre.toUpperCase());
}
nombreMa(Jhonny); // JHONNY
Muy bien …
Buena clase!
excelente
¿En los objectos los key se pueden repetir sin ningun problema? ejemplo :
Sacha = { name: "sacha" , age: 20} Arturito = { name: "arturito" , age: 50}
aca las llaves son name y age
function imprimirNombreEnMayusculas({ nombre }){
console.log(nombre.toUpperCase())
}
imprimirNombreEnMayusculas(Fernando);
imprimirNombreEnMayusculas(Jensen);```
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?