Objetos

Name: Objetos
Uploaded: 2018-08-30T20:55:00+00:00
Duration: 10 min 2 s
Description: 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

Clase 9 de 55 • Fundamentos de JavaScript 2018

Clase anteriorSiguiente clase

Resumen

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

Victor Lozada

student•

Pequeño resumen:

Los objetos se definen con {} (llaves) para asignarlo a una variable se hace de esta manera var ejemplo = {}

Los objetos se componen por propiedades y valores, se utiliza ’,' para separar cada propiedad

var miObjeto = {
	//propiedad: 'valor'
	direccion: 'Alguna direccion, caracas, venezuela',
	//key:	     'value' (en ingles)
	codigoPostal: '1020'
}

Los objectos pueden recibir como valor en sus propiedades, cadenas de texto (string), valores numericos (int) y booleanos. Tambien puedes realizar operaciones dentro de los valores. Ejemplo:

let objeto2 = {
	'string' : 'Hola soy una cadena de texto',
	'int': 123,
	'boolTrue': true,
	'boolFalse': false,
	'sumar': 5+5,
	'minuscula': 'TEXTO'.toLowerCase()
}

Los objetos se pueden enviar por para parámetro a alguna función de esta manera:

function suma({n1,n2}){
	var operacion = n1 + n2
	console.log(operacion)
}

var miSuma = {
	n1: 5,
	n2: 10
}

suma(miSuma) // Salida ->15
suma({n1:100, n2: 100 + 50}) // Salida -> 250
suma({n1: 100 - 1, n2: (200 * 2) + 1  }) // Salida -> 500

Victor Lozada

student•

Adicional:

Las propiedades en los objetos pueden recibir objetos, ejemplo:

var chat = {
	info: {
		mensaje: 'Algun mensaje',
		fechaMensaje: '20/10/2050',
		deUsuario: 'victor',
		aUsuario: 'SachaLifszyc'
	}
}

En este caso para acceder a el mensaje de el objeto chat seria de esta manera:

console.log(chat.info.mensaje) // Salida -> Algun mensaje

Jesus Ricardo Moreira Cedeño

student•

Gracias por el resumen 😃

Diego Andrés Rojas González

student•

Otra forma de agregarle atributos a un objeto

primero declaramos un objeto vació:

var yo = {}

y la manera de agregarle valores es la siguiente

yo.nombre = 'Diego'
yo.segundoNombre = 'Andres'

Y ya esta 😆

Diego Andrés Rojas González

student•

otra manera de hacer lo mismo es usando corchetes y dentro de ellos el nombre del atributo con comillas:

yo['sobrenombre'] = 'dandres'

de esta forma también podemos mostrar el valor del atributo del objeto

Carlos Eduardo Garcia Tejeda

student•

@dandres de hecho me gusta mas la forma de corchetes ya que a veces al acceder propiedas te subraya un error si usas un linter

Diego Andrés Rojas González

student•

Les dejo la documentación de los objetos
+Oficial W3
+Muy buena documentación

Edward Tamay

student•

Gracias

José Gregorio Block

company_admin•

#Gracias!

Carlos Mario

student•

José Gregorio Block

company_admin•

#Excelente

Leonardo Aedo Jimenez

student•

Lo haces a mano o usas algun programa?

Alejandro Caputo

student•

les sugiero profundamente si quieren complementar a lo que estan aprendiendo, esta pagina eloquentjavascript.net

José Gregorio Block

company_admin•

#Interesante

Jesús Andrés Monge Loor

student•

Excelente libro muchas gracias por compartirlo!

Santiago Restrepo

student•

Amigos? amigo el que te ponga de ejemplo en tus clases 😅

David Perez

student•

Cuando vayan a imprimir en consola uno o varios objetos utilicen console.table en lugar de console.log y notaran la diferencia ;)

Lissette Johana Garzón Cortés

student•

/**
 * OBJETO: Reune caracteristicas que tienen en comun una
 * representacion de algo en la vida real.
 * 
 * Se define con ={}, dentro de las llaves pondremos 
 * las propiedades/Atributos y sus respectivos valores, cada propiedad
 * va separada por coma (,). La ultima propiedad no tendrá ,

var miObjeto = {
   atributo: 'Valor',
   mensaje:   'Hola' ,
   costo:      300   ,
   destino:   'Mundo'
}
 */

var carola = {
    nombre:   'Carola',
    apellido: 'Garcia',
    edad:     30
}

var fini = {
    nombre:   'Josefina',
    apellido: 'Pulson'  ,
    edad:     28
}

imprimirNombreEnMayusculas(carola.nombre)
imprimirNombreEnMayusculas(fini.nombre)

function imprimirNombreEnMayusculasObj(persona) {
    //var nombre = persona.nombre.toUpperCase()
    //console.log(nombre)
    console.log('Objeto: ' + persona.nombre.toUpperCase())
}

imprimirNombreEnMayusculasObj(carola)
imprimirNombreEnMayusculasObj(fini)

