ES6 - Objetos

JavaScript admite la ampliación de tipos de datos. Los objetos JavaScript son una excelente forma de definir tipos de datos personalizados.

Un objectes una instancia que contiene un conjunto de pares clave-valor. A diferencia de los tipos de datos primitivos, los objetos pueden representar valores múltiples o complejos y pueden cambiar a lo largo de su vida. Los valores pueden ser valores o funciones escalares o incluso una matriz de otros objetos.

Las variaciones sintácticas para definir un objeto se discuten más.

Inicializadores de objetos

Como los tipos primitivos, los objetos tienen una sintaxis literal: curly bracesv({y}). A continuación se muestra la sintaxis para definir un objeto.

var identifier = {
   Key1:value, Key2: function () { 
      //functions 
   }, 
   Key3: [“content1”,” content2”] 
}

El contenido de un objeto se llama properties (o miembros), y las propiedades constan de un name (o clave) y value. Los nombres de propiedad deben ser cadenas o símbolos y los valores pueden ser de cualquier tipo (incluidos otros objetos).

Como todas las variables de JavaScript, tanto el nombre del objeto (que podría ser una variable normal) como el nombre de la propiedad distinguen entre mayúsculas y minúsculas. Se accede a las propiedades de un objeto con una simple notación de puntos.

A continuación se muestra la sintaxis para acceder a las propiedades del objeto.

objectName.propertyName

Ejemplo: inicializadores de objetos

var person = { 
   firstname:"Tom", 
   lastname:"Hanks", 
   func:function(){return "Hello!!"},    
}; 
//access the object values 
console.log(person.firstname)   
console.log(person.lastname) 
console.log(person.func())

El ejemplo anterior define una persona objeto. El objeto tiene tres propiedades. La tercera propiedad se refiere a una función.

La siguiente salida se muestra en la ejecución exitosa del código anterior.

Tom 
Hanks 
Hello!!

En ES6, al asignar un valor de propiedad que coincida con un nombre de propiedad, puede omitir el valor de propiedad.

Ejemplo

var foo = 'bar' 
var baz = { foo } 
console.log(baz.foo)

El fragmento de código anterior define un objeto baz. El objeto tiene una propiedadfoo. El valor de la propiedad se omite aquí ya que ES6 asigna implícitamente el valor de la variable foo a la clave foo del objeto.

A continuación se muestra el equivalente en ES5 del código anterior.

var foo = 'bar' 
var baz = { foo:foo } 
console.log(baz.foo)

La siguiente salida se muestra en la ejecución exitosa del código anterior.

bar

Con esta sintaxis abreviada, el motor JS busca en el ámbito contenedor una variable con el mismo nombre. Si se encuentra, el valor de esa variable se asigna a la propiedad. Si no se encuentra, se genera un error de referencia.

El constructor Object ()

JavaScript proporciona una función de constructor especial llamada Object()para construir el objeto. El nuevo operador se utiliza para crear una instancia de un objeto. Para crear un objeto, el nuevo operador es seguido por el método constructor.

A continuación se muestra la sintaxis para definir un objeto.

var obj_name = new Object(); 
obj_name.property = value;    
OR             
obj_name["key"] = value

A continuación se muestra la sintaxis para acceder a una propiedad.

Object_name.property_key                    
OR              
Object_name["property_key"]

Ejemplo

var myCar = new Object(); 
myCar.make = "Ford"; //define an object 
myCar.model = "Mustang"; 
myCar.year = 1987;  

console.log(myCar["make"]) //access the object property 
console.log(myCar["model"]) 
console.log(myCar["year"])

La siguiente salida se muestra en la ejecución exitosa del código anterior.

Ford 
Mustang 
1987

Las propiedades no asignadas de un objeto no están definidas.

Ejemplo

var myCar = new Object(); 
myCar.make = "Ford"; 
console.log(myCar["model"])

La siguiente salida se muestra en la ejecución exitosa del código anterior.

undefined

Note- El nombre de una propiedad de objeto puede ser cualquier cadena JavaScript válida o cualquier cosa que se pueda convertir en una cadena, incluida la cadena vacía. Sin embargo, solo se puede acceder a cualquier nombre de propiedad que no sea un identificador de JavaScript válido (por ejemplo, un nombre de propiedad que tenga un espacio o un guión, o que comience con un número) utilizando la notación de corchetes.

