Asignación y manejo de objetos en ECMAScript 6

Clase 10 de 35 • Curso de ECMAScript: Historia y Versiones de JavaScript

Resumen

Los objetos literales consiste en crear objetos a partir de variables sin repetir el nombre. Antes de ES6, para crear un objeto a partir de variables consistía en la siguiente manera:

const nombre = "Andres"
const edad = 23

const objeto = {
    nombre: nombre, 
    edad: edad
}

objeto // { nombre: 'Andres', edad: 23 }

Cómo utilizar objetos literales

Con los parámetros de objeto puedes obviar la repetición de nombres, JavaScript creará la propiedad a partir del nombre de la variable con su respectivo valor.

const nombre = "Andres"
const edad = 23

const objeto = {nombre, edad}

objeto // { nombre: 'Andres', edad: 23 }

El resultado es el mismo, pero sin la necesidad de repetir palabras. Puedes combinarlo con variables que su propiedad tiene un nombre diferente.

const nombre = "Andres"
const edad = 23
const esteEsUnID = 1

const objeto = {
    nombre, 
    edad,
    id: esteEsUnID
}

objeto // { nombre: 'Andres', edad: 23, id: 1 }

Contribución creada por Andrés Guano (Platzi Contributor).

Irving Caamal

student•

Les dejo un ejemplito que recordé con esto

function Dog(name, age) {
    this.name = name;
    this.age = age;
    this.barking = function() { return `${this.name} says WOOF`}
}
const Kira = new Dog("Kira", 3)
Kira.barking();

Output: 'Kira says WOOF'

Walter Omar Barrios Vazquez

student•

Buen ejemplo Irving! Le agregaría console.log para que se muestre: console.log(Kira.barking());

Josue Cerron Tuesta

student•

Buen aporte bro!

Edier Gama

student•

Una manera de evitar el orden de los parámetros es mediante RORO - Recibir Objeto, Retornar Objeto:

Los parámetros se pasan dentro de un objeto y tenemos que retornar otro objeto que haga referencia a esas propiedades.

Ahora vean lo que pasa si hago dos objetos pero uno a uno de ellos pasándole los parámetros en desorden

Si notan Luis recibe los parametros en otro orden pero igual funciona

Kevin Salazar

student•

Super interesante, pero me imagino que solo es para casos en que se le envié un objeto con propiedades llamadas igual a los parámetros de la función, ¿No?.

LESTHER XITUMUL MANUEL

student•

Interesante 🤠🤘🏼

Yuli Alexandra Pulido Castañeda

student•

Hola Chic@s ES6

Object literals

function newUser(user, age, country, uId) {
    return {
        user,
        age,
        country,
        id: uId
    }
}

console.log(newUser("bndx", 24, "COL", 1));

Manuel Cabos

student•

Un pequeño typo, es enhanced 👀

// enhanced object literals

Kevin Salazar

student•

Nice!.

Carlos Andrade

student•

10/35 ES6: object literals

Los objetos literales permiten crear objetos a partir de variables sin tener que reperit los nombres de las variables en la creación del objeto.

Por ejemplo, antes de ES6, para crear un objeto a partir de variables se utilzaba la siguiente sintaxis

const nombre = "Juan";
const edad = 30;

const objeto = {
	nombre: nombre,
	edad: edad
}

Con los literales se puede obviar la repetición de nombres y simplificar el código:

const nombre = "Juan";
const edad = 30;

const objeto = {nombre, edad};

Esto creará el mismo objeto que en el ejemplo anterior.

Además, se pueden combinar variables con nombres diferentes apra crear propiedades del objeto:

const nombre = "Juan";
const edad = 30;
const identificador = 1234:

const objeto = {
nombre,
edad,
id: identificador
}

En este caso, la propiedad “id” se crea a partir de la variable “identificador”

Gerold Chávez

student•

Muy buenos ejemplos es uno de los mejores Curso que he tomado.

Orlando Alonso Gonzales Paz

