**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

The `== null` check is a concise expression to identify nullish values (`null` and `undefined`).

This refactoring replaces the following combinations of longer strict equality checks with the shorter `null` comparison:

* `a === null || a === undefined` becomes `a == null`
* `b !== null && b !== undefined` becomes `b != null`
* `x.f(1, 2) === null || x.f(1, 2) === undefined` becomes `x.f(1, 2) == null`

Learn More: [Equality comparisons and sameness (MDN)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness), [Equality table](https://dorey.github.io/JavaScript-Equality-Table/)

Use == null Comparison

**`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 its introduction in ES2020, this default value pattern was often expressed using the conditional operator.

This refactoring simplifies many types of default value expressions to nullish coalescing operator expressions:

* `a == null ? x : a` becomes `a ?? x`
* `a != null ? a : x` becomes `a ?? x`
* `a !== null && a !== undefined ? a : x` becomes `a ?? x`
* `f(1) != null ? f(1) : x` becomes `f(1) ?? x`
* `if (a != null) { b = a; } else { b = x; }` becomes `b = 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 optional chaining operator returns the value of an object property when the object is available and `undefined` otherwise.**
`.?` is similar to the standard `.` chaining operator, with an added check if the object is defined.

The optional chaining operator enables you to **write concise and safe chains of connected objects** when some of those objects can be `null` or `undefined`.
Before the introduction of optional chaining in ES2020, the `&&` operator was often used to check if an object is available (`obj && obj.value`).

This refactoring simplifies existing checks to use the optional chaining pattern:

* `x && x.a` becomes `x?.a`
* `x != null && x.a` becomes `x?.a`
* `x !== null && x !== undefined && x.a` becomes `x?.a`
* `x && x.a && x.a.b && x.a.b.c && x.a.b.c.d` becomes `x?.a?.b?.c?.d`
* etc.

Learn More: [Optional Chaining (MDN)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining)

Use Optional Chaining (?.)

**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)`.

Learn More: [Function.prototype.apply() (MDN)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply)

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