DEV Community: P42

AI-generated explanations and documentation for JavaScript code

Lars Grammel — Thu, 08 Dec 2022 15:17:39 +0000

As a JavaScript developer, you know how challenging it can be to work with existing codebases. Often, the code is poorly documented, making it difficult to understand what it does and how it works. That's why I've added two new AI-powered features to the JS Assistant for Visual Studio Code: AI-generated JS-Doc comments and AI-generated explanations for code snippets.

AI-generated JSDoc comments

The JS Assistant can generate documentation for functions and methods. This feature accelerates writing JSDoc comments by providing a pre-filled template you can refine.

AI-generated code explanations

You can generate explanations of JavaScript code snippets to help you understand complex or challenging code passages. While such AI-generated descriptions can sometimes be inaccurate or misleading, they can help accelerate making sense of a legacy codebase. They are best used with your code understanding, e.g., to provide ideas that get you started or unstuck.

These AI-powered actions can help you work more effectively in complex legacy JavaScript code today.

Code explanations and comment generation are early, experimental features. I would love to hear how you think they would be helpful?

6 VS Code Extensions for Productive Javascript and TypeScript Editing

Lars Grammel — Tue, 01 Nov 2022 17:20:54 +0000

Code editing is an essential part of the development workflow. It includes all your actions in the editor before re-running your tests or checking how your changes affect the app you are working on:

Adding, changing, and removing code
Fixing syntax errors
Fixing typos, e.g., in variable and function names
Fixing linter errors and warnings
Formatting
Refactoring and restructuring code

Having minor friction points in the code editing process can lead to wasted time and frustration. You might have to switch context and lose your train of thought when, for example, you don't immediately see or understand a syntax error, you miss a potential bug, or your editor is suddenly full of formatting-related linter warnings.

Visual Studio Code provides a solid editing experience and offers many extensions you can install to take it to the next level. These six Visual Studio Code extensions (extension pack) help me stay in the flow and be productive when editing JavaScript and TypeScript code:

GitHub Copilot

GitHub Copilot suggests code completions for your current editor position. Its AI-generated suggestions range from short statement completion to full functions and classes.

Copilot is, for example, valuable for automatically generating boilerplate code, discovering APIs, and implementing common patterns quickly. It is also helpful for getting unstuck when it is not immediately clear what code is needed to solve a problem.

The code suggestions are only sometimes perfect and need review and refinement, and often I discard them entirely. Still, overall, Copilot boosts my productivity and helps me stay in the flow.

Prettier

Consistent formatting makes code easier to read and reduces accidental churn in pull requests. However, manually formatting your code is very tedious and error-prone. You can save time and keep your codebase consistently styled with an automated code formatter.

Prettier is an opinionated code formatter that many JavaScript and TypeScript projects use. It can format JavaScript, TypeScript, JSON, HTML, JSX (React), CSS, and more. Because it only offers a handful of configuration options, using Prettier can help avoid bike-shedding discussions about code formatting.

You can configure Prettier to format your code automatically when you save a file. If you want to minimize modifications to existing files, you can limit the formatting to the modified code. These are the Visual Studio Code settings for configuring Prettier:



"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"editor.formatOnSaveMode": "modificationsIfAvailable"

If you use a keyboard shortcut to save often, e.g., after each small code change, fix, or refactoring, you can even write poorly formatted code and rely on Prettier to fix it without much friction.

quick-lint-js

quick-lint-js is an excellent alternative to ESLint when you primarily want to check for code correctness. It provides a fixed set of rules for TypeScript and JavaScript and is extremely fast.

While quick-lint-js does not have the extensibility and the configuration options of ESLint, it helps you see common mistakes quickly and fix them. And since it focuses on correctness, quick-lint-js does not contain opinionated style rules and works very well with Prettier.

Code Spell Checker

Not all mistakes result in syntax errors or potential bugs. It is easy to have a typo in a variable, function, or class name without noticing it. However, this can lead to future issues with searchability and readability. Code Spell Checker helps you spot and correct typos early.

P42 JS Assistant

Small refactorings can help restructure and clean up your code while editing it. I have developed the P42 JS Assistant, which provides many automated code actions and suggests refactorings that make your code more readable and modern.

You can open a context menu with code actions in the editor by clicking on the lightbulb icon or using the quick-fix keyboard shortcut (Ctrl + . on Windows and Linux and ⌘ + . on Mac). You can use the code actions to make semantic changes to your code quickly and safely.

The refactoring suggestions show places where you can simplify or modernize your code. They can help you stay up-to-date with the latest JavaScript idioms and best practices. An underline with three dots indicates that a refactoring suggestion is available.

Error Lens

By default, the VS Code editor indicates the presence of errors, warnings, and other hints with various underlines. You need to hover over the underlined code section with the mouse cursor to be able to read the messages. This additional step can take time and requires you to use the mouse.