student•

Hola chicos: comparto el codigo de la clase:

//--------------enahced OBJECT LITERALS----------

function newUser(user, age, country, uID){
    return{
        user: user,
        age,
        country,
        id: uID
    }
}

console.log(newUser("gndx", 34, "MX",1));

@orlandogonzales24

Maria Gabriela Rodriguez Cuevas

student•

📘 Archivos del Proyecto 📘

Pasos 📌

• Dentro de la carpeta es6, crear el archivo llamado: 05-object-literals.js
- - ◦ El código de los ejercicios queda:

//Compilar: seleccionar el código + click derecho + Run Code

//Ejercicio #1
// enhanced object literals

function newUser(user, age, country){
	return{
		user,
		age,
		country,
		id: uId
	}
}

console.log(newUser('gndx', 34, "MX", 1));

/*output:
id: uId
^

ReferenceError: uId is not defined
*/

function newUser2(user, age, country, uId){
	return{
		user,
		age,
		country,
		id: uId
	}
}

console.log(newUser2('gndx', 34, "MX", 1));

/*output:
{ user: 'gndx', age: 34, country: 'MX', id: 1 }
*/

Luis Gabriel Sánchez Quintana

student•

Con estas clases siempre me pregunto si se pueden utilizar otras implementaciones, y la respuesta casi siempre es sí. En efecto se puede utilizar el object literals con un rest operator

Luis Alfredo Suarez

student•

ES6: Object Literals

ES6 (ECMAScript 2015), también conocido como ES6 o ES2015, introdujo una serie de mejoras y características nuevas al lenguaje JavaScript. Uno de los aspectos que se mejoraron en ES6 fue la forma en que se trabajan los objetos literales, que son una forma concisa de crear y trabajar con objetos en JavaScript.
Los objetos literales también se conocen como objetos de notación literal o objetos JSON-like.
Aquí hay algunas de las características y mejoras relacionadas con objetos literales en ES6:

Sintaxis de Propiedad Mejorada: Antes de ES6, cuando se creaba un objeto, se usaba la sintaxis { clave: valor } para definir propiedades. En ES6, si el nombre de la clave coincide con el nombre de la variable que contiene el valor, se puede omitir el valor. Por ejemplo:
```
const nombre = 'Alice';
const edad = 30;

const persona = { nombre, edad };
// Equivalente a: const persona = { nombre: nombre, edad: edad };
```
Propiedades de Método Mejoradas: ES6 permite definir funciones dentro de objetos literales usando la sintaxis de funciones abreviadas. Esto hace que la definición de métodos en objetos sea más concisa. Por ejemplo:
```
const obj = {
  metodo() {
    // ...
  }
};
```
Cálculos en Claves de Propiedad: En ES6, se pueden usar expresiones en las claves de propiedad de objetos literales. Esto es útil cuando se necesita calcular el nombre de la clave dinámicamente. Por ejemplo:
```
const prefijo = 'producto';
const id = 42;

const objeto = {
  [`${prefijo}_${id}`]: 'Mi producto'
};
```
Propiedades de Objeto por Defecto: ES6 permite definir propiedades de objeto por defecto que serán utilizadas si no se proporciona un valor al crear el objeto. Por ejemplo:
```
function crearPersona(nombre, edad) {
  return { nombre, edad, trabajo: 'Desarrollador' };
}
```

Estas son algunas de las características clave relacionadas con objetos literales en ES6. Estas mejoras hacen que la creación y manipulación de objetos en JavaScript sea más concisa y legible.
Ten en cuenta que ES6 introdujo muchas más características además de las mencionadas aquí, por lo que te recomiendo explorar más para aprovechar al máximo las capacidades del lenguaje.

Espero les haya sido de utilidad. 👨‍💻

Andrés Grijalba Fernández

student•

Hola, ¿hay alguna forma de implementar esto también en los constructores, para no tener que repetir el código?

Luis Eduardo Payano Villar

student•

