ES6: object literals

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’

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

Resumen!
Object Literals
Una de las mejoras agregadas en ECMA 6 al trabajar con objetos es la representación de la asignación.
Enhanced object literals

El siguiente ejemplo muestra dos formas para expresar una asignación, la segunda, simplificada.

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

// esto es lo mismo que decir

function newUser(user, age, country){ return { user, age, country, } }

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

Un pequeño typo, es enhanced 👀

// enhanced object literals

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”

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

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

📘 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 }
*/

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

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:

1. 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 };
   

2. 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() {
       // ...
     }
   };
   

3. 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'
   };
   

4. 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. 👨‍💻

🦄✨

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.

excelente

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

Cortico, pero útil 😄

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:

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

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

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

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

Mi resumen:

function newUser(name, age, nikcname) {
    return {
        name,
        age,
        nick: nikcname // Puedes combinarlo con variables que su propiedad tiene un nombre diferente
    }
}

console.log(newUser("dario", 38, "thunder"));

Repositorio github del profe → Archivo manejado en la clase:

• 05-object-literals.js

Apunte | Notion

LINK: https://pogolo.notion.site/9-ES6-object-Literals-64701bafcdbb4e46a2783b852432c500

Me da ansiedad que no uses los atajos