También se puede acceder a las propiedades mediante un valor de cadena que se almacena en una variable. En otras palabras, la clave de propiedad del objeto puede ser un valor dinámico. Por ejemplo: una variable. Dicho concepto se ilustra en el siguiente ejemplo.

Ejemplo

var myCar = new Object()  
var propertyName = "make"; 
myCar[propertyName] = "Ford"; 
console.log(myCar.make)

La siguiente salida se muestra en la ejecución exitosa del código anterior.

Ford

Función constructora

Se puede crear un objeto siguiendo los dos pasos siguientes:

Step 1 - Defina el tipo de objeto escribiendo una función constructora.

A continuación se muestra la sintaxis de la misma.

function function_name() { 
   this.property_name = value 
}

los ‘this’ palabra clave se refiere al objeto actual en uso y define la propiedad del objeto.

Step 2 - Cree una instancia del objeto con la nueva sintaxis.

var Object_name= new function_name() 
//Access the property value  

Object_name.property_name

La nueva palabra clave invoca el constructor de la función e inicializa las claves de propiedad de la función.

Example − Using a Function Constructor

function Car() { 
   this.make = "Ford" 
   this.model = "F123" 
}  
var obj = new Car() 
console.log(obj.make) 
console.log(obj.model)

El ejemplo anterior usa un constructor de funciones para definir un objeto.

La siguiente salida se muestra en la ejecución exitosa del código anterior.

Ford 
F123

Siempre se puede agregar una nueva propiedad a un objeto previamente definido. Por ejemplo, considere el siguiente fragmento de código:

function Car() { 
   this.make = "Ford" 
} 
var obj = new Car() 
obj.model = "F123" 
console.log(obj.make) 
console.log(obj.model)

La siguiente salida se muestra en la ejecución exitosa del código anterior.

Ford 
F123

El método Object.create

Los objetos también se pueden crear utilizando el Object.create()método. Te permite crear el prototipo del objeto que deseas, sin tener que definir una función constructora.

Ejemplo

var roles = { 
   type: "Admin", // Default value of properties 
   displayType : function() {  
      // Method which will display type of role 
      console.log(this.type); 
   } 
}  
// Create new role type called super_role 
var super_role = Object.create(roles); 
super_role.displayType(); // Output:Admin  

// Create new role type called Guest 
var guest_role = Object.create(roles); 
guest_role.type = "Guest"; 
guest_role.displayType(); // Output:Guest

El ejemplo anterior define un objeto -roles y establece los valores predeterminados para las propiedades. Se crean dos nuevas instancias que anulan el valor de las propiedades predeterminadas para el objeto.

La siguiente salida se muestra en la ejecución exitosa del código anterior.

Admin 
Guest

La función Object.assign ()

los Object.assign()El método se utiliza para copiar los valores de todas las propiedades propias enumerables de uno o más objetos de origen a un objeto de destino. Devolverá el objeto de destino.

A continuación se muestra la sintaxis de la misma.

Object.assign(target, ...sources)

Example − Cloning an Object

"use strict" 
var det = { name:"Tom", ID:"E1001" }; 
var copy = Object.assign({}, det); 
console.log(copy);  
for (let val in copy) { 
   console.log(copy[val]) 
}

La siguiente salida se muestra en la ejecución exitosa del código anterior.

Tom 
E1001

Example − Merging Objects

var o1 = { a: 10 }; 
var o2 = { b: 20 }; 
var o3 = { c: 30 }; 
var obj = Object.assign(o1, o2, o3); 
console.log(obj);  
console.log(o1);

La siguiente salida se muestra en la ejecución exitosa del código anterior.

{ a: 10, b: 20, c: 30 } 
{ a: 10, b: 20, c: 30 }

Note- A diferencia de la copia de objetos, cuando los objetos se combinan, el objeto más grande no mantiene una nueva copia de las propiedades. Más bien contiene la referencia a las propiedades contenidas en los objetos originales. El siguiente ejemplo explica este concepto.

var o1 = { a: 10 }; 
var obj = Object.assign(o1); 
obj.a++ 
console.log("Value of 'a' in the Merged object after increment  ") 
console.log(obj.a);  
console.log("value of 'a' in the Original Object after increment ") 
console.log(o1.a);

