Best of Modern JavaScript — Methods, IIFEs, and this
Tags: javascript, webdev, codenewbie
Published: 2020-07-28 01:24:59

---
title: Best of Modern JavaScript — Methods, IIFEs, and this
published: true
date: 2020-07-25 00:32:40 UTC
tags: javascript,webdev,codenewbie
canonical_url: https://thewebdev.info/2020/07/25/best-of-modern-javascript%e2%80%8a-%e2%80%8amethods-iifes-and-this/?utm_source=rss&utm_medium=rss&utm_campaign=best-of-modern-javascript%25e2%2580%258a-%25e2%2580%258amethods-iifes-and-this
---

Since 2015, JavaScript has improved immensely.

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

In this article, we’ll look at the spread operator and functions in JavaScript.

### Method Definitions Syntax for Methods

We should use the method definition syntax for methods.

For example, we can write:

```
const obj = {
  foo() {},
  bar() {}
}

```

to define methods in `obj` .

This is the same as:

```
const obj = {
  foo: function() {},
  bar: function() {}
}

```

If we don’t need the value of `this` , we can also write:

```
const obj = {
  foo: () => {},
  bar: () => {}
}

```

We used arrow functions so that we don’t have to worry about the value of `this` in the function.

### Avoid IIFEs in ES6

We don’t really need IIFEs in ES6 or later.

The most common use of IIFEs is to define private variables that are only available within a function.

In ES5, we have something like:

```
(function() {
  var tmp = 'foo';
  //...
}());

```

In ES6, we can just define `tmp` within a block:

```
{
  let tmp = 'foo';
  //...
}

```

We also used to use IIFEs as modules.

For instance, we may write something like:

```
var module = (function() {
  var foo = 0;

  function bar(x) {
    foo++;
    //...
  }

  return {
    bar: bar
  };
}());

```

We return an object with the public properties so that we can use them elsewhere.

With ES6, we don’t need this anymore since we have native modules.

For example, we can just write:

`module.js`

```
let foo = 0;

export function bar(x) {
  foo++;
  //...
}

```

We just create a module file and use `export` to export what we want from it.

Then we can use it by importing the function.

For example, we can write:

```
import { foo } from './module';

foo(100);

```

We can still use IIFEs to immediately invoked arrow functions.

For example, we can write:

```
const arr = [3, 2, 1];

const sorted = (() => {
  arr.sort();
  return arr.join('');
})();

```

to sort our array.

### The Rules for `this`

`this` is defined differently in various situations.

For traditional standalone functions in strict mode, `this` is `undefined` .

For traditional standalone functions in sloppy mode, `this` is the `window` object.

Generator functions, generator methods, and methods work like traditional functions.

Arrow functions always take the value of `this` from the function outside of it.

Classes are implicitly strict so we can’t call a class directly.

We’ll get a TypeError if we try to call it directly.

### Traditional Functions

Traditional functions are functions that we have from ES5 or earlier.

We can create it as a function expression:

```
const foo = function(x) {
  //...
};

```

or we can create a function declaration;

```
function foo(x) {
  //...
}

```

`this` is `undefined` in strict mode and it’s a global object in sloppy mode.

In method calls `this` is the receiver of the method call.

It’s the first argument of `call` or `apply` .

In constructor calls, `this` is the newly created instance.

### Conclusion

There’re various kinds of functions in ES6.

Also, they all have different values of `this` depending on the type of function and location.

The post [Best of Modern JavaScript — Methods, IIFEs, and this](https://thewebdev.info/2020/07/25/best-of-modern-javascript%e2%80%8a-%e2%80%8amethods-iifes-and-this/) appeared first on [The Web Dev](https://thewebdev.info).