Objects are used to store keyed collections of various data and more complex entities.
const app = {
name: "todo",
version: 1.2,
};
alert(app.name); // todo
alert(app.version); // 1.2
app.version = 1.3; // update value
app.license = "MIT"; // add new property
delete app.version; // delete property- Multiword property name
const game = {
name: "sudoku",
"is free": true,
};
alert(game["is free"]); // true
const isFree = "is free";
alert(game[isFree]); // true- Computed property
let prop = "yEaR";
prop = prop.toLowerCase();
const list = {
[prop]: 2022,
};
alert(list.year); // 2022- Property value shorthand
function createUser(login, id) {
return {
login, // the same login: login
id, // the same id: id
};
}- Copying objects
When copied, the new object will be a reference to the original object, unlike regular variables, which create independent entities when copied
const original = {
name: "origin",
id: 1,
};
const copy = original;
alert(copy.name); // origin
alert(copy.id); // 1
copy.name = "new copy"; // it also changes original
alert(original.name); // new copy- Object comparison
The comparison operators==and===work the same for objects
// Two variables refer to the same object
const original = {};
const copy = original;
alert(original == copy); // true// Two independent objects
const original = {};
const otherOriginal = {};
alert(original == otherOriginal); // false- Cloning objects
Object.assign(target, ...sources)- copies all enumerable own properties from one or more source objects to a target object.
const item = {
name: "monitor",
color: "black",
};
const newItem = Object.assign({}, item);
newItem.color = "gray";
alert(newItem.color); // gray
alert(item.color); // black- Loop for...in
const item = {
name: "Pizza",
price: 29,
};
for (key in item) {
alert(`${key} - ${item[key]}`);
// name - Pizza
// price - 29
}- Object.keys(object)
Returns an array of keys of the passed object
console.log(Object.keys(item));
// [name, price]- Object.values(object)
Returns an array of values of the passed object
console.log(Object.values(item));
// ["Pizza", 29]- Object.entries(object)
Returns an array of the [key, value] pairs of the passed object
console.log(Object.entries(item));
// [["name", "Pizza"], ["price", 29]]- Object methods
In addition to values, objects can have methods that perform various actions
const greetings = {
hiMorning() {
alert("Good morning!");
},
hiDay() {
alert("Good afternoon!");
},
hiEvening() {
alert("Good evening!");
},
};
greetings.hiDay(); // Good afternoon!- this
thisallows to refer to variables and methods that are stored in the same object
const counter = {
value: 0,
inc() {
this.value++;
},
dec() {
this.value--;
},
};
counter.inc(); // counter.value = 1
counter.inc(); // counter.value = 2
counter.dec(); // counter.value = 1this is simply a reference to the object in the context of which it was called
const obj = {
value: "hello",
log() {
console.log(this);
},
};
obj.log(); // { value: 'hello', log: [Function] }- Constructor functions
Constructor functions are used to easily create objects. They are normal functions, but developers have agreed that such functions are capitalised and called withnewoperator.
function Animal(type, color) {
this.type = type;
this.color = color;
}
const kitten = new Animal("cat", "black");
alert(kitten.type); // cat
alert(kitten.color); // black- Methods in constructors
function Parrot(name) {
this.name = name;
this.greet = function () {
alert(`Hello, my name is ${this.name}`);
};
}
const blueParrot = new Parrot("Mojo");
blueParrot.greet(); // Hello, my name is Mojo- Checking property existence
const response = {
data: "secret info",
status: 200,
};
console.log("data" in response); // true
console.log("message" in response); // false- Optional chaining
Is a safe way to access nested object properties, even if an intermediate property doesn’t exist
const response = {
data: "some data",
};
console.log(response?.data); // some data
console.log(response?.message); // undefinedObject properties can store a special configuration flags in addition to the value.\
writable – if true, the value can be changed, otherwise it’s read-only.
enumerable – if true, then listed in loops, otherwise not listed.
configurable – if true, the property can be deleted and these attributes can be modified, otherwise not.
All flags default to true
- Object.getOwnPropertyDescriptor(obj, property)
Allows to query the full information about a property
const person = {
name: "Bill",
surname: "Gates",
};
let descriptor = Object.getOwnPropertyDescriptor(person, "name");
console.log(descriptor);
// {
// configurable: true
// enumerable: true
// value: Bill
// writable: true
// }- Object.defineProperty(obj, property, descriptor)
Change the flags of the specified property
Object.defineProperty(person, "name", {
writable: false,
});- Object.defineProperties(obj, {prop: descr, ...})
Allows to define many properties at once - Object.getOwnPropertyDescriptors(obj)
Get all property descriptors at once
Getters and setters called as accessor properties. They are essentially functions that execute on getting and setting a value, but look like regular properties to an external code.
- Usage
Thegetkeyword is used to create the getter, for the setter -set
const person = {
name: "Bill",
surname: "Gates",
get fullName() {
return `${this.name} ${this.surname}`
}
set fullName(value) {
[this.name, this.surname] = value.split(" ")
}
}
alert(person.fullName) // Bill Gates
person.fullName = "Jack Ma"
console.log(person)
// {fullName: "Jack Ma", name: "Jack", surname: "Ma"}- Accessor descriptors
For accessor properties, there is novalueorwritable, but instead there aregetandsetfunctions
Object.defineProperty(person, "sayHello", {
get() {
return `Hello, I'm ${this.name}`;
},
enumerable: false,
configurable: true,
});