No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

ES6: object literals

10/35
Recursos

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

Aportes 21

Preguntas 2

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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: 鈥楰ira 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

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

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 鈥渋d鈥 se crea a partir de la variable 鈥渋dentificador鈥

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 鈥楨nhanced 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 鈥楿ser鈥 (en este caso). Pero si usamos 鈥楨nhanced Object Literals鈥, simplemente obtendremos un objeto literal.
.
La ventaja del constructor es que te permite tener una especie de 鈥減lantilla鈥 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 鈥楨nhanced 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.

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:

Me da ansiedad que no uses los atajos