Error Lens shows the diagnostic messages on the same line in the editor, saving you time and keeping you in the flow. You can distinguish different message levels using their color. Errors are displayed in red, warnings in yellow, information messages in blue, and hints in green.

In addition to showing TypeScript and JavaScript errors, the message coloring makes Error Lens an excellent companion to quick-lint-js (error, warnings), Code Spell Checker (information), and the P42 JS Assistant (hint). You can toggle the display of different message types with the Error Lens: Toggle commands in the Command Palette.

Summary

Editing code is central to software development. With the above Visual Studio Code extensions, you can enhance your editing experience and make it easier to write high-quality code. You can conveniently install the extensions using the JavaScript and TypeScript Editing extension pack.

How to Configure the Touch Bar in Visual Studio Code in Under 5 Minutes

Lars Grammel — Thu, 20 Oct 2022 18:34:47 +0000

The touch bar on the MacBook has the potential to provide quick access to commonly used commands in Visual Studio Code.

In the default configuration, the 'go forward' and 'go back' buttons are very useful. However, other default touch bar actions are less valuable and take up space. You might also find that everyday operations such as 'rename' (F2) or 'go to definition' (F12) are harder to access because you need to hold down Fn.

This post will show you how to configure Visual Studio Code to make the most of the touch bar.

Nasc Touchbar extension

The Nasc Touchbar extension enables you to easily add many additional actions to the touch bar, for example, Run command, Toggle side bar, and Rename.

You can configure which buttons are displayed in the Visual Studio Code settings (Preferences > Open Settings (UI), search for touch).

JavaScript Assistant extension

I have included touch bar buttons that are helpful for JavaScript and TypeScript users in the JavaScript Assistant extension. The extension adds the following actions to the touch bar:

✏️ Rename: Triggers the rename command on the current symbol.
🪄 Quick-Fix: Opens the quick-fix context menu.
🔧 Refactor: Opens the refactor context menu.
📄 Source Action: Opens the source action context menu.

The actions are only available when you edit JavaScript or TypeScript files. Similar to the Nasc Touchbar extension, you can configure which buttons are displayed in the Visual Studio Code settings (Preferences > Open Settings (UI)).

Disabling default debug touch bar actions

The default touch bar buttons take precedence over the controls added by the Nasc Touchbar and JavaScript Assistant extensions. In particular, the debug actions can take up a lot of space and hide other buttons.
You can disable them by adding the following to your settings.json file:

"keyboard.touchbar.ignored": [
  "workbench.action.debug.start",
  "workbench.action.debug.run",
  "workbench.action.debug.pause",
  "workbench.action.debug.stepOut",
  "workbench.action.debug.stepInto",
  "workbench.action.debug.stepOver",
  "workbench.action.debug.stop",
  "workbench.action.debug.restart"
]

Example configuration

The above configuration shows the following buttons:

Go back and Go forward (default)
Go to definition, Run command, Toggle side bar, and Toggle bottom panel (Nasc Touchbar)
Rename, Source Action, Refactor, and Quick-Fix (JavaScript Assistant)

In addition to the disable configuration for the debug actions, the following settings are used:

"nasc-touchbar.addCursorBelow": false,
"nasc-touchbar.rename": false,
"nasc-touchbar.toggleSidebar": true

How would you refactor this code? (tennis-3-modern)

Lars Grammel — Thu, 18 Aug 2022 09:13:54 +0000

export class TennisGame {
  constructor(p1N, p2N) {
    this.p2 = 0;
    this.p1 = 0;

    this.p1N = p1N;
    this.p2N = p2N;
  }

  getScore() {
    let s;
    if (this.p1 < 4 && this.p2 < 4 && this.p1 + this.p2 < 6) {
      const p = ["Love", "Fifteen", "Thirty", "Forty"];
      s = p[this.p1];
      return this.p1 == this.p2 ? `${s}-All` : `${s}-${p[this.p2]}`;
    } else {
      if (this.p1 == this.p2) return "Deuce";
      s = this.p1 > this.p2 ? this.p1N : this.p2N;
      return (this.p1 - this.p2) * (this.p1 - this.p2) == 1
        ? `Advantage ${s}`
        : `Win for ${s}`;
    }
  }

  wonPoint(playerName) {
    if (playerName == "player1") this.p1 += 1;
    else this.p2 += 1;
  }
}

I've created a modern version of the Tennis-3 refactoring kata. The class calculates the tennis score for a game. You can find the full code including a test suite on GitHub.

How would you refactor it?

What's new in P42? Summer 2022

Lars Grammel — Tue, 21 Jun 2022 08:41:00 +0000

