JavaScript is partly an object-oriented language.
To learn JavaScript, we got to learn the object-oriented parts of JavaScript.
In this article, we’ll look at object properties.
Object Properties and Attributes
Object properties have their own attributes.
They include the enumerable and configurable attributes.
And they’re both booleans.
Enumerable means if we can enumerate the properties.
And configurable means the property can’t be deleted or change any attributes if it’s false .
We can use the Object.getOwnPropertyDescriptor method by writing:
let obj = {
name: 'james'
}
console.log(Object.getOwnPropertyDescriptor(obj, 'name'));
And we get:
{value: "james", writable: true, enumerable: true, configurable: true}
from the console log.
Object Methods
ES6 comes with various object methods.
Copy Properties using Object.assign
We can use the Object.assign method to copy properties.
For instance, we can write:
let a = {}
Object.assign(a, {
age: 25
})
Then a is:
{age: 25}
We copy the age property to the a object, so that’s what we get.
Object.assign can take multiple source objects.
For instance, we can write:
let a = {}
Object.assign(a, {
a: 2
}, {
c: 4
}, {
b: 5
})
Then a is:
{a: 2, c: 4, b: 5}
All the properties from each object will be copied.
If there’re any conflicts:
let a = {
a: 1,
b: 2
}
Object.assign(a, {
a: 2
}, {
c: 4
}, {
b: 5
})
console.log(a)
then the later ones will make precedences.
So a is the same.
Compare Values with Object.is
We can compare values with Object.is .
It’s mostly the same as === , except that NaN is equal to itself.
And +0 is not the same as -0 .
For instance, if we have:
console.log(NaN === NaN)
console.log(-0 === +0)
Then we get:
false
true
And if we have:
console.log(Object.is(NaN, NaN))
console.log(Object.is(-0, +0))
We get:
true
false
Destructuring
Destructuring lets us decompose object properties into variables.
For instance, instead of writing:
const config = {
server: 'localhost',
port: '8080'
}
const server = config.server;
const port = config.port;
We can write:
const config = {
server: 'localhost',
port: '8080'
}
const {
server,
port
} = config
It’s much shorter than the first example.
Destructuring also works on arrays.
For instance, we can write:
const arr = ['a', 'b'];
const [a, b] = arr;
Then a is 'a' and b is 'b' .
It’s also handy for swapping variable values.
For instance, we can write:
let a = 1,
b = 2;
[b, a] = [a, b];
Then b is 1 and a is 2.
Built-in Objects
JavaScript comes with various constructors.
They include ones like Object , Array , Boolean , Function , Number , and String .
These can create various kinds of objects.
Utility objects includes Math , Date , and RegExp .
Error objects can be created with the Error constructor.
Object
The Object constructor can be used to create objects.
So these are equivalent:
const o = {};
const o = new Object();
The 2nd one is just longer.
They both inherit from the Object.prototype which has various built-in properties.
For instance, there’s the toString method to convert an object to a string.
And there’s the valueOf method to return a representation of an object.
For simple objects, valueOf just returns the object. So:
console.log(o.valueOf() === o)
And we get true .
Conclusion
Objects have various properties and methods.
They inherit various methods that let us convert to different forms.