La siguiente salida se muestra en la ejecución exitosa del código anterior.

Value of 'a' in the Merged object after increment 
11  
value of 'a' in the Original Object after increment 
11

Eliminar propiedades

Puede eliminar una propiedad mediante el operador de eliminación. El siguiente código muestra cómo eliminar una propiedad.

Ejemplo

// Creates a new object, myobj, with two properties, a and b. 
var myobj = new Object; 
myobj.a = 5; 
myobj.b = 12; 

// Removes the ‘a’ property 
delete myobj.a; 
console.log ("a" in myobj) // yields "false"

La siguiente salida se muestra en la ejecución exitosa del código anterior.

false

El fragmento de código elimina la propiedad del objeto. El ejemplo imprime falso ya que el operador in no encuentra la propiedad en el objeto.

Comparar objetos

En JavaScript, los objetos son un tipo de referencia. Dos objetos distintos nunca son iguales, incluso si tienen las mismas propiedades. Esto se debe a que apuntan a una dirección de memoria completamente diferente. Solo aquellos objetos que comparten una referencia común dan como resultado la comparación.

Example 1 − Different Object References

var val1 = {name: "Tom"}; 
var val2 = {name: "Tom"}; 
console.log(val1 == val2)  // return false 
console.log(val1 === val2)  // return false

En el ejemplo anterior, val1 y val2son dos objetos distintos que se refieren a dos direcciones de memoria diferentes. Por lo tanto, al comparar la igualdad, el operador devolverá falso.

Example 2 − Single Object Reference

var val1 = {name: "Tom"}; 
var val2 = val1  

console.log(val1 == val2) // return true 
console.log(val1 === val2) // return true

En el ejemplo anterior, los contenidos en val1 se asignan a val2, es decir, la referencia de las propiedades en val1 se comparte con val2. Dado que los objetos ahora comparten la referencia a la propiedad, el operador de igualdad devolverá verdadero para dos objetos distintos que se refieren a dos direcciones de memoria diferentes. Por lo tanto, al comparar la igualdad, el operador devolverá falso.

Desestructuración de objetos

El termino destructuringse refiere a romper la estructura de una entidad. La sintaxis de asignación de desestructuración en JavaScript hace posible extraer datos de matrices u objetos en distintas variables. Lo mismo se ilustra en el siguiente ejemplo.

Ejemplo 1

Al desestructurar un objeto, los nombres de las variables y los nombres de las propiedades del objeto deben coincidir.

<script>
let student = {
   rollno:20,
   name:'Prijin',
   cgpa:7.2
}

//destructuring to same property name
   let {name,cgpa} = student
   console.log(name)
   console.log(cgpa)

//destructuring to different name
   let {name:student_name,cgpa:student_cgpa}=student
   console.log(student_cgpa)
   console.log("student_name",student_name)
</script>

La salida del código anterior será como se ve a continuación:

Prijin
7.2
7.2
student_name Prijin

Ejemplo 2

Si la variable y la asignación están en dos pasos diferentes, la sintaxis del objeto de desestructuración estará rodeada por () como se muestra en el ejemplo ({rollno} = student) -

<script>
   let student = {
      rollno:20,
      name:'Prijin',
      cgpa:7.2
   }

   // destructuring to already declared variable
   let rollno;
   ({rollno} = student)
   console.log(rollno)

   // assign default values to variables

   let product ={ id:1001,price:2000} //discount is not product property
   let {id,price,discount=.10} = product
   console.log(id)
   console.log(price)
   console.log(discount)
</script>

La salida del código anterior será la que se menciona a continuación:

20
1001
2000
0.1

Ejemplo 3

El siguiente ejemplo muestra destructuring utilizando el rest operator y cómo destruir objetos anidados.

<script>
   // rest operator with object destructuring
   let customers= {
      c1:101,
      c2:102,
      c3:103
   }

   let {c1,...others} = customers
   console.log(c1)
   console.log(others)

   //nested objects
   let emp = {
      id:101,
      address:{
         city:'Mumbai',
         pin:1234
      }
   }
   let {address} = emp;

   console.log(address)
   let {address:{city,pin}} = emp
   console.log(city)
</script>

La salida del código anterior será la que se menciona a continuación:

101
{c2: 102, c3: 103}
{city: "Mumbai", pin: 1234}
Mumbai