Since February, the P42 JavaScript Assistant for Visual Studio Code has grown considerably and contains over 90 code assists and refactorings. The user interface has been improved based on feedback, and the JavaScript Assistant now supports Vue.js. Here are the details:

Vue.js Support (P42 Pro)

You can now use code assists, refactorings, and suggestions from the P42 JavaScript Assistant inside .vue files and mass refactorings updates .vue files.

User Interface

Keyboard Shortcuts

The JavaScript Assistant has different default keyboard shortcuts for the code assist context menus and a "move" context menu shortcut. You can now add custom keyboard shortcuts for any P42 code assist.

Context Menu	Mac Shortcut	Windows/Linux Shortcut
Quick Fix	CMD + .	CTRL + .
Refactor	CTRL + CMD + R	CTRL + ALT + R
Extract	CTRL + CMD + X	CTRL + ALT + X
Inline	CTRL + CMD + I	CTRL + ALT + I
Convert	CTRL + CMD + C	CTRL + ALT + C
Move	CTRL + CMD + M	CTRL + ALT + M
Action	CTRL + CMD + A	CTRL + ALT + A

Suggestion Display and Panel

The P42 refactorings suggestions are shown as hints inside the editor (underline with three dots) by default, and the suggestion side panel highlights relevant code on mouseover. When you click on a selected item in the side panel, the editor scrolls to the appropriate location.

Mass Refactoring (P42 Pro)

The mass refactoring dialog is now more usable. You can search the description and details, e.g., to find all ES2015 modernizations, and the refactorings are sorted alphabetically.

The mass refactoring output is easier to understand and contains more information. It includes the file exclusions patterns, a progress indicator for every 50 analyzed files, and the overall refactoring time in seconds.

Configuration

ECMAScript Target Version

You can specify the target ECMAScript version in the P42 configuration file. Code modernizations that would require newer ECMAScript versions are hidden when you configure an older target version.

Hide Overlapping Code Actions

The P42 JavaScript Assistant provides code assists that mirror and extend the functionality of code assists that come with Visual Studio Code. You can now configure the visibility of overlapping code assists.

Code Assists and Refactorings

Working with Variables

New - Split Variable Declaration and Initialization: Separate the variable initialization from its declaration.
New - Merge Variable Declaration and Initialization: Convert the initial assignment of a variable into its declaration initializer.
New - Replace with existing variable: Replace an expression with an existing variable (P42 Pro).
New - Push variable declaration into initial value: Inlines a variable that is initialized with another variable into the declaration of that variable (P42 Pro).
New - Remove unused variable: Remove a variable that is not read or written.
Improved - Extract variable suggests better variable names when extracting identifiers and property access expressions and automatically creates blocks when needed.

Working with Destructuring Expressions

New - Convert to destructuring assignment: Convert a variable declaration that accesses an object property to a destructuring assignment.
New - Merge into preceding destructuring assignment: Combine an object destructuring assignment with its preceding sibling.
New - Flatten array rest/spread property: Merge a ...[] expression into the outer array literal or destructuring expression (P42 Pro).

Working with Classes

New - Move field initialization into constructor: Moves the assignment of the initial field value into the class constructor (P42 Pro).
New - Move initialization into field declaration: Moves the assignment of the initial field value into the field declaration (P42 Pro).

Working with Functions

New - Convert named function to function expression: Converts a named function to a const declaration with a function expression.
New - Introduce early return / continue: Change an if-statement into an early return or continue statement (P42 Pro).

Working with Loops and Arrays

New - Convert loop to .map(): Convert a loop with .push() into a .map() call (P42 Pro).
New - Replace _.each and _.forEach with array.forEach: Replace Lodash _.each and _.forEach with array.forEach (P42 Pro).
Improved - Convert array.indexOf() into array.includes() converts exclusion checks to !array.includes(..).
Improved - Convert loop to for…of supports converting anArray.forEach to a for…of loop.

Working with Conditional Expressions

New - Convert && to if statement: Convert condition && aFunction(); and similar expression statements into if statements.
Improved - Split if statement supports splitting on ||.
Improved - Flip operator supports +, *, and binary operators.

Working with String and Templates

