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

**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 Blocked Scoped 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 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'

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

+const a = 'Hello, ' + name + '!';
+const b = '123' + '456';
+const c = "4 + 3 * a = " + (4 + 3 * a);
+const a = `Hello, ${name}!`;
+const b = '123456';
+const c = `4 + 3 * a = ${4 + 3 * a}`;

Use Template Literals

Original Code

Changes

Transformed Code

Explore More