Objetos en Javscript

Un objeto agrega múltiples valores y le permite almacenar y recuperar esos valores por nombre.

Un objeto es una colección desordenada de propiedades, cada una de las cuales tiene un nombre y un valor . Los nombres de propiedad suelen ser cadenas, por lo que podemos decir que los objetos asignan cadenas a valores.

Además de mantener su propio conjunto de propiedades, un objeto de JavaScript también hereda las propiedades de otro objeto, conocido como su " prototipo ".

Cualquier valor en JavaScript que no sea una cadena, un número, un símbolo, verdadero, falso, nulo o indefinido es un objeto. Y aunque las cadenas, los números y los valores booleanos no son objetos, pueden comportarse como objetos inmutables.

Los objetos son mutables y manipulados por referencia en lugar de por valor . Si la variable x se refiere a un objeto y el código sea y = x; se ejecuta, la variable y contiene una referencia al mismo objeto, no una copia de ese objeto. Las modificaciones realizadas en el objeto a través de la variable y también son visibles a través de la variable x.

En este artículo, profundizaremos en los objetos con ejemplos para comprender cómo funcionan los objetos bajo el capó en javascript.

Crear objetos -

Hay 3 formas de crear un objeto en javascript. A continuación se analizan las siguientes formas:

1. Objetos literales : un objeto literal es una lista separada por comas de pares de nombre:valor separados por dos puntos, entre llaves.

let empty = {};                //An object with no properties
let point = { x: 0, y: 0 };   //Two numeric properties

let o = new Object();      // Create an empty object: same as {}
let a = new Array();       // Create an empty array: same as []
let r = new Map();         // Create a Map object for key/value mapping

const orgObject = { company: 'ABC' };
const employee = Object.create(orgObject, { name: { value: 'EmployeeOne' } });
console.log(employee);          // { company: "ABC" }
console.log(employee.name);     // "EmployeeOne"

Consulta y configuración de propiedades -

Para obtener el valor de una propiedad, utilice los operadores de punto (.) o corchete ([]) .

let author = book.author;       // Get the "author" property of the book.
let title = book["main title"]; // Get the "main title" property of the book.

book.edition = 7;                   // Create an "edition" property of book.
book["main title"] = "ECMAScript"; // Change the "main title" property.

El operador de eliminación elimina una propiedad de un objeto. Si el valor de la propiedad es un objeto y no hay más referencias al objeto, el objeto en poder de esa propiedad finalmente se libera automáticamente.

delete book.author;         // The book object now has no author property.
delete book["main title"]; // Now it doesn't have "main title", either.

Probando las propiedades del Objeto -

1. El método hasOwnProperty() de un objeto prueba si ese objeto tiene su propia propiedad con el nombre dado. Devuelve falso para propiedades heredadas:

let o = { x: 1 };
o.hasOwnProperty("x")      // => true: o has an own property x
o.hasOwnProperty("y")     // => false: o doesn't have a property y

let obj = { x: 1 };
"x" in obj // => true: obj has an own property "x"
"y" in obj // => false: obj doesn't have a property "y"

Una operación común en los programas de JavaScript es la necesidad de copiar las propiedades de un objeto a otro objeto. En ES6, esta capacidad llega al lenguaje principal de JavaScript en forma de Object.assign() . Object.assign() espera dos o más objetos como argumentos . Modifica y devuelve el primer argumento, que es el objeto de destino, pero no altera el segundo ni ningún argumento posterior, que son los objetos de origen.

const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };
const returnedTarget = Object.assign(target, source);
console.log(target); //output: Object { a: 1, b: 4, c: 5 }

La serialización de objetos es el proceso de convertir el estado de un objeto en una cadena a partir de la cual se puede restaurar más tarde. Las funciones JSON.stringify() y JSON.parse() serializan y restauran objetos de JavaScript.

let o = {x: 1, y: {z: [false, null, ""]}}; // Define a test object
let s = JSON.stringify(o); // s == '{"x":1,"y":{"z": [false,null,""]}}'
let p = JSON.parse(s); // p == {x: 1, y: {z: [false, null, ""]}}

Las versiones recientes de JavaScript han ampliado la sintaxis de los objetos literales de varias maneras útiles. La siguiente sección explica estas extensiones.

1. Propiedades abreviadas : antes de ES6, un objeto literal es una colección de pares de nombre y valor. Con la sintaxis literal básica del objeto, terminaría repitiendo cada identificador dos veces:

function createMachine(name, status) {
  return {
  name: name,
  status: status
  };
}

function createMachine(name, status) {
  return {
  name,
  status
  };
}

Los corchetes le permiten usar los literales de cadena y las variables como nombres de propiedad.

let name = 'machine name';
let machine = {
  [name]: 'server',
  'machine hours': 10000
};
console.log(machine[name]); // server
console.log(machine['machine hours']); // 10000

En ES6, el nombre de la propiedad calculada forma parte de la sintaxis literal del objeto y utiliza la notación de corchetes.

let prefix = 'machine';
let machine = {
  [prefix + ' name']: 'server',
  [prefix + ' hours']: 10000
};
console.log(machine['machine name']); // server
console.log(machine['machine hours']); // 10000

3. Sintaxis del método conciso

Antes de ES6, al definir un método para un objeto literal, debe especificar el nombre y la definición completa de la función como se muestra en el siguiente ejemplo:

let server = {
  name: "Server",
  restart: function () {
    console.log("The" + this.name + " is restarting…");
  }
};

let server = {
  name: 'Server',
  restart() {
    console.log("The" + this.name + " is restarting…");
  }
};

const odd = [1,3,5];
const combined = [2,4,6, …odd];
console.log(combined); //[ 2, 4, 6, 1, 3, 5 ]

Estas próximas publicaciones serán parte de una serie que discutirá temas básicos y avanzados sobre JavaScript.

• Declaraciones en Javascript
• Próximamente más blogs

Si disfrutó de esta historia, haga clic en el botón y compártala para que otros también puedan encontrarla. Además, siéntase libre de dejar un comentario a continuación.

Groww Engineering publica anécdotas técnicas, las últimas tecnologías y mejores formas de abordar problemas comunes de programación. Puede suscribirse aquí para obtener las últimas actualizaciones.

Estamos contratando. Ver ofertas de trabajo aquí .