Best of Modern JavaScript — OOP Features
Tags: javascript, webdev
Published: 2020-07-30 00:07:56

---
title: Best of Modern JavaScript — OOP Features
published: true
date: 2020-07-25 00:34:13 UTC
tags: javascript,webdev
canonical_url: https://thewebdev.info/2020/07/25/best-of-modern-javascript%e2%80%8a-%e2%80%8aoop-features/?utm_source=rss&utm_medium=rss&utm_campaign=best-of-modern-javascript%25e2%2580%258a-%25e2%2580%258aoop-features
---

Since 2015, JavaScript has improved immensely.

It’s much more pleasant to use it now than ever.

In this article, we’ll look at new OOP features in JavaScript.

### Method Definitions

Methods can be defined in a shorter way with ES6 or later.

Instead of writing:

```
var obj = {
  foo: function(x, y) {
    //..
  }
};

```

like we do with ES5 or earlier, we can write:

```
const obj = {
  foo(x, y) {
    //...
  }
};

```

It’s much shorter and cleaner.

We can use the same shorthand for getters and setters:

```
const obj = {
  get foo() {
    return 123;
  },

  set bar(value) {
    this.val = value;
  }
};

```

We have the `foo` getter and `bar` setter as indicated by the `get` and `set` keywords.

For generator methods, we can write:

```
const obj = {
  * gen() {
    //...
  }
};

```

### Property Value Shorthands

Property values can also be written in a shorter way.

For instance, we can write:

```
const x = 2;
const y = 1;
const obj = { x, y };

```

This is the shorthand for:

```
const x = 2;
const y = 1;
const obj = { x: x, y: y };

```

We can also use the shorthand together with destructuring.

For example, we can write:

```
const obj = {
  x: 14,
  y: 1
};
const {
  x,
  y
} = obj;

```

Then `x` is 14 and `y` is 1.

### Computed Property Keys

We can add computed property keys to an object.

They’re denoted by brackets.

As long as the expression returns a string or symbol, we can use it inside the brackets.

For instance, we can write:

```
const obj = {
  foo: true,
  ['b' + 'ar']: false
};

```

Then we have the `foo` and `bar` properties in the `obj` object.

This syntax also works with method definitions.

For instance, we can write:

```
const obj = {
  ['h' + 'ello']() {
    return 'hello';
  }
};

```

to create the `hello` method.

We can pass in a symbol into the square brackets.

For example, to create an iterable object, we’ve to create the `Symbol.iterator` method to create the object.

We can write:

```
const obj = {
  *[Symbol.iterator]() {
    yield 1;
    yield 2;
  }
};

```

Then we can loop through it by writing:

```
for (const x of obj) {
  console.log(x);
}

```

### New Methods of `Object`

The `Object` object received several new methods.

One of them is the `Object.assign` method.

For instance, we can write:

```
const obj = {
  foo: 123
};

const newObj = Object.assign(obj, {
  bar: true
});

```

Then we put the `bar` property into `obj` and also return the new object.

So `obj` and `newObj` are both:

```
{ foo: 123, bar: true }

```

`Object.assign()` is aware of boot strings and symbols as property keys.

Only enumerable own properties are added by `Object.assign` .

Other kinds of properties are ignored.

The values are read by a simple get operation:

```
`const` `value` `=` `source[prop];`

```

And writing the value is done by a simple set:

```
target[prop] = value;

```

### Conclusion

ES6 comes with many new object-oriented programming features.

They include method shorthand and `Object.assign` .

The post [Best of Modern JavaScript — OOP Features](https://thewebdev.info/2020/07/25/best-of-modern-javascript%e2%80%8a-%e2%80%8aoop-features/) appeared first on [The Web Dev](https://thewebdev.info).