function newUser(user, age, country, uId){
    return {
        user: user,
        age: age,
        country: country,
        uId: uId
    };
}
console.log(newUser('Luis',32,'RD',1));
```*function* *newUser*(user, age, country, uId){    *return* {        user: user,        age: age,        country: country,        uId: uId    };}*console*.*log*(*newUser*('Luis',32,'RD',1));

Cristian Acalo

student•

🦄✨

Es importante recalcar la diferencia entre las 'Enhanced Object Literals' y un constructor, ya que a simple vista, ambas son muy similares. Ambas estructuras te permiten crear y retornar un objeto, pero tienen diferencias clave en su implementación y uso. . Un constructor es una función especial diseñada para crear una instancia de un objeto con propiedades y métodos asignados a this. Veamos un ejemplo:

function User(user, age, country, uId) {
    this.user = user;
    this.age = age;
    this.country = country;
    this.id = uId;
}

Para crear una nueva instancia utilizando este constructor, usamos el operador new:

const gndx = new User("gndx", 34, "MX", 1);
console.log(gndx);

Como puedes observar, es muy similar a lo que usamos en la clase, pero a diferencia de que si nosotros mandamos a llamar una función constructor, nosotros vamos a crear un objeto del tipo 'User' (en este caso). Pero si usamos 'Enhanced Object Literals', simplemente obtendremos un objeto literal. . La ventaja del constructor es que te permite tener una especie de "plantilla" para crear múltiples objetos con la misma estructura. Además, puedes incorporar métodos y características compartidas a través del prototipo del constructor.

Por otro lado, las 'Enhanced Object Literals' son una forma concisa de crear objetos literales en ES6, pero carecen de las características de instancia y prototipo que proporcionan los constructores.

Kevin Salazar

student•

Hola, ¿Cuál es la funcionalidad de new?, es que al ver que crean os objetos utilizando una función y return no encuentro el sentido para para new.

Juan Carlos Montilla Sánchez

student•

Hola, Kevin.

Si te preguntas con referencia al nombre de la función, es simplemente eso, un nombre.

Esa función se puede llamar como sea, en este ejemplo.

Pero te dejo una explicación más clara sobre la palabra clave new y para qué se utiliza con las clases

Operator new

silfredo mario

student•

Hola, Kevin.

En el caso puntual del ejemplo newUser, está haciendo referencia a que la función registra nuevos usuarios.

Kyb3r Cipher

student•

Buen resumen

Juan David Santamaria Gomez

student•

excelente

Edgar Geovani Xuc Xol

student•

pero que pasa si le agrego los valores user, age , etc . en la funcion

Alejandro Ramos

student•

Cortico, pero útil :D

Franco Moreira

student•

Los Object Literals son una característica de ES6 (ECMAScript 2015) que permiten crear objetos de una manera más fácil y concisa en JavaScript.

En ES6, los Object Literals se pueden crear utilizando llaves ({}) y pares clave-valor separados por dos puntos ( : ), como en el siguiente ejemplo:

const miObjeto = {
  clave1: valor1,
  clave2: valor2,
  clave3: valor3
};

Nos permiten:

Crear objetos de manera más concisa: En lugar de tener que crear objetos mediante la utilización de la sintaxis más detallada, los Object Literals permiten crear objetos de manera más rápida y sencilla.
Definir propiedades de objetos de manera más clara: En lugar de tener que definir las propiedades de un objeto una a una, los Object Literals permiten definir todas las propiedades de un objeto en un solo lugar.
Crear objetos con propiedades calculadas: Los Object Literals permiten crear objetos con propiedades calculadas, lo que significa que se pueden utilizar expresiones en lugar de valores estáticos para definir las propiedades de un objeto.
Crear objetos con propiedades de métodos: Los Object Literals también permiten crear objetos con propiedades que son funciones (métodos), lo que permite crear objetos más complejos y funcionales.

En resumen, los Object Literals son una herramienta útil para crear objetos de manera más rápida, clara y concisa en JavaScript.

Ricardo Alfonso Chavez Vilcapoma

student•

Mi resumen:

//--------------enahced OBJECT LITERALS----------

function newUser(user, age, country, uID){
    return{
        user: user,
        age,
        country,
        id: uID
    }
}

console.log(newUser("gndx", 34, "MX",1));

//Compilar: seleccionar el código + click derecho + Run Code

//Ejercicio #1
// enhanced object literals

function newUser(user, age, country){
	return{
		user,
		age,
		country,
		id: uId
	}
}

console.log(newUser('gndx', 34, "MX", 1));

/*output:
id: uId
^

ReferenceError: uId is not defined
*/

function newUser2(user, age, country, uId){
	return{
		user,
		age,
		country,
		id: uId
	}
}

console.log(newUser2('gndx', 34, "MX", 1));

/*output:
{ user: 'gndx', age: 34, country: 'MX', id: 1 }
*/

function newUser(user, age, country, uId){
    return {
        user: user,
        age: age,
        country: country,
        uId: uId
    };
}
console.log(newUser('Luis',32,'RD',1));
```*function* *newUser*(user, age, country, uId){    *return* {        user: user,        age: age,        country: country,        uId: uId    };}*console*.*log*(*newUser*('Luis',32,'RD',1));

