Object-Oriented JavaScript — Object Properties
Tags: webdev, programming, beginners, javascript
Published: 2021-01-24 21:54:48

**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'));
```

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.