**Arrow functions are a concise syntax that can often replace the regular function syntax.** 
For example, `function(x, y) { return x * y }` can be replaced with `(x, y) => { return x * y; }`.

However, arrow functions have different semantics and cannot replace regular functions in all cases.
In particular, the scope of arrow functions (including binding of `this`) is established at creation time. 
This difference makes arrow functions unsuitable for using them as methods, constructors, 
and in `call`, `apply`, and `bind` calls.

Learn More: [Arrow Function Expressions (MDN)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions)

Use Arrow Functions

**`let` and `const` are block-scope variable declarations that can replace 'var' declarations in many cases.**

`const` declares blocked-scoped variables that cannot be re-assigned. `let` declares block-scoped variables that can be
changed. They are available since ES6 and are preferred over function-scope, modifiable `var` declarations, because they
make it easier to reason about the code.

When there are several variables declared in a statement, this refactoring does not change the declaration to prevent formatting breakages and linter issues.

Learn More: [Let (MDN)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let), [Const (MDN)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const),  

Use let and const to Declare Variables

**Default parameters allow providing default values for function parameters. These default values are used if nothing or `undefined` is passed into the function.** For example, `function f(p = 42) { ... }` sets `p` to `42` if no value is passed in.

Previous ways of setting default values, for example `p = p || 42` can be converted to default parameters. This refactoring supports converting the following expressions and variants of them:

* or assignment, e.g. `p = p || 42` or `p ||= 42`
* nullish coalescing operator, e.g. `p = p ?? 42`
* ternary with falsy check on parameter, e.g. `p = p ? p : 42`
* ternary with `null` check, e.g. `p = p == null ? 42 : p` or `p = p != null ? p : 42`
* ternary with `undefined` check, e.g. `p = p === undefined ? 42 : p`
* ternary with `typeof` check, e.g. `p = typeof p === "undefined" ? 42 : p`

Learn More: [Default Parameters (MDN)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters)

Use Default Parameters

**`for...of` loops over iterable objects, for example arrays or strings.**

It is easier to read than indexed `for` loops and can replace them in many cases.

For example,

```javascript
for (let i = 0; i < elements.length; i++) {
    const element = elements[i];
    console.log(element);
}

```

can be replaced by

```javascript
for (const element of elements) {
    console.log(element);
}
```

Learn More: [for...of (MDN)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of)  

Use for...of Loop

**The nullish coalescing operator (`??`) returns its right side when its left side is nullish** (`null`
or `undefined`), and its left side otherwise. For example, `const x = a ?? b` would set `x` to `a` if `a` has a value,
and to `b` if `a` is `null` or `undefined`.

The nullish coalescing operator is very useful to **provide default values when a value or an expression is nullish**.
Before it was introduced in ES2020, this default value pattern was often expressed using the conditional operator.

This refactoring simplifies conditional (ternary) checks to nullish coalescing operator expressions:

* `a == null ? x : a` becomes `a ?? x`
* `a != null ? a : x` becomes `a ?? x`
* `a === null || a === undefined ? x : a` becomes `a ?? x`
* `a !== null && a !== undefined ? a : x` becomes `a ?? x`
* etc.

Learn
More: [Nullish coalescing operator (MDN)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator)

Use Nullish Coalescing Operator (??) For Defaults

**The spread syntax (`...`) allows iterables like array expressions to be expanded in place where arguments are expected.** It can used in place of `.apply`. For example `Math.min.apply(Math, args)` can be replaced with `Math.min(...args)`.

Use Spread Syntax (...) instead of '.apply'

**Template literals are string templates that can include variables and expressions.** They can replace string concatenation and are often easier to read. Example: `` `Hello, ${name}!` ``

This refactoring supports converting the first line of concatenated strings into template literals or shortened strings:
* concatenated string literals will be combined, e.g. `"a" + "b"` will become `"ab"`
* concatenated expressions and variables will be embedded in templates, e.g. `"a" + x + "b"` will become `` `a${x}b` ``
* unnecesary escaping of quotes is removed when string are combined or transformed into template literals

Learn More: [Template Literals (MDN)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals)

Use Template Literals

**Convert variable declarations with multiple variables into separate declarations that declare one variable each.**

For example,
```javascript
let a = 2, b;
``` 
is converted into
```javascript
let a = 2;
let b;
```

Playground