//Desglosar el objeto: En la funcion para hacer referencia solo
// al atributo que nos interesa de un objeto, ponemos en los parametros
// entre llaves solo los atributos que nos interesen tomar de ese objeto
// que se envía por parametro
function imprimirNombreEnMayusculasObjDesg( {nombre} ) {
    console.log('Desglosado: ' + nombre.toUpperCase())
}

imprimirNombreEnMayusculasObjDesg(carola)
imprimirNombreEnMayusculasObjDesg(fini)

//Creamos un objeto al momento de llamar la funcion
imprimirNombreEnMayusculasObjDesg({nombre: 'Pepito'})

Sham del Prado

student•

no entendi

David Quintana

student•

Pero ahí nunca defines la función imprimirNombreEnMayusculas( )

Ivan Santiago

student•

No sabia eso de los corchetes en el atributo 😮

Hunk Hk

student•

Practicando lo aprendido...

![](

Jesús Alejandro Machado Ortiz

student•

Muy ordenado felicidades.

Stiven Jiménez

student•

Esta documentación me ayudo a entender mejor los objetos
https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Trabajando_con_objectos

cesar alejandro

student•

gracias muy buen aporte

Carlos Humberto Taracena Sandoval

student•

prolijo, prolija adjetivo Que se lleva a cabo con detenimiento en los más pequeños detalles.

Esteban Salazar

student•

Me queda una duda, ¿cómo js sabe que function …({nombre}) pertenece a un atributo de cierta clase creada ?

Emerson Cedeño

student•

Por la misma sintaxis, de aquí que de definir una función de esta forma, debes estar completamente seguro de que no vas a necesitar otro valor, ya que así, lo único con que podrás trabajar es con el atributo nombre del objeto que envíes, de otra forma, te generará un error…

Diego Forero

Team Platzi•

Primero tenemos unos objetos que representan personas, estos tienen ciertos datos, también llamados propiedades o atributos, ahora bien cuando se pasa el objeto persona a la función no sabe que los tiene tu los defines, si esperas una atributo nombre y el objeto no lo tiene el programa va tirar un error, por eso se debe siempre validar que llegue el atributo o usar un valor por defecto. Esto se ve con más profundidad más adelante en el curso.

Mon Avellaneda

student•

Una pregunta tonta. Por qué funciona el código si el parámetro persona dentro de la función no está definido en ningún lado. ¿Los parámetros son variables, objetos? Deben estár definidos?

Mil gracias.

Diego Forero

Team Platzi•

persona dentro de la función imprimirNombreEnMayusculas es el que llega por parámetro, este parámetro puede ser un string, un entero, un objeto, un booleano etc.

Mon Avellaneda

student•

Eso lo entiendo @GOLLUM23 , hay parámetros de distinto tipo ; pero lo que tengo duda es: esos parámetros no se definen en ningún lado. ¿Pueden ser lo que tu decidas sin ser definidos? simplemente los pasas a la función y ya.

Daniel Valderrama Mendoza

student•

Pongo este comentario para que puedan ver el trabajo que hizo un compañero de platzi que es de gran ayuda https://github.com/pablojorgeandres/notas-clases/blob/master/fundamentosJS.md#-08---objetos-

Manuel Alejandro Sáez Palominos

student•

Wow!!! Hermoso

Alonso Castellanos

student•

Buen aporte

Alejandro González Reyes

student•

Mi aporte

// Los objetos en JS nos permiten encapsular información relacionada con alguna entidad o proceso de nuestra aplicación. Por tanto ayudan a no tener que declarar muchas variables independientes.

// Se componen de clave: valor (las claves se les conoce como atributos o propiedades)

// 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,
})

Alejandro Giraldo Londoño

student•

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: &quot;Hidrógeno&quot;,
    numero_atomico:1,
    configuracion_electronica: '1S-1',
    categoria: &quot;Gas&quot;,
    usos:&quot;Combustible&quot;
}

var elemento ={
    //Key______________//Value 
    nombre_elemento: &quot;Carbono&quot;,
    numero_atomico:12,
    configuracion_electronica: '4p-6',
    categoria: &quot;Sólido&quot;,
    usos:&quot;la vida misma como la conocemos.&quot;
}



// 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: &quot;Hidrógeno&quot;,
     numero_atomico:1,
     configuracion_electronica: '1S-1',
     categoria: &quot;Gas&quot;,
     usos:&quot;Combustible&quot;
 }
 
 var carbono ={
     //Key______________//Value 
     nombre_elemento: &quot;Carbono&quot;,
     numero_atomico:12,
     configuracion_electronica: '4p-6',
     categoria: &quot;Sólido&quot;,
     usos:&quot;la vida misma como la conocemos.&quot;
 }
 
 var helio ={
    //Key______________//Value 
    nombre_elemento: &quot;Helio&quot;,
    numero_atomico:2,
    configuracion_electronica: 'NN',
    categoria: &quot;Gas noble&quot;,
    usos:&quot;El sol está hecho de helio&quot;
}

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

David De Freitas

student•

Los objetos también se pueden definir usando su forma procedimental:

var objeto = new Object();

Samuel Fumero Hernández

student•

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

Danny Velásquez

student•

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' })

Objetos

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?