Best of Modern JavaScript — OOP 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,

};

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 appeared first on The Web Dev.