I'm just a painter who studied computer science.
Objetos
Objetos
Un objecto en JavaScript es un tipo de dato que se compone de una coleccion de nombres o llave y valores representados en pares de nombre: valor "name:value". Los pares de nombre:valor "name:value", pueden consistir de propiedades "properties" el cual contiene cualquier valor numerico, cadena de caracteres, nulo, undefined o booleano, al igual que metodos "methods" el cual es una funcion dentro del objeto.
Un objeto de JavaScript puede ser completamente enlazada a una entidad independiente como un objeto de la vida real. Por ejemplo un libro, el cual como objeto podemos describirlo por titulo, autor, numeros de paginas y/o genero. Similar a un vehiculo el cual puede describirse por color, desarrollador, modelo y/o poder de fuerza.
Creacion de objeto
Objeto en JavaScript es un tipo de dato, asi como numeros o cadena de caracteres. Como tipo de dato los objetos puede ser contenida en una variable. Existe dos formas de construir un objeto de JavaScript.
- Objeto literal, usando pareas de llaves
{...}
const objectLiteral = {};
console.log(typeof objectLiteral); //-> Object
let Person = {
name: "John"
};
console.log(Person.name); //-> John
- Constructor de objeto, el cual es utilizando la palabra reservada
new
const objectConstructor = new Object();
console.log(typeof objectConstructor); //-> Object
let Person = new Object();
Person.name = "John";
console.log(Person.name); //-> John
- Utilizando el metodo de Objeto()
Object.create()
const objectCreate = Object.create(null);
console.log(typeof objectCreate); //-> Object
let Person = Object.create(null);
Person.name = "John";
console.log(typeof Person); //-> Object
console.log(Person.name); //-> John
- Utilizando una funcion en combinacion de la palabra reservada
new
function myObject() {};
const objectFunction = new myObject();
console.log(typeof myObject); //-> Function
console.log(typeof objectFunction); //-> Object
function Person(name) {
this.name = name;
};
let john = new Person("John");
console.log(typeof Person); //-> Function
console.log(typeof john); //-> Object
console.log(john.name); //-> John
Propiedades y metodos
Las propiedades estan asociadas entre un nombre (llave "key") y el valor dentro del objeto, esto valores pueden ser representado por cualquier tipo de datos. Las propiedades comunmente hacen referencias a caracteristicas de algun objeto. Metodos son funciones el cual pueden transformar los valores de las propiedades del objeto.
Acceso a propiedades del objeto
Existen dos maneras de accesar las propiedades de un objeto.
- Notacion de punto
const Person = {
firstName: 'Steve ',
lastName: 'McNiller',
sayName: function() {
console.log(this.firstName + this.lastName);
}
}
console.log(Person.firstName); //-> Steve
- Notacion de corchetes
const Person = {
firstName: 'Steve ',
lastName: 'McNiller',
sayName: function() {
console.log(this.firstName + this.lastName);
}
}
console.log(Person['firstName']); //-> Steve
De las mismas manera podemos llamar metodos dentro del objetos.
const Person = {
firstName: 'Steve ',
lastName: 'McNiller',
sayName: function() {
console.log(this.firstName + this.lastName);
}
}
Person.sayName(); //-> Steve McNiller
Person['sayName'](); //-> Steve McNiller
Añadir o modificar propiedades de objeto
Para añadir propiedades a objeto o modificarlo, utilizamos el operador de asignacion y cualquiera de los tipo de notacion.
const Person = {
firstName: 'Steve ',
lastName: 'McNiller',
sayName: function() {
console.log(this.firstName + this.lastName);
}
}
Person.age = 28;
console.log(Person); //-> {firstName: "Steve ", lastName: "McNiller", sayName: ƒ, age: 28}
Person['sex'] = 'Male';
console.log(Person); //-> {firstName: "Steve ", lastName: "McNiller", sayName: ƒ, age: 28, sex: "Male"}
De la misma manera podemos añadir metodos.
const Person = {
firstName: 'Steve ',
lastName: 'McNiller',
sayName: function() {
console.log(this.firstName + this.lastName);
}
}
Person.age = 28;
Person['sex'] = 'Male';
Person.sayAge = function() {
console.log('My age is ' + this.age)
};
Person.sayAge(); //-> My age is 28
Remover propiedades del objeto
Para remover una propiedad dentro del objeto podemos utilizar la palabra reservada delete junto a la propiedad que deseamos remover. Al remover la propiedad tendremos de vuelta el valor cierto indicando que la propiedad a sido exitosamente removida de la propiedad.
const Person = {
firstName: 'Steve ',
lastName: 'McNiller',
sayName: function() {
console.log(this.firstName + this.lastName);
}
}
Person.age = 28;
const confirmObjDel = delete Person.age;
console.log(confirmObjDel); //-> true
console.log(Person); //-> {firstName: "Steve ", lastName: "McNiller", sayName: ƒ}
Iteraciones atravez de propiedades de objeto
- Por medio de
for...in
const Person = {
firstName: 'Steve ',
lastName: 'McNiller',
age: 28,
sayName: function() {
console.log(this.firstName + this.lastName);
}
}
for(let key in Person) {
console.log(Person[key]);
}
//-> Steve
//-> McNiller
//-> 28
//-> f()
- Utilizando metodo de Object()
Object.keys()este metodo devuelve un Array de los valores del objeto el cual aplicamos el metodo.
const Person = {
firstName: 'Steve ',
lastName: 'McNiller',
age: 28,
sayName: function() {
console.log(this.firstName + this.lastName);
}
}
const PersonArray = Object.keys(Person);
console.log(PersonArray); //-> ["firstName", "lastName", "age", "sayName"]
Descriptor de propiedad del objeto
Descriptores de objetos en JavaScript, son elemento dentro de los objetos en JavaScript el cual nos provee mas informacion sobre las propiedades dentro de nuestros objetos en JavaScript, estas propiedades determinan el estado del objeto en JavaScript.
Los objetos en JavaScript contiene los descriptores de dato, esto son [[value]], [[writable]], [[configurable]], [[enumerable]] y descriptores de accessor el cual son [[get]], [[set]], [[configurable]] y [[enumerable]].
let obj = {
name: 'Pete'
};
Por defecto cuando nosotros creamos un objeto como el ejemplo anterior, este objeto obtiene los valores por defecto. Basado al ejemplo anterior, [[value]] es el valor de name 'Pete', el cual es lo que muestra como salida, si escribimos los siguiente console.log(obj.name). [[writable]] esta definido como cierto "true", esto significa que esta permitido cambiar el valor del objeto. [[configurable]] esta definido como cierto "true", este nos permite cambiar o utilizar las propiedades mencionadas. [[enumerable]] significa que si le aplicamos un bucle for...in al objeto de JavaScript, podemos recorrer por las propiedades definidas dentro del objeto JavaScript.
Los descriptores accessor o metodos de mutacion son metodos que nos permite buscar datos privado dentro de objetos, a estos metodos se les llama comunmente [[getter]] y [[setter]].
En JavaScript los objetos contienen unos metodos el cual nos permiten definir y configurar objetos utilizando descriptores.
Object.defineProperty
Metodos es uno de los principales para manejar y configurar objetos.
// Example of used
Object.defineProperty(obj, propName, {})
let user = {};
Object.defineProperty(user, "firstName", {
value: "Peter",
configurable: true,
writable: true,
enumerable: true
});
console.log(user.firstName); //-> Peter
Por defecto cuando definimos una propiedad dentro del objeto utilizando Object.defineProperty, si no le asignamos un valor utilizando [[value]], este se creara con el valor undefined
let user = {};
Object.defineProperty(user, "firstName", {
configurable: true,
writable: true,
enumerable: true
});
console.log(user.firstName); //-> undefined
Object.defineProperties
Metodos nos permite definir varias propiedades a la misma vez.
Object.defineProperties(obj, props)
let user = {};
Object.defineProperties(user, {
firstName: {
value: "Peter",
writable: true
},
getName: {
value: function() {
console.log(this.firstName);
}
},
});
user.getName(); //-> Peter
Observemos mas ejemplo del uso de estos metodos, digamos que queremos definir propiedades que nunca cambien, que sea constante.
let user = {};
Object.defineProperty(user, "firstName", {
value: "Peter",
writable: false,
configurable: false
});
user.firstName = "Mike";
console.log(user.firstName); // Peter
Digamos que ahora en el proximo ejemplo queremos ocultar propiedades dentro del objeto en JavaScript.
let user = {
firstName: "Peter",
lastName: "Jackson"
};
Object.defineProperty(user, "socialSecNum", {
value: "555-89-7844",
enumerable: false
});
for(let prop in user) {
console.log(prop);
}
//-> firstName
//-> lastName
Object.getOwnPropertyNames and Object.keys
Metodos son familiar al metodo keys dictionary del lenguaje de programacion Python, estos nos devuelve un array de las propiedades que se encuentran dentro del objeto de JavaScript, la diferencia entre Object.getOwnPropertyNames y Object.keys es que Object.getOwnPropertyNames nos devuleve todas las propiedades incluyendo las configurada como falso en enumerable.
const log = console.log;
let user = {
firstName: "Peter",
lastName: "Jackson"
};
Object.defineProperty(user, "socialSecNum", {
value: "555-89-7844",
enumerable: false
});
log(Object.getOwnPropertyNames(user)); //-> ["firstName", "lastName", "socialSecNum"]
log(Object.keys(user)); //-> ["firstName", "lastName"]
Object.values
Metodo es similar a Object.keys, este nos devuelve el valor de cada propiedad y al igual que Object.keys, este no retornara propiedades definidas falsa en [[enumerable]].
const log = console.log;
let user = {
firstName: "Peter",
lastName: "Jackson"
};
Object.defineProperty(user, "socialSecNum", {
value: "555-89-7844",
enumerable: false
});
log(Object.values(user)); //-> ["firstName", "lastName"]
Object.getOwnPropertyDescriptor
Metodo nos devuelve los descriptores de una propiedad especifica que se encuentra dentro del objeto de JavaScript.
const log = console.log;
let user = {
firstName: "Peter",
lastName: "Jackson"
};
log(Object.getOwnPropertyDescriptor(user, "firstName"));
//-> {value: "Peter", writable: true, enumerable: true, configurable: true}
Object.getOwnPropertyDescriptors
Metodo es similar a Object.getOwnPropertyDescriptor, la diferencia es que este nos devuelve todas las propiedades que se encuentre dentro del objeto JavaScript con sus descriptores.
const log = console.log;
let user = {
firstName: "Peter",
lastName: "Jackson"
};
log(Object.getOwnPropertyDescriptors(user)); //-> {firstName: {…}, lastName: {…}}
Getter and Setter
Estos son descriptores de accessor o metodos de mutacion de objeto. Al contrario de los descriptores de dato, estos substituyen a los descriptores [[value]] y [[writable]]. [[get]] es la funcion por defecto que se ejecutara cuando llamamos a alguna propiedad el cual le asignamos este metodo [[get]], por defecto sera undefined el valor que devuelve, cuando asignamos un valor a alguna propiedad, el metodo [[set]] es llamado y aplicado a esa propiedad que se la asignamos.
let obj = {
get propName() {
// Getter, the code executed on getting obj.propName
},
set propName(value) {
// Setter, the code executed on setting obj.propName = value
}
}
const log = console.log;
let user = {
firstName: "Peter",
lastName: "Jackson"
};
Object.defineProperty(user, "fullName", {
get: function() {
return this.firstName + " " + this.lastName;
},
set: function(value) {
let parts = value.split(' ');
if(parts.length == 2) {
this.firstName = parts[0];
this.lastName = parts[1];
}
else {
throw 'Invalid name format'
}
}
});
log(user.fullName); //-> Peter Jackson
user.fullName = "Steve Finn";
log(user.firstName); //-> Steve
log(user.lastName); //-> Finn
log(user.fullName); //-> Steve Finn
Control el estado del objeto
Existen momento el cual queremos prevenir que nuestros objetos esten en el estado de lectura o escritura, los objetos de JavaScript nos provee tres metodos para evitar estos cambios o usos. Estos metodos son: Object.preventExtensions, Object.seal, Object.freeze
Object.preventExtensions
Metodo previene que el objeto de JavaScript sea extendible.
const log = console.log;
let user = {
firstName: "Peter",
lastName: "Jackson"
};
Object.preventExtensions(user);
Object.defineProperty(user, "age", {
value: 22
});
user.age = "one";
log(user.age); //-> Cannot define property age, object is not extensible
Object.isExtensible
Metodo nos devuelve un valor booleano que nos notifica si el objeto JavaScript puede ser extensible.
const log = console.log;
let user = {
firstName: "Peter",
lastName: "Jackson"
};
log(Object.isExtensible(user)); //-> true
Object.preventExtensions(user);
log(Object.isExtensible(user)); //-> false
Object.seal
Metodo previene que podamos añadir o eliminar propiedades a objetos de JavaScript pero si nos permite editar propiedades del objeto de JavaScript, el objeto estara sellado.
const log = console.log;
let user = {
firstName: "Peter",
lastName: "Jackson"
};
Object.seal(user);
delete user.firstName;
log(user.firstName); //-> Peter
user.fullName = "Peter Jackson";
log(user.fullName); //-> undefined
user.firstName = "Tom";
log(user.firstName); //-> Tom
Object.isSealed
Metodo nos devuleve un valor booleano que nos notifica se el objeto esta sellado.
const log = console.log;
let user = {
firstName: "Peter",
lastName: "Jackson"
};
Object.seal(user);
log(Object.isSealed(user)); //-> true
Object.freeze and Object.isFrozen
Metodo es similar a Object.seal, la diferencia es que este objeto ademas que evita añadir y eliminar propiedades, no dejara editar propiedades. Este objeto estara completamente como una variable constante. Object.isFrozen nos devuelve un valor booleano para notificar si nuestro objeto esta congelado.
const log = console.log;
let user = {
firstName: "Peter",
lastName: "Jackson"
};
Object.freeze(user);
user.fullName = "Peter Jackson";
log(Object.isFrozen(user)); //-> true
log(user.fullName);
user.firstName = "Tom";
log(user.firstName); //-> Peter