Refactor Suggestion: Inline Symbol

[gioragutt]

Suggestion

🔍 Search Terms

• Refactor
• Inline
• Symbol
• Variable
• Function

✅ Viability Checklist

My suggestion meets these guidelines:

• This wouldn't be a breaking change in existing TypeScript/JavaScript code
• This wouldn't change the runtime behavior of existing JavaScript code
• This could be implemented without emitting different JS based on the types of the expressions
• This isn't a runtime feature (e.g. library functionality, non-ECMAScript syntax with JavaScript output, new syntax sugar for JS, etc.)
• This feature would agree with the rest of TypeScript's Design Goals.

⭐ Suggestion

The suggestion is basically to implement the Inline Symbol refactor that already exists in JetBrains IDEs.

As the article linked above shows, there are several types of symbols that can be inlined, but a good idea would be to start with the Inline Variable refactor, as it's likely to be the simplest one.

📃 Motivating Example

Consider the following code:

const message = 'Something happened!';

console.log(message);
console.log(message);

The Inline Symbol refactor, when applied on message (the VariableDeclarator['id']), would replace the instances where the identifier is referenced with the expression that message is assigned to (the VariableDeclarator['init']).

This would be the output:

console.log('Something happened!');
console.log('Something happened!');

💻 Use Cases

Basically, just like Extract Constant, this refactor's main purpose is to reduce time spent making boilerplate-y operations that could be entirely automatic.

Although I'm not a fan of WebStorm, I've used IntelliJ heavily, and the refactorings available there are really top-notch. They save a serious amount of time. For reference, from colleagues using WebStorm, I know these refactorings are implemented for JS/TS as well, so that's proof to me there's no technically blocker from getting it done.

I'd have contributed all the missing refactorings, but that's a bit far, so I'd like to start with the seemingly (I assume it'll be harder than I imagine) easiest one, with the smallest scope.

[MadaraUchiha]

This operation is not entirely safe in all cases, and it can be difficult to determine whether it is safe or not. Consider the following example

const message = calculateMessage(); // causes a side-effect

console.log(message);
console.log(message);

Refactoring this to

console.log(calculateMessage());
console.log(calculateMessage());

Would cause the side effect to happen twice.

This means that you can't really argue that it can be done automatically, since it carries risks.

I think that you can probably get away with it if you only do it for literals ('Something happened!', true, 3, etc), but any calls or derefs to object properties or variables is going to be risky.

[RyanCavanaugh]

Duplicate #18459

FWIW I think this is one of those refactorings that is implicitly not necessarily semantics-preserving.

[gioragutt]

Thanks for the reply @RyanCavanaugh 🙏🏻

[typescript-bot]

This issue has been marked as a 'Duplicate' and has seen no recent activity. It has been automatically closed for house-keeping purposes.