DEV Community

loading...

Object-Oriented JavaScript — Object Properties

aumayeung profile image John Au-Yeung Originally published at thewebdev.info ・3 min read

Check out my books on Amazon at https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62

Subscribe to my email list now at http://jauyeung.net/subscribe/

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'));
Enter fullscreen mode Exit fullscreen mode

And we get:

{value: "james", writable: true, enumerable: true, configurable: true}
Enter fullscreen mode Exit fullscreen mode

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
})
Enter fullscreen mode Exit fullscreen mode

Then a is:

{age: 25}
Enter fullscreen mode Exit fullscreen mode

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
})
Enter fullscreen mode Exit fullscreen mode

Then a is:

{a: 2, c: 4, b: 5}
Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode

Then we get:

false
true
Enter fullscreen mode Exit fullscreen mode

And if we have:

console.log(Object.is(NaN, NaN))
console.log(Object.is(-0, +0))
Enter fullscreen mode Exit fullscreen mode

We get:

true
false
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

We can write:

const config = {
  server: 'localhost',
  port: '8080'
}
const {
  server,
  port
} = config
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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];
Enter fullscreen mode Exit fullscreen mode

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();
Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode

And we get true .

Conclusion

Objects have various properties and methods.

They inherit various methods that let us convert to different forms.

Discussion (0)

pic
Editor guide