Asignación y manejo de objetos en ECMAScript 6

Introducción

Historia y evolución de ECMAScript y JavaScript

Actualización y Propuestas en ECMAScript y JavaScript

Configuracion

Configuración de Herramientas para Desarrollo en JavaScript Avanzado

¿Qué se implementó en ES6?

Características de ECMAScript 6 para JavaScript Moderno

Template Literals y Multilínea en ECMAScript 6

Asignación de Parámetros por Defecto en ECMAScript 6

Desestructuración de Arrays y Objetos en JavaScript ECMAScript 6

Uso del Operador de Propagación y Parámetros Rest en JavaScript

Playground: Combina objetos JSON con el Spread Operator

Asignación y manejo de objetos en ECMAScript 6

Promesas en JavaScript: Manejo del Asincronismo con ECMAScript 6

Clases y Herencia en JavaScript: Sintaxis y Aplicaciones

Uso de Módulos en JavaScript ES6

Playground: Obtén una lista de películas

Generators en JavaScript: Cómo implementar y usar iteradores personalizados

Playground: Generador de identificadores para michis

Método ADD en ECMAScript 6: Agregando Elementos a un Set

¿Qué se implementó en ES7?

Actualizaciones de ECMAScript 7: Operadores Exponencial e Includes

¿Qué se implementó en ES8?

Métodos Object.Entries y Object.Values en ECMAScript 8

Manipulación de Strings y Arrays en ECMAScript 8

Async y Await en JavaScript: Controlando el Asincronismo

¿Qué se implementó en ES9?

Novedades de ECMAScript 9: Regex y Spread Operator en JavaScript

Manejo de Finally y Async en ECMAScript 9

¿Qué se implementó en ES10?

Novedades de ECMAScript 10: Métodos flat y trim en JavaScript

Manejo de Errores y Transformaciones de Arrays en JavaScript

¿Qué se implementó en ES11?

Uso de Optional Chaining en JavaScript ES11

Manejo de BigInt y operadores nullish en JavaScript

Promesas en ECMAScript 11: Uso de Promise.allSettled

Uso de Global Disk y Match All en JavaScript

Uso de Dynamic Import en JavaScript para Mejora de Rendimiento Web

¿Qué se implementó en ES12?

Características de ECMAScript 12: Separadores Numéricos y Replace All

Promesas y Métodos Privados en JavaScript: ECMAScript 12

¿Qué se implementó en ES13?

Novedades de ECMA Script 13: Uso de At en Arreglos JavaScript

Uso de Top-Level Await en JavaScript con Fake API

Recapitulación

Novedades y mejoras en ECMAScript y JavaScript