New - Convert string comparison chain to array.includes: Replace || value === 'aString'and&& value !== 'aString'chains with `array.includes().
Improved - Extract selected text into variable supports extracting text and included expressions from template literals.
Improved - Inline into template supports inlining template literals into template literals.

Other Code Actions

New - Remove console.log: Remove console.log statement.
New - Replace void 0 with undefined: Replace void 0 and other constant void expressions with undefined.
New - Select expression occurrences: Start a multi-cursor selection on several occurrences of the same expression (P42 Pro).
Improved - Replaced the "move statement out of if-else" refactoring with new Move duplicated first statement out of if-else and Move duplicated last statement out of if-else refactorings.

You can follow @p42ai on Twitter to get notified about new features.

Happy Coding!

JS Refactoring Combo: Introduce Object Destructuring

Lars Grammel — Wed, 08 Jun 2022 18:33:23 +0000

Destructuring is a way to access array values or object properties. It can be used in variable declarations, parameters, and catch clauses.

You can use destructuring to access several properties at once, making it possible to concisely unpack an object into local variables. These local variables can replace redundant property access chains and make the code easier to read.

Before (Example)

for (const item of items) {
  totalAmount += item.price.amount - item.price.discount;
  totalDiscount += item.price.discount;

  logPurchase(
    item.customer.country, 
    item.customer.zipCode, 
    item.price.amount
  );
}

Refactoring Steps

💡 The refactoring steps are using P42 JavaScript Assistant v1.113

Extract all occurrences of the object properties into a variable for each property. The name of the variables should match the property names.
Convert the variables to destructuring expressions.
Move up the variables so that they are next to each other.
Merge the destructuring expressions.
Push the combined destructuring expression into the destructured variable (optional).

After (Example)

for (const { price, customer } of items) {
  totalAmount += price.amount - price.discount;
  totalDiscount += price.discount;

  logPurchase(
    customer.country, 
    customer.zipCode, 
    price.amount
  );
}

85 JavaScript Code Assists for Visual Studio Code

Lars Grammel — Mon, 30 May 2022 17:07:12 +0000

JavaScript programming in an editor such as Visual Studio Code typically involves a lot of manual text editing, with the occasional copy-paste keyboard shortcuts or multi-cursor changes.

Code assists such as refactorings, code actions, and quick fixes are another tool in this repertoire. You can use code assists to make higher-level language-aware changes, e.g., you can extract an expression and all of its occurrences into a variable. When you make such changes manually, it can be time-consuming, and you risk making mistakes.

I've written an extension for Visual Studio Code called JavaScript Assistant that adds 85 code assists for JavaScript and TypeScript to make your life easier. You can find the code assists in refactoring and quick-fix context menus or invoke them with keyboard shortcuts. The JavaScript Assistant will also sometimes suggest recommended refactorings.

In this blog post, you can learn about code assists and how to improve your refactoring skills. Here are the code assists by category:

Core Refactorings
Code Assists for React
Code Assists for Logical Expressions
Code Assists for Branching Statements
Code Assists for Arrays and Loops
Code Assists for Functions and Methods
Code Assists for Strings and Template Literals
Code Assists for Variables
Code Assists for Syntax Conversion
JavaScript Modernizations
Lodash Modernizations
Code Cleanups
Other Code Assists

Code assists that belong to several categories appear more than once.

Core Refactorings

Visual Study Code already contains basic refactorings such as Rename and Extract Function. The JavaScript Assistant adds additional refactorings or extended functionality such as safety checking:

Extract selected text into variable: Extract the selected text (including expressions from template literals) into a const variable.
Extract variable: Extract one or more occurrences of an expression into a const variable.
Inline return: Convert a variable assignment to a return statement.
Inline variable: Inline a variable value into its references.

Code Assists for React

In React, components often contain JSX, a syntax extension for JavaScript. The JavaScript Assistant provides code assists that make working with JSX and React easier:

Add {...} to JSX attribute: Add {...} to JSX attribute string literal value.
Collapse JSX tag: Convert an empty JSX tag into a self-closing tag.
Expand JSX tag: Expand a self-closing JSX tag.
Extract React function component: Extract JSX element or fragment into a React Function Component.
Remove {...} from JSX attribute: Remove {...} from a JSX attribute expression value that contains a string literal.
Remove unnecessary JSX fragment: Replace JSX Fragments <></> that only contain a single child with that child.
Surround with <>...</>: Wrap JSX elements in a JSX fragment <>...</>.

Code Assists for Logical Expressions

Boolean logic can be challenging to read, especially as expressions get more complex. The JavaScript Assistant provides several refactorings that can help you simplify and tease apart logical expressions to make them easier to understand:

Convert string comparison chain to array.includes: Replace || value === 'aString' and && value !== 'aString' chains with array.includes().
Convert to optional chaining: Replace various guard expressions with the optional chaining operator (?.).
Flip operator: Swap the left and right operands and update the operator if necessary.
Invert condition: Negate the condition of an if-statement or conditional expression and swap its content.
Pull up negation: Move the not-operator (!) out of a binary expression.
Push down negation: Push the not-operator (!) into an expression and negate it.
Remove double negation: Remove double negation (!!) expressions.
Simplify binary expression: Replace binary expression with a more straightforward equivalent expression.
Use == null comparison: Replace different nullish checks with == null.

Code Assists for Branching Statements

Branching statements such as if-else and switch are central elements in many programs. Restructuring them can increase the readability of your programs, often in combination with refactoring their conditions:

Convert && to if statement: Convert condition && aFunction(); and similar expression statements into if statements.
Convert conditional expression to if-else: Convert a conditional expression to an if-else statement.
Convert if-else into conditional expression: Convert an if-else return or assignment expression into a conditional expression.
Convert if-else to switch: Convert if-else statement chain with equality comparisons to switch statement.
Merge nested if inside else into else-if: Nested single if statements inside else blocks can be combined into else if statements.
Merge nested if-statements: Combine two nested if statements without additional operations into a single if-statement, using && to combine the conditions.
Move duplicated first statement out of if-else: Move a first statement that appears in both the if and the else block out of the if-else statement.
Move duplicated last statement out of if-else: Move a last statement that appears in both the if and the else block out of the if-else statement.
Remove empty else block: Remove an empty 'else' block from an 'if' statement.
Remove empty if block: Remove an empty 'if' block from an 'if' statement. Replaces it with the 'else' block when available.
Remove redundant else if: Remove redundant else-if conditions and unreachable else statements.
Remove unnecessary conditional expression: Replace a conditional expression with its condition or its result.
Remove unnecessary else: Lift the else content of an if-else with a return statement to the outer indentation level.
Separate repeated condition into nested if-else: Separate a repeated sub-condition that is fully covered into a nested if-else.
Split if statement: Split the condition of an if statement on || or && when possible.

Code Assists for Arrays and Loops

JavaScript has several ways of defining loops and many array methods that work on the whole array. The JavaScript Assistant provides several code actions for converting between different types of for loops and for converting to more idiomatic array methods such as array.includes().

Convert array.indexOf() into array.includes(): Replace array.indexOf() checks with array.includes().
Convert string comparison chain to array.includes: Replace || value === 'aString' and && value !== 'aString' chains with array.includes().
Convert loop to .forEach: Replace regular for loops with .forEach() loops.
Convert loop to for..of: Replace regular for loops and anArray.forEach loops with for...of loops.
Convert loop to for: Replace for..of with a regular for loop that has an index variable.

Code Assists for Functions and Methods

Functions and methods are essential building blocks of any non-trivial program. The following code actions make it easier to work with functions, methods, and their parameters:

Add {…} to arrow function: Convert arrow function expression body into a block body.
Convert function to arrow function: Replace function expressions with arrow functions, a more concise syntax.
Convert function to object method: Convert property assignments with functions to method declarations.
Convert named function to function expression: Converts a named function to a const declaration with a function expression.
Lift default into parameter: Replace default value assignment expressions with default parameter values.
Push parameter into IIFE/IIAF: Push a parameter of an immediately-invoked function expressions (IIFEs) or an immediately-invoked arrow functions (IIAFs) into the function body.
Remove {…} from arrow function: Convert an arrow function block body into an expression body.
Remove IIFE/IIAF: Remove immediately-invoked function expressions (IIFEs) and immediately-invoked arrow functions (IIAFs) without parameters.

Code Assists for Strings and Template Literals

Text manipulation has become more powerful with the introduction of template literals in JavaScript. The JavaScript Assistant offers several code actions to help you work with text, be it strings or template literals:

Convert string comparison chain to array.includes: Replace || value === 'aString' and && value !== 'aString' chains with array.includes().
Convert string to template literal: Convert a string to a basic template literal without expressions.
Convert template literal to string: Convert a simple template literal without expressions into a string.
Extract selected text into variable: Extract the selected text (including expressions from template literals) into a const variable.
Inline into template: Inline a string or a basic template literal into an outer template literal.
Remove unnecessary template literal: Simplify a template literal with a single inner expression and no prefix or suffix.
Use string.endsWith(): string.endsWith() checks if a string ends with another string.
Use string.startsWith(): string.startsWith() checks if a string starts with another string.
Merge string concatenation: Merge string and template literal concatenation into a single template literal or string.

Code Assists for Variables

Convert let to const: Replace let declarations that have no re-assignment with const declarations.
Convert to destructuring assignment: Convert a variable declaration that accesses an object property to a destructuring assignment.
Extract variable: Extract one or more occurrences of an expression into a const variable.
Inline return: Convert a variable assignment to a return statement.
Lift default into parameter: Replace default value assignment expressions with default parameter values.
Merge into preceding destructuring assignment: Combine an object destructuring assignment with its preceding sibling.
Merge variable declaration and initialization: Convert the initial assignment of a variable into its declaration initializer.
Move field initialization into constructor: Moves the assignment of the initial field value into the class constructor.
Move initialization into field declaration: Moves the assignment of the initial field value into the field declaration.
Push parameter into IIFE/IIAF: Push a parameter of an immediately-invoked function expressions (IIFEs) or an immediately-invoked arrow functions (IIAFs) into the function body.
Remove unused variable: Remove a variable that is not read or written.
Convert var to let or const: Replace var with block-scoped variables let and const.
Split variable declaration sequence: Convert declarations with multiple variables into separate declarations for each variable.
Split variable declaration and initialization: Separate the variable initialization from its declaration.
Use nullish coalescence in default expression: Replace default value expression with nullish coalescing operator (??) expressions.

Code Assists for Syntax Conversion

It is often annoying to make small syntactical changes by editing text. Often more than one position needs to be edited, and the code is broken during the edit, leading to incorrect errors and auto-completions that get in the way. You can execute the following syntax conversions with code assists:

Add {…} to arrow function: Convert arrow function expression body into a block body.
Add {…} to JSX attribute: Add {…} to JSX attribute string literal value.
Add numeric separator: Increase the readability of long numbers and uncommon number formats by adding underscore separators.
Collapse JSX tag: Convert an empty JSX tag into a self-closing tag.
Collapse object property into shorthand: Shorten object properties when the property name is the same as the property value.
Convert property access to dot notation: Convert bracket notation property access o['a'] into dot notation property access o.a.
Convert property access to bracket notation: Convert dot notation property access o.a into bracket notation property access o['a'].
Expand JSX tag: Expand a self-closing JSX tag.
Expand shorthand property: Expand a shorthand object property (e.g. { a }) to a regular property (e.g. { a: a }).
Merge variable declaration and initialization: Convert the initial assignment of a variable into its declaration initializer.
Pull operator out of assignment: Move an operator out of an assignment into a binary expression.
Push operator into assignment: Move an operator from a binary expression into an assignment operator, e.g., +=.
Remove {…} from arrow function: Convert an arrow function block body into an expression body.
Remove {…} from JSX attribute: Remove {…} from a JSX attribute expression value that contains a string literal.

JavaScript Modernizations

The Javascript ecosystem is progressing rapidly. However, it is hard to keep codebases up-to-date with the newer JavaScript features, and codemods are not always an option due to their significant churn and potential for breakages. The JavaScript Assistant supports both codemod-like mass code refactoring and more opportunistic code modernization for the following upgrades:

Add numeric separator: Increase the readability of long numbers and uncommon number formats by adding underscore separators.
Collapse object property into shorthand: Shorten object properties when the property name is the same as the property value.
Convert .apply() to spread syntax: Replace .apply() calls with the spread operator ...
Convert array.indexOf() into array.includes(): Replace array.indexOf() checks with array.includes().
Convert string comparison chain to array.includes: Replace || value === 'aString' and && value !== 'aString' chains with array.includes().
Convert function to arrow function: Replace function expressions with arrow functions, a more concise syntax.
Convert function to object method: Convert property assignments with functions to method declarations.
Convert loop to for..of: Replace regular for loops and anArray.forEach loops with for...of loops.
Convert Math.pow to exponentiation operator: Use the exponentiation operator ** instead of Math.pow().
Convert string to template literal: Convert a string to a basic template literal without expressions.
Convert to destructuring assignment: Convert a variable declaration that accesses an object property to a destructuring assignment.
Convert to optional chaining: Replace various guard expressions with the optional chaining operator (?.).
Lift default into parameter: Replace default value assignment expressions with default parameter values.
Convert var to let or const: Replace var with block-scoped variables let and const.
Replace void 0 with undefined: Replace void 0 and other constant void expressions with undefined.
Use == null comparison: Replace different nullish checks with == null.
Use nullish coalescence in default expression: Replace default value expression with nullish coalescing operator (??) expressions.
Use string.endsWith(): string.endsWith() checks if a string ends with another string.
Use string.startsWith(): string.startsWith() checks if a string starts with another string.
Merge string concatenation: Merge string and template literal concatenation into a single template literal or string.

Lodash Modernizations

With the introduction of various collection helpers and new syntax in ES6 and more recent JavaScript versions, some Lodash functions have become somewhat redundant.

Replace _.every with array.every: Replace Lodash _.every with array.every.
Replace _.filter with array.filter: Replace Lodash _.filter with array.filter.
Replace _.each and _.forEach with array.forEach: Replace Lodash _.each and _.forEach with array.forEach.
Replace _.map with array.map: Replace Lodash _.map with array.map.
Replace _.noop with arrow Function: Replace _.noop with () => undefined.
Replace _.some with array.some: Replace Lodash _.some with array.some.

Code Cleanups

Code cleanups remove unnecessary code. Such code can result from code churn, e.g., by applying other refactorings, adding new features, or fixing bugs. The JavaScript Assistant shows hints and automates the cleanup for the following situations:

Remove console.log: Remove console.log statement.
Remove double negation: Remove double negation (!!) expressions.
Remove empty else block: Remove an empty 'else' block from an 'if' statement.
Remove empty if block: Remove an empty 'if' block from an 'if' statement. Replaces it with the 'else' block when available.
Remove IIFE/IIAF: Remove immediately-invoked function expressions (IIFEs) and immediately-invoked arrow functions (IIAFs) without parameters.
Remove redundant else if: Remove redundant else-if conditions and unreachable else statements.
Remove unnecessary conditional expression: Replace a conditional expression with its condition or its result.
Remove unnecessary else: Lift the else content of an if-else with a return statement to the outer indentation level.
Remove unnecessary expression statement: Remove an expression statement that has no side-effects.
Remove unnecessary JSX fragment: Replace JSX Fragments <></> that only contain a single child with that child.
Remove unnecessary template literal: Simplify a template literal with a single inner expression and no prefix or suffix.
Remove unused variable: Remove a variable that is not read or written.
Replace void 0 with undefined: Replace void 0 and other constant void expressions with undefined.
Simplify binary expression: Replace binary expression with a more straightforward equivalent expression.

Other Code Assists

Insert console.log for variable: Insert a 'console.log' statement for a selected variable when possible.
Surround with try…catch: Surround a sequence of statements in a try…catch block.

Conclusion

With the 85 code assists shown in this blog post, you can edit your JavaScript source code at a higher level than text and make quicker and safer changes to your code.

💡 If you want to give JavaScript Assistant a try, you can find it on the Visual Studio Code marketplace.

JS Refactoring Combo: Inline Function as Method

Lars Grammel — Sat, 28 May 2022 11:02:31 +0000

Sometimes functions are only used as property values. In such cases, you can convert the functions into methods.

Before (Example)

function aFunction(aParameter) {
  doSomething(aParameter);
}

const anObject = {
  aMethod: aFunction
};

Refactoring Steps

💡 The refactoring steps are using P42 JavaScript Assistant v1.109

After (Example)

const anObject = {
  aMethod(aParameter) {
    doSomething(aParameter);
  }
};

You don't need void 0 in JavaScript

Lars Grammel — Tue, 10 May 2022 09:42:51 +0000

In JavaScript code, especially in older legacy code, you sometimes find the expression void 0.

The void operator evaluates an expression and returns the primitive value undefined. void 0 evaluates 0, which does nothing, and then returns undefined. It is effectively an alias for undefined.

Why is void 0 used as an alias for undefined?

One of JavaScript's quirks is that undefined is not a reserved keyword. Instead, it is a property of the global object.

Before ES5 (2009), it was possible to modify the undefined global property, which could lead to unexpected behavior for undefined.

Consider the following example (which does not work in modern JavaScript engines):

// Pre-ES5 example - does not work in modern JS engines:

// changes property 'undefined' on the global object:
undefined = "something else"; 

// potentially in some other JavaScript file or script section:
if (aVariable === undefined) {
  // aVariable is equal to "something else", 
  // but not to the primitive value 'undefined'
  doSomething();
}

Modifying the undefined global could even happen in 3rd party code, e.g., libraries imported via the script tag. Since void 0 always returns the actual primitive value undefined, it was commonly used before ES5 to make the code failsafe against the re-definition of the undefined global property.

The global property 'undefined' after ES5

The problem that undefined could be modified on the global object was so big that the JavaScript standard was changed.
With ES5, the global property undefined became read-only. Attempting to change the value does nothing in modern JavaScript:

globalThis.undefined = "something else";
console.log(undefined); // prints undefined in modern browsers

Undefined can still be shadowed by a local variable

However, while changing the undefined global property is no longer possible, undefined is still not a reserved keyword in JavaScript. Therefore it can still be shadowed by a local variable:

const undefined = "something else";
let check = aVariable === void 0; // void 0 is needed here

Having a local variable with the name undefined is a pitfall that you want to avoid. The ESLint rule no-undefined disallows the use of undefined as a variable name and prevents shadowing issues.

Can void 0 help reduce the bundle size?

The expression void 0 is shorter than undefined. JavaScript bundle sizes are essential for creating websites that load quickly, and shaving off a few bytes can help.

However, it is best to leave basic code size optimizations to minifiers such as Terser as part of the product bundling process. They can perform many different optimizations, and the source code remains more readable without any manual code size optimizations like using void 0 instead of undefined.

Avoid void 0 in modern JavaScript

To summarize, in modern browsers and JavaScript engines, there is no reason to use void 0 any longer:

the global property undefined cannot be changed in ES5 and newer environments
local variables with the name undefined can be disallowed with the ESLint rule no-undefined
minifiers can replace undefined with void 0 when creating the production bundle

On the contrary, void 0 makes JavaSCript code harder to read and understand because you need to know the meaning of void 0 and process different terms (void 0, undefined) for the same concept (undefined).

TLDR: You can use undefined and remove the unnecessary void 0 complication.

JS Refactoring Combo: Extract Array Constant From String Comparison Chain

Lars Grammel — Fri, 06 May 2022 14:55:23 +0000

When a variable is compared against a string value, the easiest way to start is with a variable === "value" or variable !== "value" comparison. Over time, these can grow into longer sequences, e.g. variable === "value1" || variable === "value2" || variable === "value3".

The values that the variable is compared to are often a meaningful collection on their own. Refactoring them into an array and using array.includes(variable) can facilitate reuse and extension, and a meaningful array name can make it easier to understand the code.

Before (Example)

if (extension !== "js" 
    && extension !== "ts" 
    && extension !== "tsx") {
  handleUnsupportedExtension(extension)
}

Refactoring Steps

💡 The refactoring steps are using P42 JavaScript Assistant v1.105

Convert string comparison chain to array.includes
Extract the array into a variable
Move the extracted array variable, e.g., to the top of the file (not shown)

After (Example)

const SUPPORTED_EXTENSIONS = ["js", "ts", "tsx"];
if (!SUPPORTED_EXTENSIONS.includes(extension)) {
  handleUnsupportedExtension(extension)
}

JS Refactoring Gotchas: 5 Ways Converting to Optional Chaining Can Break Your Code

Lars Grammel — Wed, 04 May 2022 13:02:56 +0000

The optional chaining operator .? returns the value of an object property when the object is available and undefined otherwise. It is similar to the standard . chaining operator, with an added check if the object is defined (i.e., not nullish).

The optional chaining operator lets you 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).

You can often simplify existing checks with the optional chaining pattern:

obj && obj.property becomes obj?.property
obj != null && obj.property becomes obj?.property
obj != null ? obj.property : undefined becomes obj?.property
arr && arr[i] becomes arr?.[i]
f && f() becomes f?.()
etc.

However, there are some cases where refactoring into optional chaining can lead to bugs:

Optional chaining short-circuits for nullish values, but not for other falsy values

When a && a.b is replaced with a?.b, the execution for types that can have falsy values is changed. This means that the result value and type of the expression can be different with optional chaining.

The following snippet shows some examples:

function test(value) {
    console.log(`${value && value.length}, ${value?.length}`);
}

test(undefined);       // undefined, undefined
test(null);            // null, undefined
test(true);            // undefined, undefined
test(false);           // false, undefined
test(1);               // undefined, undefined
test(0);               // 0, undefined
test({});              // undefined, undefined
test([]);              // 0, 0
test({ length: "a" }); // a, a
test('');              // , 0
test(NaN);             // NaN, undefined

The empty string, which is falsy, but not nullish, can be especially problematic. Here is an example were introducing optional chaining can lead to problems:

// without optional chaining
if (s && s.length === 0) {
  // not called for the empty string 
  // (e.g., legacy code that works this way)
}

// with optional chaining
if (s?.length === 0) {
  // called for the empty string 
  // (potentially introducing undesired behavior)
}

Optional chaining changes the result for null to undefined

When calling a?.b with null, the result is undefined. However, with a && a.b, the result is null.

Optional chaining can affect the number of calls with side effects

For example, consider changing

f() && f().a;

into

f()?.a;

With &&, f is called one or two times. However, with optional chaining f is only called once. If f has a side effect, this side effect would have been called a different number of times, potentially changing the behavior. This behavior applies not just to function and methods calls but also to getters that can potentially have side effects.

TypeScript does not support optional chaining of the 'void' type

TypeScript does not support optional chaining for void, event though the corresponding JavaScript code would work.

type Input = void | {
    property: string
};

function f(input: Input) {
    // this works:
    console.log(input && input.property);
    // this breaks because void is not undefined in TypeScript:
    console.log(input?.property);
}

Old browsers and JavaScript engines do not support optional chaining

Optional chaining is an ES2020 feature. It is supported on all modern browsers and Node 14+, but for older browsers and Node versions, transpilation might be required (compatibility).

JS Refactoring Combo: Simplify Duplicated Function Call Inside If-Else Statement

Lars Grammel — Fri, 29 Apr 2022 07:08:28 +0000

If-statements can contain duplicated statements with minimal differences. For example, copy-paste changes can result in such code duplication. The duplication can often be simplified by extracting the difference using the conditional operator and reducing the if-else to the deduplicated statement.

Before (Example)

if (direction === "left") {
  move(original.x, -10);
} else {
  move(original.x, 10);
}

Refactoring Steps

💡 The refactoring steps are using P42 JavaScript Assistant v1.99

Extract variable twice with the same variable name
Split declaration and initialization of both extracted constants
Move duplicated first statement out of if-else
Move duplicated last statement out of if-else
Convert the if-else statement into a conditional expression
Merge variable declaration and initialization
Inline variable

After (Example)

move(original.x, direction === "left" ? -10 : 10);